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

下载好之后找到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>

<!-- 注意， 只需要引用 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.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富文本编辑器使用、编辑器内容转json格式

wangEditor官网

wangEditor官方文档

wangEditor官方下载

猜你喜欢