npm i wangeditor --save
CDN链接 ： https://unpkg.com/wangeditor/dist/wangEditor.min.js
创建编译器
复制代码
1
2
3
4
5import E from 'wangeditor' const editor = new E('#div1') // 或者 const editor = new E( document.getElementById('div1') ) editor.create()
使用js外链引入
复制代码
1
2
3
4
5
6
7
8
9
10
11<div id="div1"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <script type="text/javascript" src="//unpkg.com/wangeditor/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>
参考网址： http://www.wangeditor.com/
设置编辑区域高度
编辑区域高度默认为 300px ，可通过以下方式修改。
复制代码
1
2
3
4
5
6const editor = new E ('#div1') // 设置编辑区域高度为 500px editor.config.height=500 // 注意，先配置 height ，再执行 create() editor.create()
菜单和编辑区域分离
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<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 src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script> <script> const E = window.wangEditor const editor = new E('#toolbar-container', '#text-container') // 传入两个元素 editor.create() </script> </body>
菜单和编辑区域其实就是两个单独的
，位置、尺寸都可以随便定义。
使用 textarea
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<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> <script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script> <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>
配置 z-index
编辑器 z-index 默认为 10000，可以自行调整。
1
2
3
4const editor = new E('#div1') editor.config.zIndex = 500 editor.create()
最后
以上就是阳光美女最近收集整理的关于富文本编译器wangeditor的全部内容，更多相关富文本编译器wangeditor内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复