javascript - 将自定义元素添加到 TinyMCE 的首选方式

Question

我是tinyMCE新手，目前正在研究向tinyMCE添加自定义元素的首选方式？

我向工具栏添加了许多按钮，这些按钮依次触发 (a) 为选定的文本部分插入元素，以及 (b) 再次单击时从选定的文本中删除这些元素。

我不想允许嵌套这些元素，所以基本上我只想用给定的、不重叠的标签来标记句子或单词的部分，例如:<foo>Hello</foo> world

目前我在tinyMCE文档中发现了这两种可能性:

#1 tinyMCE.execInstanceCommand(editor_id, command, user_interface, value, focus)    

和

#2  var n = dom.create(element);
    n.innerText = sel.getContent({format : 'text'});
    tinyMCE.activeEditor.selection.setNode(n);

其中#2 看起来是更灵活的方法，因此值得我追求。

我已经开始使用方法 #2 实现一个插件，但我不确定如何处理以下内容:

• 选择重叠元素边界和文本节点(例如 <foo>hello</foo> world <bar>!</bar>
• 合并相邻元素 ( <foo>bar</foo><foo>bar</foo> ) 或
• 如何处理空元素等等。

这就是为什么我想知道我是否缺少某种预定义的接口(interface)，因为“正常”元素(例如strong, em, h1,…,h6)也应该需要许多这些功能。等等。

如果您需要更多信息，请告诉我，任何提示或指示将不胜感激。

Answer 1

出于格式化目的，tinymce 核心文件中有 Formatter.js 类。但你想要的东西相当复杂。我们试图阻止tinymce嵌套跨度，并根据我们的需求调整了Formatter.js。