wangEditor入门使用（基础案例）

最新推荐文章于 2024-09-25 18:04:30 发布

妖怪s

最新推荐文章于 2024-09-25 18:04:30 发布

阅读量2k

点赞数

分类专栏： wnagEditor 富文本编辑器

本文链接：https://blog.csdn.net/yaoguaia/article/details/107869050

版权

wnagEditor 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

富文本编辑器

1 篇文章 0 订阅

订阅专栏

什么是富文本编辑器？

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器

概念对比: 文本文档 =======》world

常用的富文本编辑器：https://blog.csdn.net/davidhzq/article/details/100842866

wnagEditor 富文本编辑器

官网：http://www.wangeditor.com/

简介：轻量级 web 富文本编辑器，配置方便，使用简单，开源免费。支持 IE10+ 浏览器。

获取wnagEditor

下载本地

    <!-- 引入依赖文件 -->
    <!-- css -->
    <link rel="stylesheet" href="/static/assets/plugins/wangEditor/wangEditor.min.css" />
    <!-- JavaScript -->
    <script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>

在线链接

    <!-- 官网链接 -->
    <!-- 只需要引用 JS，无需引用任何 CSS ！！！ -->
    <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>

启用wangEditor

只需要一个 div 元素，用 JavaScript 代码启用即可

    <div id="div"></div>

    var E = window.wangEditor
    var editor2 = new E('#div')
    // 或者 var editor = new E( document.getElementById('div') )
    editor2.create()//创建

一个页面可创建多个编辑器

    <div id="div1"></div>
    <div id="div2"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <script>
        var E = window.wangEditor
        //第一个编辑器 
        var editor1 = new E('#div1')
        editor1.create()
        //第二个编辑器 
        var editor2 = new E('#div2')
        editor2.create()
    </script>

菜单栏和编辑栏区域可分离

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div3{
                border: 1px solid #666;
            }
            #div4 {
                /* height: 300px; */
                min-height: 300px;
                /*可使用 min-height 实现编辑区域自动增加高度*/
                background-color: antiquewhite;
            }
            .item{
                padding: 20px 0;
                text-align: center;
                background-color: rgba(0, 0, 0, .3);
            }
        </style>
    </head>
    <body>
        <div id="div3"></div>
        <p class="item">就这吧，分就分吧</p>
        <div id="div4"></div>
        <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
        <script>
            var E = window.wangEditor
            var editor2 = new E('#div3','#div4')
            editor2.create()
        </script>
    </body>

</html>

设置编辑栏初始内容

html方法

    <div id="div1">
        <p>初始化的内容</p>
    </div>

    <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1')
        editor.create()
    </script>

js方法

    <div id="div1"></div>

    <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1')
        editor.create()
        // 设置内容
        editor.txt.html('<p>用 JS 设置的内容</p>')
        // 追加内容 
        editor.txt.append('<p>用 JS 追加的内容</p>')
        // 清空内容  前提是编辑栏里有内容
        editor.txt.clear('<p>用 JS 清空内容</p>')
        // 都可以识别标签
    </script>

获取编辑栏的内容

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <p></p>
    </div>
    <button id="but1">点击获取html</button>
    <button id="but2">点击获取text</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script>
        var E = window.wangEditor
        var editor1 = new E('#div1')
        editor1.create()
        // 获取html
        $('#but1').on('click',function(){
            alert(editor1.txt.html())
        })
        // 获取text
        $('#but2').on('click',function(){
            alert(editor1.txt.text())
        })
    </script>
</body>

</html>

配置菜单栏、配置颜色、配置表情、配置字体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div1"></div>
    <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script>
        var E = window.wangEditor
        var editor1 = new E('#div1')
        //配置菜单栏
        // 如果菜单栏宽度不够，建议精简菜单项。
        editor1.customConfig.menus = [
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            'emoticon', // 表情
            'image', // 插入图片
            'table', // 表格
            'video', // 插入视频
            'code', // 插入代码
            'undo', // 撤销
            'redo' // 重复
        ]
        // 配置颜色
        editor1.customConfig.colors = [
            '#000000',
            '#eeece0',
            '#1c487f',
            '#4d80bf',
            '#c24f4a',
            '#8baa4a',
            '#7b5ba1',
            '#46acc8',
            '#f9963b',
            '#ffffff',
            "#e5e5e5"
            // 可自行添加
        ]
        // 配置表情
        // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
        editor1.customConfig.emotions = [{
                // tab 的标题
                title: '默认',
                // type -> 'emoji' / 'image'
                type: 'image',
                // content -> 数组
                content: [{
                        alt: '[坏笑]',
                        src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
                    },
                    {
                        alt: '[舔屏]',
                        src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
                    }
                ]
            },
            {
                // tab 的标题
                title: 'emoji',
                // type -> 'emoji' / 'image'
                type: 'emoji',
                // content -> 数组
                content: ['😀', '😃', '😄', '😁', '😆']
            }
            // 可自行添加
        ]
        // 配置字体
        editor1.customConfig.fontNames = [
            '宋体',
            '微软雅黑',
            'Arial',
            'Tahoma',
            'Verdana'
            // 可自行添加
        ]

        editor1.create()
    </script>
</body>

</html>

使用textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="div1"></div>
    <textarea name="" id="txt" style="width: 300px;height: 200px;"></textarea>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script>
        var E = window.wangEditor
        var editor1 = new E('#div1')
        // 使用textarea
        var $text1 = $('#txt')
        editor1.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor1.create()
        // 初始化 textarea 的值
        $text1.val(editor1.txt.html())
    </script>
</body>

</html>

eg：就是实时监控输入的内容

开启本地图片tab、关闭网络图片tab

    var E = window.wangEditor
    var editor1 = new E('#div1')
    
    //开启“本地图片”tab
    editor1.customConfig.uploadImgShowBase64 = true
     // 隐藏“网络图片”tab
    editor1.customConfig.showLinkImg = false

    editor1.create()