概述
npm i wangeditor --save
CDN链接 ： https://unpkg.com/wangeditor/dist/wangEditor.min.js
创建编译器
import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()
使用js外链引入
<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 ，可通过以下方式修改。
const editor = new E ('#div1')
// 设置编辑区域高度为 500px
editor.config.height=500
// 注意，先配置 height ，再执行 create()
editor.create()
菜单和编辑区域分离
<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
<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，可以自行调整。
const editor = new E('#div1')
editor.config.zIndex = 500
editor.create()
最后
以上就是阳光美女为你收集整理的富文本编译器wangeditor的全部内容，希望文章能够帮你解决富文本编译器wangeditor所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复