How to get line wrapping working in codemirror (source highlight) plugin for CKEditor (Sourcebutton)

Sven Schaetzl asked on January 19, 2017 14:30

Hello, we are using Kentico 9.0.47 and have enabled codemirror-Plugin for CKEditor as outlined here:

Unfortunately we don't get the linewrapping enabled which makes editing of HTML-Text (even with codemirror) a real pain. Because all HTML-Text is often in one line and we have to scroll horizontally a lot to find the place to make a change.

Linewrapping is even forced inside of this file (at all occurences):

"...\CMS\CMSAdminControls\CKeditor\plugins\codemirror\plugin.js"

line 28: lineWrapping: true,

line 79: lineWrapping: true,

line 707: lineWrapping: true,

Hopefully somebody got this to work already and can tell me about what to do to get this running!

Bye Sven

Recent Answers

Trevor Fayas answered on January 19, 2017 15:10

Are there any console errors (javascript errors) that may reveal what is wrong?

It may word wrap using a special tag perhaps, which you may need to inspect and find that "word wrap" tag and adjust it's css if it's being overridden to a point where it's not wrapping.

Never used the plugin, but those are my guesses!

0 votesVote for this answer Mark as a Correct answer

Palo Stefek answered on June 18, 2017 21:59 (last edited on June 18, 2017 22:08)

Simply change

    .cke_reset_all .CodeMirror-scroll * {
    white-space: pre;
}

in /CKEditor/plugins/codemirror/css/codemirror.min.css to

    .cke_reset_all .CodeMirror-scroll * {
    white-space: pre-wrap;
}

And you may also want to remove ckeditor global CSS reset to make custom fonts in CodeMirror work.

1 votesVote for this answer Mark as a Correct answer

Sven Schaetzl answered on August 24, 2017 09:59

Amazing, that did the trick! Thank you very much!

0 votesVote for this answer Mark as a Correct answer