「前端开发」各大常见前端富文本编辑器（带你从入门到熟练使用）你用过那几个？
站长
· 阅读数 19
🙏废话不多说系列，直接开整🙏
CKEditor 富文本编辑器【推荐 5🌟】
（1）简单介绍
- Github 网址：CKEditor
- 学习网址：CKEditor Ecosystem Documentation
- 基本特点：（应该算是最流行的富文本编辑器了）
-
- 功能特性：CKEditor是一个功能丰富的富文本编辑器，支持格式化文本、插入图片和视频、创建表格、添加超链接等功能。它支持自定义样式和工具栏按钮，以满足不同需求。
- 扩展性：CKEditor可以通过插件进行扩展，用户可以根据自己的需求添加或删除插件。
- 跨平台支持：CKEditor可以在各种操作系统和浏览器上运行，包括Windows、Mac、Linux以及常见的主流浏览器如Chrome、Firefox、Safari等。
- 授权许可：开源版是基于GPL和LGPL许可证发布的，可以免费使用和修改。商业版需要购买许可证才能使用，并提供更多功能和特性，如图片上传、拖放支持、协作编辑等。
（2）使用案例
① 经典CKEditor：
在网页固定位置上添加固定CKEditor：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
动态效果展示:
② 内嵌CKEditor编辑器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Inline editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/inline/ckeditor.js"></script>
</head>
<body>
<h1>Inline editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
InlineEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
动态效果展示：
③ 弹框CKEditor编辑：
选择文本的时候，出现提示框，对选择的文本进行渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Balloon editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/balloon/ckeditor.js"></script>
</head>
<body>
<h1>Balloon editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
BalloonEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
动态效果演示：
④ 文本富文本化编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Document editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/decoupled-document/ckeditor.js"></script>
</head>
<body>
<h1>Document editor</h1>
<!-- The toolbar will be rendered in this container. -->
<div id="toolbar-container"></div>
<!-- This container will become the editable. -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>
<script>
DecoupledEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
演示：
Quill 富文本编辑器（轻量级）【推荐 3 🌟】
（1）简介
学习文档地址：Quickstart - Quill Rich Text Editor (quilljs.com)
- 功能特性：Quill是一款轻量级的富文本编辑器，支持常用的文本编辑功能，如加粗、斜体、下划线、字体、字号等，还支持列表、引用、代码块等样式，并提供了图片、视频、表格等媒体插入功能。
- 可定制性：Quill提供了丰富的配置选项，可以根据需求进行自定义，如修改默认的工具栏按钮，添加或删除特定的功能。
- 跨平台支持：Quill可在多个平台上使用，包括 Web、移动设备 和 桌面应用程序。
（2）使用案例
【1】基本简单案例用法
基本案例效果：只提供建的 文本布局样式：例如 标题、文本加粗、斜体、下划线、超链接、序号，段落，文字大小设置等功能；（如下图展示）
业务场景用法：一般我们会使用在页面上进行富文本编辑，然后将富文本内容保存给后端，此时我们可以通过获取 quill-editor 元素所有子元素的内容进行存储字符串给到后端即可。下方案例源码就是这么的实现思路，需要注意的是：在后端同样字符回显的时候是需要将内容重新自动回显过来的时候注意是否可编辑和是否内容初始化进了 quill 里面了。
完整演示源码↓↓↓：（很简单的用法，我们直接使用 quill 的 CDN 模式来达到基本的用法即可，如果是生产环境所需，可以下载下来到本地进行部署引用即可。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Include Quill stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
</head>
<body>
<!-- Create the toolbar container -->
<div id="toolbar">
<button id="contentId" onclick="showContent()">获取富文本内容</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<!-- <p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br /></p> -->
</div>
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill("#editor", {
theme: "snow",
});
// 初始化内容
quill.setText('Hello\n');
function showContent() {
const contentDom = document.getElementById("editor");
// alert(contentDom.textContent)
console.log('纯文本内容：', contentDom.textContent);
console.log('富文本编辑器的内容：', getAllChildrenContent());
}
function getAllChildrenContent() {
// 获取父元素
const parentElement = document.getElementsByClassName('ql-editor')[0];
// 获取所有直接子元素
const childElements = parentElement.children;
// 遍历所有子元素并得到一个 HTML 字符串，用于存储于后端
let textEditroContent = new String();
for (let i = 0; i < childElements.length; i++) {
const childElement = childElements[i];
// 处理每个子元素
console.log(childElement);
console.log(childElement.outerHTML);
textEditroContent += new String(childElement.outerHTML);
}
return JSON.stringify(textEditroContent);
}
</script>
</body>
</html>
【2】多功能编辑器模式使用案例
多功能配置下，我们需要做到：① 引入跟多的 quill 相关的配置的CDN；② 当然也提供了更多的功能，例如增加了 图片、公式、文本颜色、角标、代码引入格式、段落对齐格式、加入视频地址、文本段落删除线 等功能；
效果如图所示：
完整源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
</head>
<body>
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<button class="ql-formula"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
<div id="editor">
</div>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill('#editor', {
modules: {
syntax: true,
toolbar: '#toolbar-container',
},
placeholder: 'Compose an epic...',
theme: 'snow',
});
</script>
</body>
</html>
（3）个性化配置
见 官方文档（Configuration - Quill Rich Text Editor (quilljs.com)）即可哈，实际上使用的估计只需要按照上述使用案例基本上满足日常业务需求。
wangEditor 5 富文本编辑器【推荐：5🌟】
（1）简介
简单一句话概括：开源 Web 富文本编辑器，开箱即用，配置简单。
- 功能特性：wangEditor 是一个轻量、简洁、界面美观的富文本编辑器，提供了基本的文本编辑功能，如格式化文本、插入图片、视频、链接、表格等。
- 易用性：wangEditor 易于集成和使用，适用于简单的文本编辑需求。
（2）使用案例
【1】经典使用案例
本案例使用 CDN 的方式引入对应的 js 文件和 css 文件，方便大家快速上手了解学习核心内容。此富文本编辑器包含两个基本的界面模式：① 较全面的经典模式；② 较少的简单模式；具体功能比较见下图自行比较即可。
经典效果如下：(经典模式，即 默认模式)
简单模式效果如下：
完整源码如下：（包含三个部分 ① 定义对应的wangEditor 容器；② 引入对应的 js 文件；③ 定义 编辑器的工具栏和编辑框内置组件，方便后续个性化设置和切换不同的组件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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>
</head>
<body>
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
</body>
<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>
</html>
（3）具体配置详细介绍
【1】获取 HTML 内容
const editorConfig = {
placeholder: 'Type here...',
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到 <textarea>
}
}
【2】设置 HTML 内容
【注意】这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写。HTML 格式非常灵活，wangEditor 无法兼容所有的 HTML 格式。有两种方式：
① 创建时初始默认富文本编辑器内容；
② 动态后续追加添加文本内容；
// 方式1：创建时添加（注意：富文本内容需要在编辑器中可以被兼容，否则会被忽略掉不显示富文本样式）
const editor = createEditor({
html: '<p>Hello <strong>world</strong></p>', // 从 editor.getHtml() 获取的 html 内容
// 其他属性...
})
// 方式2：动态后续追加富文本内容设置
editor.setHtml('<p>hello <strong>world</strong></p>');
效果如下图所示：（注意：当两者同时设置的时候，当然肯定是以动态后续追加的为准。）
【3】AJAX 异步初始化且动态设置内容
实际业务中往往是需要编辑文本内容并且可动态更改追加富文本内容，所以需要根据后端的接口响应来调整初始化，由于一个页面加载一个富文本编辑器，可能会影响整个页面加载响应速度，所以我们可以等待 Ajax 返回之后再创建编辑器，提升用户体验。
// 伪代码
import { IDomEditor } from '@wangeditor/editor'
let editor: IDomEditor | null = null // TS 语法
// let editor = null // JS 语法
ajax(url, res => {
editor = createEditor({
// content 或 html
// 其他属性
})
})
【4】国际化语言切换（npm管理）
国际化语言：直接CDN是不支持的直接改语言包设置的，需要使用模块化管理处理。
我们通过上述可以知道，默认是中文的，当然也是内置了英文的界面方便国际化使用。所以国际化一般有三种设置情况：
- 国内语言-中文（默认）；
- 国际通用-英语（已内置兼容）；
- 自定义语言（例如：法语、俄罗斯语等小语种）；
// 更改 成英语如下配置：
import { i18nChangeLanguage } from '@wangeditor/editor'
// 切换语言 - 'en' 或者 'zh-CN'
i18nChangeLanguage('en')
// 创建编辑器...
增加新语言的设置：
import { i18nAddResources, i18nChangeLanguage, t } from '@wangeditor/editor'
// 添加新语言，如日语 ja
i18nAddResources('ja', {
// 标题
header: {
title: 'ヘッダー',
text: 'テキスト',
},
// ... 其他语言词汇，下文说明 ...
})
// 切换为日语 ja
i18nChangeLanguage('ja')
// 获取单个词汇
console.log( t('header.title') )
// 创建编辑器...
【5】自定义主题颜色
本案例自定义样式效果如下：
/* 暗色主题 */
#editor—wrapper {
--w-e-textarea-bg-color: #333;
--w-e-textarea-color: #fff;
// textarea - css vars
--w-e-textarea-bg-color: #fff;
--w-e-textarea-color: #333;
--w-e-textarea-border-color: #ccc;
--w-e-textarea-slight-border-color: #e8e8e8;
--w-e-textarea-slight-color: #d4d4d4;
--w-e-textarea-slight-bg-color: #f5f2f0;
--w-e-textarea-selected-border-color: #B4D5FF; // 选中的元素，如选中了分割线
--w-e-textarea-handler-bg-color: #4290f7; // 工具，如图片拖拽按钮
/* color: #333; */
// toolbar - css vars
--w-e-toolbar-color: yellow; /* #595959; */
--w-e-toolbar-bg-color: black; /* 背景颜色 */
--w-e-toolbar-active-color: yellow; /* #333; */
--w-e-toolbar-active-bg-color: white;/* #f1f1f1; */
--w-e-toolbar-disabled-color: yellow; /* #999; */
--w-e-toolbar-border-color: #999; /* #e8e8e8; 分割线颜色 */
/* ...其他... */
}
其他的自定义属性或想自定义主体见【GitHub 开源地址】
Jodit 富文本编辑器（轻量级）【推荐 4 🌟】
（1）简介
- 功能特性：Jodit 是一个轻量的富文本编辑器，功能相比其他编辑器更加完善，支持多种文本编辑功能和样式设置。
- 易用性：Jodit 的界面简洁美观，易于上手操作。
（2）使用案例
【1】经典用法：列举了所有默认配置属性
经典效果图如下：
完整示例代码如下：（使用 CDN 方式引入，便于快速了解 Jodit 富文本编辑器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jodit 富文本编辑器</title>
<!-- Jodit 富文本编辑器-经典用法依赖的文件 -->
<link rel="stylesheet" href="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.css" />
<script src="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
</body>
<script type="text/javascript">
var editor = Jodit.make('#editor', {
zIndex: 0, // 层级
readonly: false, // 只读模式 - 关闭
activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about', 'dots'],
toolbarButtonSize: 'middle', // 按钮大小
theme: 'default', // 主题: dark 暗黑模式， default 白天模式
saveModeInCookie: false,
spellcheck: true, // 读写检查-开启
editorCssClass: false, // 编辑器样式-关闭
triggerChangeEvent: true, // 触发器事件-开启
width: 'auto',
height: 'auto',
minHeight: 100,
direction: '',
language: 'auto',
debugLanguage: false,
i18n: 'en',
tabIndex: -1,
toolbar: true, // 快捷按钮菜单栏-开启
enter: "P",
defaultMode: Jodit.MODE_WYSIWYG, // 另一种模式：Jodit.constants.MODE_SOURCE,
useSplitMode: false,
colors: {
greyscale: ['#000000', '#434343', '#666666', '#999999', '#B7B7B7', '#CCCCCC', '#D9D9D9', '#EFEFEF', '#F3F3F3', '#FFFFFF'],
palette: ['#980000', '#FF0000', '#FF9900', '#FFFF00', '#00F0F0', '#00FFFF', '#4A86E8', '#0000FF', '#9900FF', '#FF00FF'],
full: [
'#E6B8AF', '#F4CCCC', '#FCE5CD', '#FFF2CC', '#D9EAD3', '#D0E0E3', '#C9DAF8', '#CFE2F3', '#D9D2E9', '#EAD1DC',
'#DD7E6B', '#EA9999', '#F9CB9C', '#FFE599', '#B6D7A8', '#A2C4C9', '#A4C2F4', '#9FC5E8', '#B4A7D6', '#D5A6BD',
'#CC4125', '#E06666', '#F6B26B', '#FFD966', '#93C47D', '#76A5AF', '#6D9EEB', '#6FA8DC', '#8E7CC3', '#C27BA0',
'#A61C00', '#CC0000', '#E69138', '#F1C232', '#6AA84F', '#45818E', '#3C78D8', '#3D85C6', '#674EA7', '#A64D79',
'#85200C', '#990000', '#B45F06', '#BF9000', '#38761D', '#134F5C', '#1155CC', '#0B5394', '#351C75', '#733554',
'#5B0F00', '#660000', '#783F04', '#7F6000', '#274E13', '#0C343D', '#1C4587', '#073763', '#20124D', '#4C1130'
]
},
colorPickerDefaultTab: 'background',
imageDefaultWidth: 300, // 图片默认宽度
removeButtons: [],
disablePlugins: [],
extraButtons: [],
sizeLG: 900,
sizeMD: 700,
sizeSM: 400,
sizeSM: 400,
buttons: [ // 按钮顺序自定义
'source', '|',
'bold',
'strikethrough',
'underline',
'italic', '|',
'ul',
'ol', '|',
'outdent', 'indent', '|',
'font',
'fontsize',
'brush',
'paragraph', '|',
'image',
'video',
'table',
'link', '|',
'align', 'undo', 'redo', '|',
'hr',
'eraser',
'copyformat', '|',
'symbol',
'fullsize',
'print',
'about'
],
buttonsXS: [
'bold',
'image', '|',
'brush',
'paragraph', '|',
'align', '|',
'undo', 'redo', '|',
'eraser',
'dots'
],
events: {}, // 事件
textIcons: false, // 文本还是logo展示在菜单栏？默认 logo图标展示
});
// 初始化：默认值
editor.setEditorValue('<p>start</p>')
</script>
</html>
如果你想简单的简化版本的 Jodit 富文本编辑器，你可以直接参照 【Getting Started | Jodit Editor (xdsoft.net)】从 零开始学习了解接触 Jodit。
【2】自定义主题
自定义主题的核心就是：
- 1️⃣ 确认自己需要的样式；
- 2️⃣ 根据 jodit 框架的样式，全局覆盖即可。
同样，其他的富文本编辑器如果需要手动更换自己想要的主题，找到对应的主题样式的对应的属性进行设置即可。
① 本文自定义主题如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jodit 富文本编辑器-自定义主题</title>
<!-- Jodit 富文本编辑器-经典用法依赖的文件 -->
<link rel="stylesheet" href="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.css" />
<script src="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.js"></script>
<style>
/* 自定义客户主题 */
.jodit_theme_summer {
--jd-color-background-default: #417505;
--jd-color-border: #474025;
--jd-color-panel: pink;
--jd-color-icon: #8b572a;
}
</style>
</head>
<body>
<textarea id="summer-editor"></textarea>
</body>
<script>
const editor = Jodit.make('#summer-editor', {
theme: 'summer'
});
</script>
</html>
【3】自定义插件：统计字符的样式和展示文案
默认样式：
自定义插件之后的样式：
自定义插件的完整源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jodit 富文本编辑器-自定义插件-统计字符数字</title>
<!-- Jodit 富文本编辑器-经典用法依赖的文件 -->
<link rel="stylesheet" href="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.css" />
<script src="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
</body>
<script>
Jodit.plugins.add('stat', function(editor) {
const statusbar = document.createElement('div');
statusbar.style.backgroundColor = '#f8f8f8';
statusbar.style.color = 'red';
statusbar.style.fontSize = '11px';
statusbar.style.padding = '1px 4px';
function calcStat() {
var text = Jodit.modules.Helpers.trim(editor.editor.innerText),
wordCount = text.split(/[\s\n\r\t]+/).filter(function(value) {
return value;
}).length,
charCount = new Blob([text]).size; //text.replace(/[\s\n\r\t]+/, '').length;
statusbar.innerText = '单词: ' + wordCount + ' 字符: ' + charCount;
}
editor.events
.on('change afterInit', editor.async.debounce(calcStat, 100))
.on('afterInit', function() {
editor.container.appendChild(statusbar);
});
});
Jodit.make('#editor');
</script>
</html>
Froala Editor 富文本编辑器【推荐 4 🌟】
（1）简介
- 功能特性：Froala Editor 是一个功能强大的富文本编辑器组件，支持常见的文本格式化操作，如加粗、斜体、下划线、删除线等，还允许自定义样式，包括字体、颜色、背景色等。此外，它还支持插入图片和视频、创建和编辑表格、插入超链接等功能。
- 插件和扩展：Froala Editor 支持插件和扩展，可以根据需要添加额外的功能和自定义选项。
- 版本：Froala Editor 有 开源版 和 商业版 两个版本。开源版免费提供，包含了基本的编辑功能；商业版则拥有更多高级功能和扩展，如代码高亮、导入/导出文件、嵌入式视频等。
【1】引入方式1：cdn.jsdelivr.net
<!-- 引入 Froala Editor CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/css/froala_editor.min.css">
<!-- 引入 Froala Editor JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/js/froala_editor.min.js"></script>
【2】引入方式2：cdnjs.cloudflare.com
<!-- 引入 Froala Editor CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/css/froala_editor.min.css">
<!-- 引入 Froala Editor JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/js/froala_editor.min.js"></script>
（2）使用案例
深入学习文档：概念 - Froala （froala.com/wysiwyg-edi…）
【1】基本简单使用案例
效果图如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@3.2.7/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@3.2.7/js/froala_editor.pkgd.min.js"></script>
</head>
<body>
<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>
<!-- Initialize the editor. -->
<script>
new FroalaEditor('textarea');
</script>
</body>
</html>
【2】初始化设置内容 & 获取文本内容
效果图如下：
完整源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Include Editor style. -->
<!-- <link href="https://cdn.jsdelivr.net/npm/froala-editor@3.2.7/css/froala_editor.pkgd.min.css" rel="stylesheet"type="text/css" /> -->
<!-- Include Editor JS files. -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@3.2.7/js/froala_editor.pkgd.min.js"></script> -->
<!-- 引入 Froala Editor CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/css/froala_editor.min.css">
<!-- 引入 Froala Editor JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.6/js/froala_editor.min.js"></script>
<style type="text/css">
/* fr-box, .fr-element, .fr-toolbar, .fr-second-toolbar , div.fr-more-toolbar{
background-color: black;
} */
</style>
</head>
<body>
<button onclick="getAllChildrenContent()"> 获取富文本编辑器内容 </button>
<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea id="editor"></textarea>
<!-- Initialize the editor. -->
<script>
let editor = new FroalaEditor('textarea');
// 1.初始化内容
window.onload = function() {
// document.getElementById('editor').innerHTML =
// '<p>212</p><p>DFD<strong>SF</strong>D</p><ol><li>HELLO</li><li>NIHAO</li><li>鸟</li></ol><p>DF<em>DFD</em>FD</p>';
var textAreaDiv = document.getElementsByClassName('fr-element fr-view')[0];
textAreaDiv.innerHTML =
'<p>212</p><p>DFD<strong>SF</strong>D</p><ol><li>HELLO</li><li>NIHAO</li><li>鸟</li></ol><p>DF<em>DFD</em>FD</p>';
}
// 2.获取编辑框里的富文本信息
function getAllChildrenContent() {
// 获取父元素
const parentElement = document.getElementsByClassName('fr-element fr-view')[0];
// 获取所有直接子元素
const childElements = parentElement.children;
// 遍历所有子元素并得到一个 HTML 字符串，用于存储于后端
let textEditroContent = new String();
for (let i = 0; i < childElements.length; i++) {
const childElement = childElements[i];
// 处理每个子元素
// console.log(childElement);
// console.log(childElement.outerHTML);
textEditroContent += new String(childElement.outerHTML);
}
console.log("富文本内容为：", JSON.stringify(textEditroContent));
return JSON.stringify(textEditroContent);
}
</script>
</body>
</html>
（3）更多配置化案例
至此，froala-editor 富文本编辑器，再实际业务中的简单常见的使用：① 编辑富文本内容；② 初始化详情内容；③ 获取编辑器中的富文本内容传输给后端；（注意：如果涉及到文件上传，需要仔细查看对应的 API 中文件上传的服务地址接口进行更换和个性化配置；）
Slate 编辑器（略讲）【推荐 3 🌟】
（1）简介
- 功能特性：Slate是一个强大的富文本编辑器框架，它基于JavaScript 构建，并且被设计用于开发灵活、可扩展、可定制的富文本编辑体验。Slate提供了丰富的API和插件系统，支持按需添加或组合插件，精简高效。
- 案例：Slate Examples (slatejs.org)
（2）使用案例
使用案例：Slate Examples (slatejs.org)
TinyMCE 编辑器【推荐 3🌟：非免费】
（1）简介
-
功能特性：TinyMCE 是一个基于JavaScript的富文本编辑器组件，提供了许多强大的功能和工具，如字体样式、字体大小、加粗、斜体、下划线、列表、表格、插入链接、插入图片等。
-
可定制性：TinyMCE 允许开发者根据自己的需求进行定制，包括调整编辑器的外观和行为，添加自定义按钮、菜单和工具栏。
-
多语言支持：TinyMCE 支持多种语言，并可以轻松地切换编辑器的语言。
-
插件系统：TinyMCE 支持插件系统，可以方便地扩展编辑器的功能。
-
授权许可：开源版使用 LGPL 许可证，允许免费使用、修改和分发代码。商业版则需要购买许可证，提供更多高级功能和插件，如图像编辑、深度格式化、电子邮件支持等。
（2）使用案例
此处不想做过多介绍（相信大家也是），哈哈 😄
附录
- 一些高可用的 CDN 地址：
-
- jsDeliver：jsDelivr - A free, fast, and reliable CDN for JS and open source
- staticfile CDN：Staticfile CDN
- CDN-js ：cdnjs.cloudflare.com
- CKEditor 编辑器：
- Jodit 轻量级富文本编辑器：
- WangEditor 富文本编辑器：
- Quill 富文本编辑器：
- Froala Editor 编辑器：
- Slate 编辑器：
- TinyMCE 富文本编辑器：
🙏至此，非常感谢阅读🙏
转载自:https://juejin.cn/post/7399564370474254386