K先生的守护
K先生的守护

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


<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demotitle>
head>
<body>

    <div id="editor">
        <p>欢迎使用 <b>wangEditorb> 富文本编辑器p>
    div>

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

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编辑器的图，个人感觉还挺不错的。有兴趣的可以试试
wangEditor3富文本编辑器的简单使用_第1张图片

你可能感兴趣的:(php网站,web前端)