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、高亮主题

需要的留言哦~

5、取消自动保存无效

1.修改ueditor.all.js，在'contentchange': function () {函数的第一行添加代码：

'contentchange': function () {
    if (!me.getOpt('enableAutoSave')) {
        return;
    }

2.修改ueditor.config.js，enableAutoSave的注释去掉并设置成false，saveInterval的注释也去掉设置成0；

6、editor.execCommand('inserthtml', inhtml)执行inserthtml，会自动删除插入位置后面<br/>标签及选中<br/>后面数据导致重复问题

搜索UE.commands['inserthtml'] = {}部分注释掉，ueditor.all.js文件中的代码：

//选中文字插入删除后面br
if(tmpNode && domUtils.isBr(tmpNode)){
    range.setEndAfter(tmpNode);
}
//点击位置插入删除后面br
if(nextNode && domUtils.isBr(nextNode)){
    domUtils.remove(nextNode)
}
//<br/>后面或<br/>空格中间数据选中后，出现重复部分内容的现象，<br/>导致位置不正确，注释即可：
//range.txtToElmBoundary();