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

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.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="http://shimg.easyfang.com/220611/064A3C53-1.jpg"></script><!-- 引入 wangEditor.min.js --><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><!-- 引入 wangEditor.min.js --><script type="text/javascript">const E = window.wangEditorconst 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.wangEditorconst 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.wangEditorconst 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;}

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

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

推荐阅读

做菜时放酱油技巧酱油应该在什么时候放

劳动合同法51条规定有哪些内容

燃烧的基本条件

白斑病人的饮食注意事项

窗户玻璃热胀冷缩响声怎么解决玻璃缝隙如何填补

欧洲气候以什么气候类型为主

韭苔配茶干的做法（补气食谱）

车加油盖的开关在哪里车辆加油盖怎么打开

如何自制烟斗这里有教程哦

对闺蜜失望透了的句子说说心情

养黑色的猫有什么好处黑猫有哪些独特的个性

word文件图标变白 word文件图标变白打不开

天气说广东！新一轮气温“大转变”！广东下列地区的气温将升至40度

关于职业资格和职称的区别

腊肠犬出生了该怎么护理？

被爱人伤透了心的说说

运动手环作用有哪些

粉沙和细沙有区别吗

生日签名祝自己经典最新版生日写给自己的一句话

怎样做南瓜面条好吃做面条的步骤介绍

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

推荐阅读

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