search

jm-team / Bugs

所有踩过的坑都来这里填
1 stars 0 forks source link

在IE8下innerHTML赋值为实体编码时结果异常，导致kindeditor无法显示图片 #15

Open ICELI opened 7 years ago

ICELI commented 7 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE8</title>

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link href="http://center.jai.com/static/dep/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css">
    <link href="http://center.jai.com/static/css/kindeditor.css" type="text/css" rel="stylesheet"/>
    <script src="http://center.jai.com/static/dep/uploadify/jquery.uploadify.min.js"></script>
    <!--<script src="http://center.jai.com/static/dep/kindeditor/kindeditor-all.js"></script>-->
    <script src="http://kindeditor.net/ke4/kindeditor-all-min.js?t=20160331.js"></script>

</head>
<body>
<textarea style="width:100%; height: 300px" id="descripe"></textarea>
<script>
    var a = '&lt;img&nbsp;src=&quot;http://image.jm.com/newupload/center.jai.com/editor/2017/02/17/15/59/41/20170217155941_170.jpg&quot;&nbsp;alt=&quot;&quot;&nbsp;/&gt;';
//    var a = '<img src="http://image.jm.com/newupload/center.jai.com/editor/2017/02/17/15/59/41/20170217155941_170.jpg" alt="" />';
    var b = escape2Html(a);
    $('#descripe').val(b);
    KindEditor.ready(function (K) {
        window.editor = K.create('#descripe', {});
    });
    function escape2Html(str) {
        var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
</script>
</body>
</html>
ICELI commented 7 years ago

解决办法： 暂将实体编码通过escape2Html转义为html代码，并用val()方法赋值，切记不可用html()

ICELI commented 7 years ago 
<textarea style="width:100%; height: 300px" id="descripe">&lt;img&nbsp;src=&quot;http://image.jm.com/newupload/center.jai.com/editor/2017/02/17/15/59/41/20170217155941_170.jpg&quot;&nbsp;alt=&quot;&quot;&nbsp;/&gt;</textarea>

异常结果：

<IMG SRC="HTTP: editor    alt="" 20170217155941_170.jpg? 41 59 15 17 02 2017 center.jai.com newupload image.jm.com />

对比其他正常项目代码发现，只有空格`没有转为 `

将测试代码中&nbsp; 替换为空格 后，ie8下对innerHTML赋值实体编码结果正常，问题解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE8 innerHTML</title>

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link href="http://center.jai.com/static/dep/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css">
    <link href="http://center.jai.com/static/css/kindeditor.css" type="text/css" rel="stylesheet"/>
    <script src="http://center.jai.com/static/dep/uploadify/jquery.uploadify.min.js"></script>
    <script src="http://center.jai.com/static/dep/kindeditor/kindeditor-all.js"></script>

</head>
<body>

<textarea style="width:100%; height: 300px" id="descripe">&lt;img  src=&quot;http://image.jm.com/newupload/center.jai.com/editor/2017/02/17/15/59/41/20170217155941_170.jpg&quot;  alt=&quot;&quot;  /&gt;</textarea>
<textarea style="width:100%; height: 300px" id="descripe_error">&lt;img&nbsp;src=&quot;http://image.jm.com/newupload/center.jai.com/editor/2017/02/17/15/59/41/20170217155941_170.jpg&quot;&nbsp;alt=&quot;&quot;&nbsp;/&gt;</textarea>
<script>

    KindEditor.ready(function (K) {
        window.editor = K.create('#descripe', {});
        window.editorError = K.create('#descripe_error', {});
    });

</script>
</body>
</html>
ICELI commented 7 years ago

建议：

  1. 后台保存时无需转义空格
  2. 将转义后的&nbsp;替换为空格后输出