空夜

富文本编辑器之wangEditor
富文本编辑器想必大家都见过,无论是发表博客还是论坛发帖、空间发表说说,这些软件或网站都会用到富文本编辑器。那么,作...
扫描右侧二维码阅读全文
06
2018/12

富文本编辑器之wangEditor

富文本编辑器想必大家都见过,无论是发表博客还是论坛发帖、空间发表说说,这些软件或网站都会用到富文本编辑器。那么,作为programmer,我们如何给自己的代码加上一个富文本编辑器呢?实际的需求就是textarea这个标签只能够传递文本,而无法传递一些诸如图片、表格之类的复杂元素,这个时候使用富文本编辑器就很有必要了。
今天介绍一下我最近使用的一款轻便的富文本编辑器——wangEditor。
官网地址:wangEditor官网-下载
手册地址:wangEditor3使用手册
下面介绍一下wangEditor3的使用方法:

一、下载与引入

从官网上的下载地址下载压缩包后,解压打开会看见如下目录:
wangEditor目录

将其中的release目录下的文件复制到自己项目的静态资源目录下,如我这里:

wangEditorDemo

然后使用如下代码引用即可:

<script type="text/javascript" th:src="@{/wangEditor/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{/wangEditor/wangEditor.js}"></script>

  注:以上是springboot中thymeleaf模板下的写法,此外也可以使用CDN引入,关于这一点在手册中都有说明。

二、创建编辑器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    <button type="button" style="width:150px;height:30px;" onclick="submitEditor()">提交</button>

    <script type="text/javascript" th:src="@{/wangEditor/wangEditor.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>
    
    <script>
    function submitEditor(){
        //使用editor.txt.html()获取编辑器里的HTML,使用editor.txt.text()获取编辑器里的文本——即删去HTML标签的纯文本
        console.log("html : "+editor.txt.html());
        console.log("text :"+editor.txt.text());
    }
    </script>
</body>
</html>

效果图:
wangEditor

四、保存编辑器内容至服务器

上面我们成功创建了编辑器,可以编辑富文本,但怎么将编辑器里的内容保存到服务器呢,查看wangEditor官方手册可以找到:editor.txt.html()editor.txt.text()用于获取编辑器内容。

插入图片链接,点击页面上的提交按钮,可以看到如下情景:

观察下方控制台里面的输出可以看到submitEditor()方法被触发后的效果。


有关wangEditor的部分就介绍到这里,关于菜单配置、图片上传等内容请移步wangEditor3使用手册


交流

如果大家有兴趣一起学习技术,一起交流讨论,可以加入QQ群:701365388,目前基本没什么人气啦(ฅ´ω`ฅ),不过有问题群主会努力解答的。嘿嘿٩(ˊᗜˋ*)و。

Contact Me

If you have any problem or ideas about my blogs or projects, you can contact me using any ways in the following list →_→:

Last modification:December 6th, 2018 at 09:31 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment