wangEditor的了解之路

Posted 2021-01-26 xiangxiang521

1.下载地址https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releases

把这个文件下载好了，用哪个引入哪个

2.创建一个文本编辑器

<script type="text/javascript">
        var E = window.wangEditor
        var editor1 = new E(‘#div1‘)  // 两个参数也可以传入 elem 对象，class 选择器
        editor1.create()
    </script>

　　

<div id="div1" class="text"> 
        <p>请输入内容</p>
    </div>

3.此时会看到文本编辑器已经显示出来了

4.注意路径js路径 如果不正确就会显示不出来

5.给编辑器显示区写东西

 editor1.txt.html(‘<p>用 JS 设置的内容</p>‘)

6.给编辑器清空东西

editor.txt.clear()

7.获取内容

<button id="btn1">获取html</button>
    <button id="btn2">获取text</button>

　　

document.getElementById(‘btn1‘).addEventListener(‘click‘, function () {
        // 读取 html
        alert(editor1.txt.html())
        }, false)
        document.getElementById(‘btn2‘).addEventListener(‘click‘, function () {
        // 读取 text
        alert(editor1.txt.text())
        }, false)