什么是一个好的JavaScript HTML编辑器添加自定义HTML元素？ [英] What is a good javascript HTML editor for adding custom HTML elements?

问题描述

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

例如，任何HTML编辑器允许用户选择一些文本并且点击粗体按钮，这将在< b>< / b> 标签中包装所选文本。

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

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

我在寻找：

1. 任何易于以这种方式扩展的编辑者的建议


2. 如何添加自定义元素的教程或说明
p> CKEditor提供了一个灵活的样式系统，规则定义如下（在 styles.js 或直接在配置中）：

  {
 name：'My style'，
元素：'h2'，
 attributes：{
'class'：'customClass'，
 id：'someId'
}，
 styles：{
 'font-style'：'italic'
} 
}，
  

：

 < h2 class =customClassid =someIdstyle =font-style：italic;&自定义元素< / h2> 
  

定义后，样式可以直接从样式组合框，可以应用到当前选择或新元素。





样式可以动态创建，应用于范围和元素 a>使用 API 。 样式表剖析器插件可以直接从CSS文件中提取样式。 p>



注意：定义自定义样式可能需要正确配置高级内容过滤器（自CKEditor 4.1开始）。




I want to create a web-based WYSIWYG HTML editor that allows the user to insert pre-defined HTML elements with certain class or id attributes.

For example, any HTML editor allows the user to select some text and click the 'bold' button, and this will wrap the selected text in <b></b> tags.

I would like the user to be able to select some text, click a button called 'somebutton' and wrap the selected text in <div class="someclass"></div>, or click a different button and wrap the text in <h1 id="someid"></h1>, or any other HTML element with a specific attribute as defined by me.

I know that there are a lot of javascript based HTML editors out there, but I am specifically looking for any that are easy to extend in the way described above. I have looked at TinyMCE and Aloha, and in both cases found the documentation very difficult to use or non-existent.

I am looking for:

1. Recommendations of any editors that are easy to extend in this way
2. Tutorials or instructions for how to add custom elements as described above

Thank you!

解决方案

CKEditor provides a flexible styles system, with rules defined as follows (in styles.js or directly in the config):

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

Producing:

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

Once defined, styles are available directly from the Styles Combo Box, possible to apply either to the current selection or to new elements.

Styles can be created dynamically, applied to ranges and elements with the API. The Stylesheet Parser plugin can extract styles directly from CSS files.

Note: Defining custom styles may need a proper configuration of Advanced Content Filter (since CKEditor 4.1).

这篇关于什么是一个好的JavaScript HTML编辑器添加自定义HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！