富文本编辑器对比前端富文本编辑器使用

文章插图
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。
事例
基本使用NPMnpm i wangeditor --save安装后几行代码即可创建一个编辑器：
<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div>import E from "wangeditor"const editor = new E("#div1")editor.create()CDN<scripttype="text/javascript"src="https://www.520longzhigu.com/uploads/allimg/220429/2101503300-1.jpg"></script><script type="text/javascript">const E = window.wangEditorconst editor = new E("#div1")// 或者 const editor = new E(document.getElementById('div1'))editor.create()</script>设置编辑区域的高度编辑区域高度默认为 300px ，可通过以下方式修改。
const editor = new E('#div1')// 设置编辑区域高度为 500pxeditor.config.height = 500// 注意，先配置 height ，再执行 create()editor.create()菜单和编辑区域分离如果你想要像知乎专栏、简书、石墨、网易云笔记这些编辑页面一样，将编辑区域和菜单分离，也可以实现。
这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单fixed、编辑器区域高度自动增加等。
<head><style>.toolbar {border: 1px solid #ccc;}.text {border: 1px solid #ccc;min-height: 400px;}</style></head><body><p>container 和 toolbar 分开</p><div><div id="toolbar-container" class="toolbar"></div><p>------ 我是分割线 ------</p><div id="text-container" class="text"></div></div><script>const E = window.wangEditorconst editor = new E('#toolbar-container', '#text-container') // 传入两个元素editor.create()</script></body>从上面代码可以看出，菜单和编辑区域其实就是两个单独的 <div> ，位置、尺寸都可以随便定义。
使用 textareawangEditor 从 v3 版本开始不支持 textarea ，但是可以通过 onchange 来实现 textarea 中提交富文本内容。
<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div><textarea id="text1" style="width:100%; height:200px;"></textarea><script src="https://www.520longzhigu.com/uploads/allimg/220429/2101501034-2.jpg"></script><script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')const $text1 = $('#text1')editor.config.onchange = function (html) {// 第二步，监控变化，同步更新到 textarea$text1.val(html)}editor.create()// 第一步，初始化 textarea 的值$text1.val(editor.txt.html())</script>一个页面多个编辑器wangEditor 支持一个页面创建多个编辑器。
<head><style type="text/css">.toolbar {background-color: #f1f1f1;border: 1px solid #ccc;}.text {border: 1px solid #ccc;height: 200px;}</style></head><body><div id="div1" class="toolbar"></div><div style="padding: 5px 0; color: #ccc">中间隔离带</div><div id="div2" class="text"><p>第一个 demo（菜单和编辑器区域分开）</p></div><div id="div3"><p>第二个 demo（常规）</p></div><script type="text/javascript">const E = window.wangEditorconst editor1 = new E('#div1', '#div2')editor1.create()const editor2 = new E('#div3')editor2.create()</script></body>设置内容以下方式中，如果条件允许，尽量使用第一种方式，效率最高。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

富文本编辑器对比 前端富文本编辑器使用

富文本编辑器对比前端富文本编辑器使用