常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

常用的HTML富文本编辑器有UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor等。下面我将对每个编辑器进行简要的说明介绍。

1. UEditor

UEditor是由百度开发的一款富文本编辑器，支持中英文输入、拼写检查、超链接、表情等功能，具有简单易用、插件丰富、可扩展性强的特点。

UEditor的集成非常简单，只需引入UEditor的JS文件和样式文件即可，而且可以根据需求使用各种插件来扩展其功能。例如：

UE.getEditor('myEditor', {
    toolbars: [
        ['bold', 'italic', 'underline']
    ]
});

上面代码中的toolbars属性设置了工具栏的内容，只包含三个按钮：粗体、斜体和下划线。这样就可以在页面中使用一个简单的textarea标签来创建一个富文本编辑器。

2. CKEditor

CKEditor是一个功能强大的富文本编辑器，支持多种浏览器，包括移动设备。其特点是可以通过插件来扩展各种功能，从而满足不同的需求。

CKEditor的集成方式与UEditor类似，只需引入CKEditor的JS文件和样式文件即可，然后通过配置项来设置编辑器的各项参数。

例如，下面代码设置了CKEditor的工具栏样式，去除了不需要的按钮：

Config.toolbar_custom = [
    { name: 'document', items: [ 'Source','-','Save','NewPage','Preview','-','Templates' ] },
    { name: 'clipboard', items: [ 'Clipboard', 'Undo', 'Redo' ] },
    { name: 'editing', items: [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
    { name: 'basicstyles', items: [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'links', items: [ 'Link','Unlink','Anchor' ] },
    { name: 'insert', items: [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak',
                 'Iframe' ] },
    '/',
    { name: 'styles', items: [ 'Styles','Format' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks','-','About' ] }
];

示例

假设我们需要在网站中添加一个富文本编辑器，以便让用户在发布文章时可以格式化文章内容。我们可以使用UEditor或CKEditor来实现。

首先，我们需要从UEditor或CKEditor的官网下载相应的文件，并将其解压到网站的目录中。然后，在页面中引入UEditor或CKEditor的JS和CSS文件，并创建一个容器元素：

<div id="editor"></div>

接下来，我们使用下面的代码来初始化UEditor：

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    var editor = UE.getEditor('editor');
</script>

或者使用下面的代码来初始化CKEditor：

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    CKEDITOR.replace('editor');
</script>

这样，我们就成功地将富文本编辑器添加到了网站中。当用户在编辑器中输入文章内容后，可以使用JavaScript来获取其HTML内容：

var content = editor.getContent();

或者：

var content = CKEDITOR.instances.editor.getData();

然后，我们可以将这些内容保存到数据库中，以便在网站上显示。