原文地址：ueditor使用需修复的一些问题

1、调整图片按照上传顺序排序

修改:dialogs/image/image.js

718行后段位：

uploader.on('uploadSuccess', function (file, ret) {
    var $file = $('#' + file.id);
    try {
        var responseText = (ret._raw || ret),
            json = utils.str2json(responseText);
        if (json.state == 'SUCCESS') {
            // _this.imageList.push(json); 上传图片序
            _this.imageList[$file.index()] = json;
            $file.append('<span class="success"></span>');
        } else {
            $file.find('.error').text(json.state).show();
        }
    } catch (e) {
        $file.find('.error').text(lang.errorServerUpload).show();
    }
});

2、图片浮动无效

修改：ueditor.config.js，xss白名单修改，whitList:

img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'style'],//添加style

3、高亮打开、高亮代码换行

加载文件：

third-party/SyntaxHighlighter/shCoreDefault.css

third-party/SyntaxHighlighter/shCore.js

设置JS:

<script type="text/javascript"> 
    SyntaxHighlighter.highlight(); 
</script>

高亮后代码过长不会自动换行，不能自适应解决：

修改shCoreDefault.css

.syntaxhighlighter 添加：word-break:break-all; /* 修复换行 */

修改后：

.syntaxhighlighter { 
    width: 100% !important; 
    margin: .3em 0 .3em 0 !important; 
    position: relative !important; 
    overflow: auto !important; 
    background-color: #f5f5f5 !important; 
    border: 1px solid #ccc !important; 
    border-radius: 4px !important; 
    border-collapse: separate !important; 
    word-break:break-all; /* 修复换行 */ 
}

相继出现另一个问题，换行后左侧行号未跟随变化，出现错位，解决方案，添加JS：

<script type="text/javascript">
            $(function(){
                SyntaxHighlighter.highlight();
                $("table.syntaxhighlighter").each(function () {
                    if (!$(this).hasClass("nogutter")) {
                        var $gutter = $($(this).find(".gutter")[0]);
                        var $codeLines = $($(this).find(".code .line"));
                        $gutter.find(".line").each(function (i) {
                            $(this).height($($codeLines[i]).height());
                            $($codeLines[i]).height($($codeLines[i]).height());
                        });
                    }
                });
            });
</script>

而且，会和bootstrap发生冲突，导致以上修改无效，查找发现冲突样式为bootstrap的code中的white-space: nowrap;样式，只需项目中添加：

code{
    white-space: pre-wrap;
}

4、高亮主题

有需要留言哦~