小樱知识 > 生活常识前端富文本编辑器使用（富文本编辑器对比）

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

提问时间：2022-03-16 12:33:01来源：小樱知识网

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。

<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;}

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧

以上内容就是为大家推荐的前端富文本编辑器使用（富文本编辑器对比）最佳回答，如果还想搜索其他问题，请收藏本网站或点击搜索更多问题

内容来源于网络仅供参考