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

Question

我正在开发 WYSIWYG 编辑器（自定义别人的代码）并且遇到了一些我似乎无法克服的问题。

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

问题 1：如果光标在 div 元素之前，我可以按 delete 并开始删除 div 的内容而不删除实际的 div 本身。这是元素在所见即所得中的外观，例如：

但是当光标在元素之前按删除后，我得到以下信息：

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

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

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

问题 3：当在一个部分（“将内容放在此处”文本所在的位置）内时，我使用的是 div 属性contenteditable="true"。每次我在此 div 中按“输入”时，<div>都会创建一个新标签，而不是换行标签 ( <br>)。如何强制创建换行标记而不是 div 元素？我在stackoverflow上看了很多遍，但还没有找到解决跨浏览器问题的合适方法。

Answer 1

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

如果要自定义，有以下三种方法：

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

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