wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。
事例
npm i wangeditor --save
安装后几行代码即可创建一个编辑器:
<div id="div1"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div>import E from "wangeditor"const editor = new E("#div1")editor.create()
<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')// 设置编辑区域高度为 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> <!-- 引入 wangEditor.min.js --> <script> const E = window.wangEditor const editor = new E('#toolbar-container', '#text-container') // 传入两个元素 editor.create() </script></body>
从上面代码可以看出,菜单和编辑区域其实就是两个单独的 <div>,位置、尺寸都可以随便定义。
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>
以下方式中,如果条件允许,尽量使用第一种方式,效率最高。
直接将内容写到要创建编辑器的 <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>
创建编辑器之后,使用 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>
使用 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;}
觉得效果不错的请帮忙加个关注点个赞,每天分享前端实用开发技巧
本文由善恶资源网于2021-08-21发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/2258.html
上一篇高鹏圈公众号SEO矩阵号群,实操20天纯收益25000+,普通人都能做
下一篇数据哥千川落地课精华版:服饰鞋帽箱包,美妆教育茶,珠宝文玩等千川搭建
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台