Question

我想创建一个基于Web的WYSIWYG HTML编辑器，允许用户插入具有某些class或id属性的预定义HTML元素。

例如，任何HTML编辑器都允许用户选择一些文本并单击“粗体”按钮，这将包含<b></b>标签中的所选文本。

我希望用户能够选择一些文本，单击名为“somebutton”的按钮并将所选文本包装在<div class="someclass"></div>中，或单击其他按钮并将文本包装在<h1 id="someid"></h1>中，或具有我定义的特定属性的任何其他HTML元素。

我知道有很多基于javascript的HTML编辑器，但我特意寻找任何易于以上述方式扩展的内容。我查看了TinyMCE和Aloha，在这两种情况下都发现文档很难使用或不存在。

我正在寻找：

任何易于以这种方式扩展的编辑推荐
如上所述添加自定义元素的教程或说明

谢谢！

Answer 1

CKEditor提供了灵活的styles system，规则定义如下（styles.js或directly in the config）：

{
    name: 'My style',
    element: 'h2',
    attributes: {
        'class': 'customClass',
        id: 'someId'
    },
    styles: {
        'font-style': 'italic'
    }
},

产：

<h2 class="customClass" id="someId" style="font-style:italic;">Custom element</h2>

一旦定义，样式可以直接从Styles Combo Box获得，可以应用于当前选择或新元素。

可以使用ranges动态创建样式，应用于elements和API。 Stylesheet Parser插件可以直接从CSS文件中提取样式。

注意：定义自定义样式可能需要Advanced Content Filter的正确配置（因为CKEditor 4.1）。

什么是用于添加自定义HTML元素的优秀JavaScript HTML编辑器？

1 个答案: