wangEditor3富文本，使用base64编码进行数据提交和回显

描述

这里给出wangEditor3最简单的例子，具体见官方文档https://www.kancloud.cn/wangfupeng/wangeditor3/332599

富文本内容的传输需要进行编码，否则解析很难通过（如url会进行转义）

实施

1、html

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">公告描述</label>
    <div id="editor">

    </div>
    <textarea id="text1" name="richTextContent" display: none"></textarea>

</div>

<script type="text/javascript" src="wangEditor.min.js"></script>

2、自定义js -- 使用base64保存图片

var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
var $text1 = $('#text1');
editor.customConfig.onchange = function (html) {
    // 监控变化，同步更新到 textarea
    $text1.val(Base64.encode(html));
};
editor.create();

3、base64编码的js方法

var Base64 = {
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    encode: function(e) {
        var t = "";
        var n, r, i, s, o, u, a;
        var f = 0;
        e = Base64._utf8_encode(e);
        while (f < e.length) {
            n = e.charCodeAt(f++);
            r = e.charCodeAt(f++);
            i = e.charCodeAt(f++);
            s = n >> 2;
            o = (n & 3) << 4 | r >> 4;
            u = (r & 15) << 2 | i >> 6;
            a = i & 63;
            if (isNaN(r)) {
                u = a = 64
            } else if (isNaN(i)) {
                a = 64
            }
            t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
        }
        return t
    },
    decode: function(e) {
        var t = "";
        var n, r, i;
        var s, o, u, a;
        var f = 0;
        e = e.replace(/[^A-Za-z0-9+/=]/g, "");
        while (f < e.length) {
            s = this._keyStr.indexOf(e.charAt(f++));
            o = this._keyStr.indexOf(e.charAt(f++));
            u = this._keyStr.indexOf(e.charAt(f++));
            a = this._keyStr.indexOf(e.charAt(f++));
            n = s << 2 | o >> 4;
            r = (o & 15) << 4 | u >> 2;
            i = (u & 3) << 6 | a;
            t = t + String.fromCharCode(n);
            if (u != 64) {
                t = t + String.fromCharCode(r)
            }
            if (a != 64) {
                t = t + String.fromCharCode(i)
            }
        }
        t = Base64._utf8_decode(t);
        return t
    },
    _utf8_encode: function(e) {
        e = e.replace(/rn/g, "n");
        var t = "";
        for (var n = 0; n < e.length; n++) {
            var r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r)
            } else if (r > 127 && r < 2048) {
                t += String.fromCharCode(r >> 6 | 192);
                t += String.fromCharCode(r & 63 | 128)
            } else {
                t += String.fromCharCode(r >> 12 | 224);
                t += String.fromCharCode(r >> 6 & 63 | 128);
                t += String.fromCharCode(r & 63 | 128)
            }
        }
        return t
    },
    _utf8_decode: function(e) {
        var t = "";
        var n = 0;
        var r = c1 = c2 = 0;
        while (n < e.length) {
            r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r);
                n++
            } else if (r > 191 && r < 224) {
                c2 = e.charCodeAt(n + 1);
                t += String.fromCharCode((r & 31) << 6 | c2 & 63);
                n += 2
            } else {
                c2 = e.charCodeAt(n + 1);
                c3 = e.charCodeAt(n + 2);
                t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
                n += 3
            }
        }
        return t
    }
}

4、富文本提交

<textarea id="text1" name="richTextContent" display: none"></textarea>

直接将textarea 中的数据获取并存入数据库即可

5、富文本回显

从数据库获取数据之后调用decode方法解码，然后填充到富文本即可。

如果富文本内容为空的话，直接解码会出错，请自行判断。

editor.txt.html(Base64.decode(richContent));

注意

base64保存图片出现的问题：

1、图片太大时回显不出来，或者回显的内容不全。（未解决）

 

改为图片上传

js：

var E = window.wangEditor;
// 添加的富文本
var editor = new E('#editor');
//editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
editor.customConfig.uploadImgServer = "...";
// 添加头
editor.customConfig.uploadImgHeaders = {
    "Authorization": getCookie()//自定义
};
// 上传时间 1000=1秒
editor.customConfig.uploadImgTimeout = 60000;
// 上传监听
editor.customConfig.uploadImgHooks = {
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        alert(result)
    },
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        debugger
        var data = outData(result,"data");
        var ids = data.fileName;
        var arr = ids.split(",");

        for (var i = 0; i < arr.length; i++) {
            var fileId = arr[i];
            var url = ...+"?fileId="+fileId;
            insertImg(url);

        }

        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
}
// 传递参数
editor.customConfig.uploadImgParams = {
    // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
    // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
    "loginNo":ajaxToJS().ROOT.BODY.OPR_INFO.LOGIN_NO //自定义
};
// 自定义文件名，对应表单中的name属性值
editor.customConfig.uploadFileName = 'file';//自定义

var $text1 = $('#text1');
editor.customConfig.onchange = function (html) {
    // 监控变化，同步更新到 textarea
    $text1.val(Base64.encode(html));
};
editor.create();

接口：

普通的下载接口即可

响应格式response.setContentType("image/jpeg");

 

注意

图片很多时，回显会出现有些图片加载不出来。

但目前懒加载还没实现，后续加上。

——————————————————————————————————————————

懒加载已实现https://mp.csdn.net/postedit/96972588