多种富文本编辑器介绍和使用
富文本编辑器
富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。
作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开发上讲，每个富文本编辑器的用法都是有区别的。
1、TinyMCE
TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。而且这么好的东西还是开源免费的，目前一直有人维护，这款编辑器使用的人非常多。
官网地址：https://www.tiny.cloud/docs/demo/full-featured/
下面将带你快速入门，详细使用可以查看官网使用
1.首先引入该资源库
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
2.将 TinyMCE 初始化为 Web 表单的一部分
selector通过将包含值的对象传递给 来初始化网页上任何一个或多个元素上的 TinyMCE 5 tinymce.init()。该selector值可以是任何有效的CSS 选择器。
例如：要替换<textarea id=“mytextarea”>为 TinyMCE 5 编辑器实例，请将选择器传递’#mytextarea’给tinymce.init()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
将此内容添加到 HTML 文件并在 Web 浏览器中打开它会加载 TinyMCE 编辑器，例如：
<textarea id="default">Hello, World!</textarea>
js如下
tinymce.init({
selector: 'textarea#default'
});
3.添加您的 API 密钥
要删除该通知：
警告图标:该域名未在 Tiny Cloud 注册。
no-api-key将源脚本 ( )替换<script src=…为 Tiny Cloud API 密钥，该密钥是在注册Tiny Cloud时创建的。注册 Tiny Cloud API 密钥还将提供高级插件的试用版。
4.用表单POST保存内容
使用表单处理程序处理内容。
当<form>提交时，TinyMCE 5 将以POST与普通 HTML 相同的方式显示内容<textarea>，包括编辑器内容的 HTML 元素和内联 CSS。主机的表单处理程序可以以与常规<textarea>.
2、CKEditor
Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。
官网地址：https://ckeditor.com/
下面将带你快速入门，详细使用可以查看官网使用
多种方式使用
第一种
<script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>
</head>
<body>
<div id="ckbox"></div>
<script>
CKBox.mount(document.getElementById('ckbox'), {
// You must provide a valid token URL in order to use the application
// After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
// https://ckeditor.com/docs/ckbox/2.4.0/guides/configuration/authentication.html#development-token-endpoint
tokenUrl: 'https://your.token.url'
});
</script>
</body>
</html>
第二种
npm install ckbox
使用：
import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';
CKBox.mount(document.querySelector('#ckbox'), {
tokenUrl: 'https://your.token.url'
});
第三种去下载包
https://download.ckbox.io/CKBox/ckbox_2.4.0.zip
解压后使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="ckbox/ckbox.js"></script>
</head>
<body>
<div id="ckbox"></div>
<script>
CKBox.mount(document.getElementById('ckbox'), {
tokenUrl: 'https://your.token.url'
});
</script>
</body>
</html>
3、UEditor
UEditor 是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。
16年之后百度没有怎么更新了，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版），大家可以根据自己使用环境选择不同的版本。
官网地址：http://ueditor.baidu.com/website/
点击该地址之后有教程使用
4、wangEditor
wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。
官网地址：http://www.wangeditor.com/
下面将带你快速入门，详细使用可以查看官网使用
创建空白编辑器
引入 CSS 定义样式
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px; }
</style>
定义 HTML 结构
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级
当然，工具栏、编辑器 DOM 节点也可自由组合，例如 仿腾讯文档 demo
引入 JS 创建编辑器
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: 'Type here...',
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到 <textarea>
}
}
const editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
</script>
mode: ‘default’ 默认模式 - 集成了 wangEditor 所有功能
mode: ‘simple’ 简洁模式 - 仅有部分常见功能，但更加简洁易用
5、kindeditor
KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。
官网地址：http://kindeditor.net/demo.php
下面将带你快速入门，详细使用可以查看官网使用
- 下载编辑器
下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。
下载页面: http://www.kindsoft.net/down.php
Note
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
- 部署编辑器
解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/ - 修改HTML页面
在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。
在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
</script>
Note
第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。
var options = {
cssPath : ‘/css/index.css’,
filterMode : true
};
var editor = K.create(‘textarea[name=“content”]’, options);
- 获取HTML数据
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery
// 设置HTML内容
editor.html('HTML内容');
Note
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。
// 关闭过滤模式，保留所有标签
KindEditor.options.filterMode = false;
KindEditor.ready(function(K)) {
K.create('#editor_id');
}
6、simditor
simditor是Tower平台使用的富文本编辑器，是一款轻量化的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。虽然是国内出品，但文档是英文的。开源免费。
官网地址：https://simditor.tower.im/
两个方式引入，可以使用下载的方式，
您还可以通过bower和npm安装Simditor：
npm install simditor
bower install simditor
将以下文件导入您的web应用程序
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>
在项目中使用Simditor
要使用Simditor，首先需要textarea元素如下：
<textarea id="editor" placeholder="Balabala" autofocus></textarea>
初始化Simditor：
var editor = new Simditor({
textarea: $('#editor')
//optional options
});
textarea是必需的选项。jQuery对象、HTML元素或Selector字符串可以传递给该选项。
一些可选选项：
- placeholder（默认值：“”）simditor的占位符。默认情况下，使用文本区域的占位符属性值。
- toolbar（默认值：true）-显示工具栏按钮
- toolbarFloat（默认值：true）-修复了滚动时浏览器顶部的工具栏。
- toolbarHidden（默认值：false）-隐藏工具栏。
- defaultImage（默认值：'images/image.png'）-默认图像占位符。在Simditor中插入图片时使用。
- tabIndent（默认值：true）-使用“tab”键进行缩进。
- params（默认值：{}）-在文本区域中插入隐藏的输入以存储参数（键-值对）
- upload（默认值：false）-接受false或键值对。上传图像的额外选项。例如“url”、“params”
- pasteImage（默认值：false）-支持通过粘贴剪贴板中的图像进行上传。只有Firefox和Chrome支持。
7、bootstrap-wysiwyg
bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器，界面简洁大方。使用需要先引入bootstrap。
地址：http://mindmup.github.io/bootstrap-wysiwyg/
使用方法在官网内有
8、summernote
summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。
summernote同样依赖于jquery和bootstrap，使用前先引入这两项。
地址：https://summernote.org/
下载压缩包
解压使用
安装
需要HTML5 doctype
Bootstrap使用某些需要HTML5 doctype的HTML元素和CSS属性。包括在你所有项目的开始
<!DOCTYPE html>
<html lang="en">
...
</html>
包括js/css
如果您使用的是Boostrap 3或4版本的Summernote，Summernote使用开源库jQuery和Bootstrap，如果您使用Lite版本的Summarnote，则只使用jQuery。在中包含以下代码headHTML页面的区域
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
如果您在不同的文件夹中下载了summernote，请不要忘记更改文件的路径。
然而，正如现在许多开发人员所做的那样，您可以将样式表包含在head是页面的，并在页面底部，但在结束之前包含Javascript身体标签
Fontawese依赖
在v0.8.0之后，您不必使用fontawesome来显示Summernote的图标。但是你仍然可以使用fontwo敬畏来制作你的自定义图标。有关更多详细信息，请访问自定义按钮第节。在v0.8.18之后，您可以使用自定义图标覆盖注释图标。有关更多详细信息，请访问自定义图标第节
嵌入
Summernote可以与form .
不使用form，我们建议使用div公司在body; 然后，该元素将用于您希望在页面中呈现Summernote编辑器的位置。
<div id="summernote">Hello Summernote</div>
在中使用form，与上面的基本相同，但不是div公司，我们建议使用textarea元素内部形式，它应该包含一个name属性，以便在提交表单时可以使用该名称在后端处理编辑器数据。此外，如果在form设置属性method="post"为了允许更大的编辑器内容解析到后端，如果不这样做，数据可能无法解析，或者将被截断。
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
</form>
文档准备好后运行下面的脚本！
$(document).ready(function() {
$('#summernote').summernote();
});
这个$(document).ready如果在文档末尾包含Javascript，则函数是特别必要的。
简单示例
将下面的代码另存为index.html然后用浏览器打开它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
9、Froala
Froala是一款功能丰富的富文本编辑器，界面分类清晰，容易集成，容易升级，支持主流浏览器，具有行内编辑功能。Froala代码示例很多，可以集成在很多js框架里如React.js，Aurelia，Angular，Ionic，Django等。插件很多，易于扩充功能。
Froala是收费的不过多介绍
地址：https://www.froala.com/wysiwyg-editor
10、Quill
Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。
开源免费，项目活跃，一直有人维护。
地址：https://quilljs.com/
12、dhtmlxEditor
DHTMLX组件是一整套基于JS的UI库，功能强大，其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular，React和Vue.js框架中，该编辑器还同时支持Markdown和富文本。
支持普通视图和类似word一样的页面视图，支持全屏幕，工具支持自定义，包括工具条颜色和样式等。
dhtmlxEditor分为免费版和收费版，免费版具有绝大多数功能，而且免费版是开源的你可以在代码级别随便扩充。
地址：https://dhtmlx.com/docs/products/dhtmlxRichText/
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
