完美解决ueditor html、代码片段保存后不能正常回显问题

        最近在素材溜溜文章板块集成百度ueditor富文本编辑器时，入库保存后是HTML、代码内容，但是在回显的时候却不能正常显示，很是郁闷。在百度了一圈后都没有很详细的解决方案。费劲一些周章后终于解决了，下面记录一下，希望帮助他遇见同类问题的朋友。

    原因：

    入库是HTML、代码片段内容，回显时内容中的特殊字符（如‘<’）被转义了

    下面看看怎么解决：

   1、入库时前端进行base64转码后传入后端：从IE10+浏览器开始，所有浏览器就原生提供了Base64编码、解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。

方法名就是 atob 和 btoa ，具体语法如下：

window.btoa('china is so nb') // 编码
"Y2hpbmEgaXMgc28gbmI="
window.atob("Y2hpbmEgaXMgc28gbmI=") // 解码
"china is so nb"

但是IE9不支持这么做，为了支持更多的浏览器，我们采用的是自带类包的方式实现，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)
        }
        retun 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);
        retun t
    },
    _utf8_encode: function(e) {
        e = e.replace(/n/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)
            }
        }
        retun 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
            }
        }
        retun t
    }
}

获取到编辑器内容后转码：

1 2	var content = ue.getContent(); content = Base64.encode(content);

 2、服务端对内容进行base64解码后保存

1 2 3

// 解码 byte[] base64decodedBytes = Base64.getDecoder().decode(article.getContent()); String content =  new String(base64decodedBytes, "utf-8");

 3、编辑时服务端取到内容后同样进行转码

1	Base64.getEncoder().encodeToString('你的内容'.getBytes("utf-8"))

 4、客户端获取到数据时进行base64解码，然后回显正常

查看原文请进：http://www.sucai66.com/article/detail/20200610/18.html