前端富文本编辑器使用（富文本编辑器对比）
程序员文章站
2023-11-24 21:46:34
wangeditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。事例基本使用npmnpm i wangeditor --save安装后几行代码即可创建一个编辑器：
wangeditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。
事例
基本使用
npm
npm i wangeditor --save
安装后几行代码即可创建一个编辑器：
<div id="div1">
<p>欢迎使用 <b>wangeditor</b> 富文本编辑器</p>
</div>import e from "wangeditor"
const editor = new e("#div1")
editor.create()cdn
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangeditor.min.js"
></script>
<script type="text/javascript">
const e = window.wangeditor
const editor = new e("#div1")
// 或者 const editor = new e(document.getelementbyid('div1'))
editor.create()
</script>设置编辑区域的高度
编辑区域高度默认为 300px ，可通过以下方式修改。
const editor = new e('#div1')
// 设置编辑区域高度为 500px
editor.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>
<!-- 引入 wangeditor.min.js -->
<script>
const e = window.wangeditor
const editor = new e('#toolbar-container', '#text-container') // 传入两个元素
editor.create()
</script>
</body>
从上面代码可以看出，菜单和编辑区域其实就是两个单独的 <div>，位置、尺寸都可以随便定义。
使用 textarea
wangeditor 从 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://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入 wangeditor.min.js -->
<script type="text/javascript">
const e = window.wangeditor
const 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>
<!-- 引入 wangeditor.min.js -->
<script type="text/javascript">
const e = window.wangeditor
const editor1 = new e('#div1', '#div2')
editor1.create()
const editor2 = new e('#div3')
editor2.create()
</script>
</body>设置内容
以下方式中，如果条件允许，尽量使用第一种方式，效率最高。
html 初始化内容
直接将内容写到要创建编辑器的 <div> 标签中。
<div id="div1">
<p>初始化的内容</p>
<p>初始化的内容</p>
</div>
<!-- 引入 wangeditor.min.js -->
<script type="text/javascript">
const e = window.wangeditor
const editor = new e('#div1')
editor.create()
</script>
js 设置内容
创建编辑器之后，使用 editor.txt.html(…) 设置编辑器内容。
<div id="div1">
</div>
<!-- 引入 wangeditor.min.js -->
<script type="text/javascript">
const e = window.wangeditor
const editor = new e('#div1')
editor.create()
editor.txt.html('<p>用 js 设置的内容</p>') // 重新设置编辑器内容
</script>获取 html
使用 editor.txt.html() 获取 html 。
需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的 <table> <code> <blockquote> 等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考。
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
pre code {
display: block;
}
/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧
上一篇： 小设计大用处 笔记本接口知识