Original address: Some problems need to be fixed when using ueditor

1. Adjust the order of pictures to be uploaded

Modify: dialogs/image/image.js

The last segment of line 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); upload image sequence
            _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. Invalid picture float

 

Modify: ueeditor.config.js, xss whitelist modify, whitList:

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

3. Highlight on, highlight code wrapping

 

Load file:

third-party/SyntaxHighlighter/shCoreDefault.css

third-party/SyntaxHighlighter/shCore.js

Set JS:

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

If the code is too long after highlighting, it will not wrap automatically and cannot be solved adaptively:

Modify shCoreDefault.css

. syntax highlighter add: word break: break all; / * fix line break*/

After amendment:

.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; /* Repair newline */ 
}

 

Another problem occurred one after another. After line breaking, the line number on the left side did not follow the change, resulting in dislocation. Solution: add 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>

 

In addition, there will be conflicts with bootstrap, causing the above modifications to be invalid. After searching, it is found that the conflict style is white space: nowrap; in the code of bootstrap, just add:

code{
    white-space: pre-wrap;
}

4. Highlight theme

Need to leave a message~