wangEditor富文本编辑器使用、编辑器内容转json格式

r囧r小猫 2021-09-28 12:34 1709阅读 0赞

wangEditor富文本编辑器好处：可以吧文本编辑器中的内容转成json格式，方便app、小程序使用

# [wangEditor官网][wangEditor] #

# [wangEditor官方文档][wangEditor 1] #

# [wangEditor官方下载][wangEditor 2] #

下载好之后找到wangEditor.js文件。然后引入进去。以下是我使用的一些功能

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>wangEditor demo</title>
    </head>
    <body>
    <button id="btn1">BOTTON</button>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</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.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'undo',  // 撤销
            'redo'  // 重复
        ];
        //上传图片接口
        editor.customConfig.uploadImgServer = '/api/upload/upload_images_desc.html';
        editor.create();
        editor.txt.html('<p>用 JS 设置的内容</p>');
        //点击按钮获取对应内容
        document.getElementById('btn1').addEventListener('click', function () {
            var json = editor.txt.getJSON()  // 获取 JSON 格式的内容
            var jsonStr = JSON.stringify(json)
            console.log(json)
            console.log(jsonStr)
            console.log(editor.txt.html()) //获取内容
        })
    
    </script>
    </body>
    </html>

上传图片接口的返回值格式

{
        // errno 即错误代码，0 表示没有错误。
        //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
        "errno": 0,
    
        // data 是一个数组，返回若干图片的线上地址
        "data": [
            "图片1地址",
            "图片2地址",
            "……"
        ]
    }

具体请参考刚放文档，不具体细说了！！！！哈哈哈哈

[wangEditor]: http://www.wangeditor.com/
[wangEditor 1]: https://www.kancloud.cn/wangfupeng/wangeditor3/335769
[wangEditor 2]: https://github.com/wangfupeng1988/wangEditor/releases