Javascript 用有序列表替换contentEditable元素时保留可编辑性 背景

正在尝试使用可编辑的内容编辑有序列表。希望粘贴任何内容、键入任何内容或删除任何内容，并始终显示至少一个有序列表项，但决不显示任何其他类型的文本（例如，没有空行、没有引用的文本、没有缩进、没有Microsoft Word中的字体等）

使用jQuery1.9.1支持尽可能多的浏览器。源代码如下所示

代码 JavaScript（jQuery）：

将删除以下事件绑定：

$('.directions > ol').prop('contentEditable','true');
.on( 'paste blur input keyup', '[contenteditable]', function( e ) {

问题 我的主要问题是：如何在不破坏

内容可编辑

绑定的情况下替换内部

内容？这样，即使用户选择替换整个文本，也可以继续编辑内容

---

我的第二个问题是：这是一个可行的方法吗？我研究过。对于这样一个看似简单的任务，它们看起来都非常复杂，并且占用了巨大的空间（除了），jQuery可能会产生这样意想不到的副作用。有时，即使有jQuery快捷方式，使用常规JavaScript也会更好

我在上面发布的JSFIDLE中对此进行了测试。更换线路：

$(this).replaceWith( text );

与

我尝试使用jQuery.html（）命令，但它没有删除绑定，而是一直将文本光标移动到行的开头

---

更新：在Chrome 29、Firefox 24和IE9中测试。总之效果很好。

各种所见即所得编辑器之所以如此复杂，是因为在不同的浏览器/版本中，

contenteditable

的实现仍然存在缺陷/不一致。虽然我个人不希望使用这样的库，但我曾多次遇到这些bug，以至于我选择了一个编辑器，它的代码占用量很大。@t.niese：遗憾的是，我很想同意。两年前，Firefox报告了一个未修复的错误，关于退格不删除列表项。你为你的项目选择了什么编辑器？我使用TinyMCE，而CKEditor是4级之前的版本。但是自从版本4发布后就迁移到了CKEditor（其他编辑器仍然令人失望）。虽然我不喜欢这两种图形用户界面都与功能紧密结合，但CKEditor更容易定制，而且它朝着我需要的方向发展得更快（强大的内联编辑、共享工具栏空间和4.3（beta版）小部件）。TinyMCE似乎总是比Keckeditor落后一步。CKEditor 4的一个缺点是，它目前不支持在块元素周围包装

A

元素。但我个人认为这是目前最好的选择。谢谢！不幸的是，Firefox（在Ubuntu上）中仍然存在许多粘贴错误。我认为精简CKEditor可能是一条可行之路。

$(this).replaceWith( text );

$('.directions > ol').prop('contentEditable','true');
.on( 'paste blur input keyup', '[contenteditable]', function( e ) {

$(this).replaceWith( text );

document.getElementById(this).innerHTML = text;