做一个p元素的内容可编辑和JQuery UI可排序

Question

是否有可能使p元素的内容可编辑和JQuery UI可排序？

在我下面的简单示例中，p元素是可排序的，但不能编辑它们的文本。无论如何要克服这一点？

注意我曾尝试在容器嵌套p的，使得容器可排序且p是可编辑的，但我仍然无法编辑内p。

$(document).ready(function() { 
 
    \t $(".elements").sortable({ 
 
\t connectWith: ".elements" 
 
\t }); 
 
});

p { 
 
\t height: 100px; 
 
\t background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="../dist/js/visual-designer.min.js"></script> 
 

 
<div class="elements"> 
 
\t <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p> 
 
\t 
 
\t <!-- Even if I nest p's in a container they still are not editable --> 
 
\t <div class="test-container"> 
 
\t \t <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p> 
 
\t </div> 
 
</div>

Answer 1

也许它不允许版本，因为jQuery是覆盖在CONTENTEDITABLE =真元素默认启用的一些事件回调。

你可以尝试，以使该版本覆盖的focusIn和事件的内容事件。检查他们是如何做的在下面的链接：

Focus/blur events on contenteditable elements

我希望它会帮助你;）

Answer 2

通过一些随机的企图得到它的工作，我发现，在设置焦点元素，然后将光标移动到可编辑内容的末尾（如here,Nico Burns）足以使内容可编辑。

我的猜测是，排序可以防止内容编辑因为某种event.preventDefault或cancelBubble而变得焦点。

$(document).ready(function() { 
 
    $(".elements").sortable({ 
 
    connectWith: ".elements" 
 
    }); 
 

 
    $(".elements p").on("click", function(e) { 
 
    $(this).focus(); 
 
    setEndOfContenteditable(e.target); 
 
    }); 
 
}); 
 

 
function setEndOfContenteditable(contentEditableElement) { 
 
    var range, selection; 
 
    if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+ 
 
    { 
 
    range = document.createRange(); //Create a range (a range is a like the selection but invisible) 
 
    range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range 
 
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
 
    selection = window.getSelection(); //get the selection object (allows you to change selection) 
 
    selection.removeAllRanges(); //remove any selections already made 
 
    selection.addRange(range); //make the range you have just created the visible selection 
 
    } else if (document.selection) //IE 8 and lower 
 
    { 
 
    range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible) 
 
    range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range 
 
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
 
    range.select(); //Select the range (make it the visible selection 
 
    } 
 
}

p { 
 
    height: 50px; 
 
    background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="../dist/js/visual-designer.min.js"></script> 
 

 
<div class="elements"> 
 
    <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p> 
 

 
    <div> 
 
    <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p> 
 
    </div> 
 
</div>

Answer 3

这里是被点击的元件的情况下，p标签被转换成input标签的示例，并且当焦点丢失时，其转换回p标签！

$(document).ready(function() { 
 
\t // How to associate a handle that sits outside the element to be dragged? 
 
    \t $(".elements").sortable({ 
 
\t connectWith: ".foo" 
 
\t }); 
 
    
 
    function focusout(){ 
 
    var val = $('input[contenteditable*="true"]').val(); 
 
    var replacement2 = $('<p contenteditable="true">'+val+'</p>'); 
 
    $('input[contenteditable*="true"]').replaceWith(replacement2); 
 
    replacement2.on("click", clicked); 
 
    } 
 
    
 
    function clicked(){ 
 
    var replacement = $('<input contenteditable="true" value="'+this.innerHTML+'"/>'); 
 
    $(this).replaceWith(replacement); 
 
    replacement.on("focusout", focusout); 
 
    $('input[contenteditable*="true"]').focus(); 
 
    } 
 
    
 
    $('p[contenteditable*="true"]').on("click", clicked); 
 
    
 
});

p { 
 
\t height: 100px; 
 
\t background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="elements"> 
 
\t <p id="foo" contenteditable="true">Foo. Help! I can be sorted but cannot be edited.</p> 
 
\t 
 
\t <!-- Even if I nest p's in a container they still are not editable --> 
 
\t <div class="test-container"> 
 
\t \t <p id="bar" contenteditable="true">Bar. Help! I can be sorted but cannot be edited.</p> 
 
\t </div> 
 
</div>