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

最新推荐文章于 2024-06-26 17:14:46 发布

K先生的守护

最新推荐文章于 2024-06-26 17:14:46 发布

阅读量5.8k

点赞数 3

分类专栏： web前端 php网站文章标签： wangEditor3 php 富文本编辑器

本文链接：https://blog.csdn.net/baiyecode/article/details/81168185

版权

php网站同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

web前端

11 篇文章 2 订阅

订阅专栏

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这两个文件拿出来就行了。

<!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”隐藏起来。这样做也是为了实际开发需要。

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

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

<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>

最后附上一张wangEditor3编辑器的图，个人感觉还挺不错的。有兴趣的可以试试

K先生的守护

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
wangEditor3富文本编辑器的简单使用

wangEditor是基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。博主个人认为这款富文本编辑器很好用。简单、上手快、功能还可以。一、wangEditor的下载wangEditor官网：http://www.wangeditor.com/ 官方在线开发文档：https://www.kancloud.cn/wangfupeng/wangedi...
复制链接

扫一扫

专栏目录