wangEditor3富文本编辑器的简单使用

95 阅读 0 评论 63 点赞

我是靠谱客的博主阳光戒指，这篇文章主要介绍wangEditor3富文本编辑器的简单使用，现在分享给大家，希望可以做个参考。

wangEditor是基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。博主个人认为这款富文本编辑器很好用。简单、上手快、功能还可以。

一、wangEditor的下载

wangEditor官网：http://www.wangeditor.com/
官方在线开发文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
我们可以先到官网下载wangEditor

二、创建wangEditor编辑器

我们在官网下载wangEditor的压缩包之后，我们只需要把 release/目录下的wangEditor.js或者wangEditor.min.js这两个文件拿出来就行了。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
<!-- 下面的div就是wangEditor 编辑器的位置 -->
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

三、wangEditor3编辑器内容的提交

wangEditor3编辑器没有value属性值，无法直接提交表单，所以编辑器内容的提交需要和 input 输入框来结合使用。
我们在wangEditor编辑器的上面添加一个 input 输入框，并且将其type设置为“hidden”隐藏起来。这样做也是为了实际开发需要。

复制代码

1
<input type="hidden" name="content" id="editor_txt">

下面是js代码，大致意思就是我们用wangEditor3提供方法的获取编辑器内容后，把值再赋给input，这样就可以正常提交表单了。

复制代码

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="js/wangEditor.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        editor.create()
        document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        var editor_txt=editor.txt.html();
        document.getElementById('editor_txt').value=editor_txt;
    }, false)       
    </script>