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~