Some problems need to be fixed when using ueditor

Keywords: JSON Javascript

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 = $('#' +;
    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 {
    } catch (e) {

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:



Set JS:

<script type="text/javascript"> 

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">
                $("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) {


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:

    white-space: pre-wrap;

4. Highlight theme

Need to leave a message~

Posted by batman on Fri, 07 Feb 2020 10:13:12 -0800