javascript - 所见即所得、跨浏览器中自定义 div 的问题

Question

我正在开发一个所见即所得编辑器(定制别人的代码)，并且遇到了一些我似乎无法克服的问题。

到目前为止，我已经能够让大多数自定义 div 正常工作，但我在一些事情上遇到了一些麻烦:

问题 1:如果光标位于 div 元素之前，我可以按删除键并开始删除 div 的内容，而无需删除实际的 div 本身。例如，元素在 WYSIWYG 中的外观应如下所示:

但是当光标位于元素之前时按删除键后，我得到以下结果:

如何检查下一个元素是否是此自定义 div 并取消删除按键？

问题 2: 我还可以在元素后面按退格键，这会导致元素后面的任何文本出现在元素内部，如下所示:

如何检查前一个元素是否是我的自定义 div 并取消退格键按下？

问题 3: 在某个部分(“将内容放在这里”文本所在的位置)内时，我使用的 div 属性为 contenteditable="true" 。每次我在这个 div 中按“enter”键时，都会出现一个新的 <div>创建标记，而不是换行标记 ( <br> )。如何强制创建换行标记而不是 div 元素？我在 stackoverflow 上进行了广泛的研究，但尚未找到跨浏览器问题的正确解决方案。

Answer 1

免责声明:我是 CKEditor核心开发人员。

如果您想自定义此功能，可以通过三种方式:

1. 您可以花费几个月(或更长时间)来学习内容编辑、范围、选择和所有这些内容，并尝试实现您的自定义处理程序。您当然可以只花一周或一个月的时间，但结果不会很好，相信我。
2. 您可以选择现有的所见即所得编辑器。
3. 您可以降低对预期行为的期望;)。

现在，如果您决定使用 CKEditor，有一个名为 Widgets 的新功能。它是在最近发布的 CKEditor 4.3 beta 中引入的(4.3 稳定版将在最多 2-3 周内发布)。据我所知，这对您的情况可能非常有帮助。查看Introduction to Widgets guide 。简而言之 - 可以配置输入键在所谓的“嵌套可编辑项”中的行为方式以及确保自定义标记的完整性。