Prevent CKEditor from formatting code in source mode

Question

How can you prevent any automatic formatting when in CKEditor when viewing in source mode?

I like to edit HTML source code directly instead of using the WYSIWYG interface, but whenever I write new lines, or layout tags how I would indent them, it all gets formatted when I switch to WYSIWYG mode and then back to source mode again.

I stumbled upon a CKEditor dev ticket, Preserve formatting of ProtectedSource elements, that alluded to a setting which may have existed once upon a time which would be exactly what I'm after. I just want to know how I can completely turn off all automatic formatting when editing in source mode.

I came up with a solution I thought would be foolproof (albeit not a pleasant one).

I learned about the protectedSource setting, so I thought, well maybe I can just use that and create an HTML comment tag before all my HTML and another after it and then push a regular expression finding the comment tags into the protectedSource array, but even that (believe it or not) doesn't work.

I've tried my expression straight up in the browser outside of CKEditor and it is working, but CKEditor doesn't protect the code as expected (which I suspect is a bug involving comment tags, since I can get it to work with other strings). In case you are wondering, this is what I had hoped would work as a work-around, but doesn't:

config.protectedSource.push( /<!-- src -->[\s\S]*<!-- end src-->/gi );

and what I planned on doing (for what appears to be the lack of a setting to disable formatting in source mode) was to nest all my HTML within the commented tags like this:

<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->

I'd love to hear if anyone has any suggestions for this scenario, or knows of a setting which I have described, or even if someone can just fill me in as to why I can't get protectedSource to work properly with two comment tags.

I really think it's gotta be a bug because I can get so many other expressions to work fine, and I can even protect HTML within the area of a single comment tag, but I simply cannot get HTML within two different comment tags to stay untouched.

Lev: hey, this question is quite old ... do you have any solution? — , Mar 30 '11 at 08:38
Nope, sadly I didn't find the solution I was looking for since I was informed by a CKEditor dev that comments are stripped out on their end (which is why my best-thought solution still failed). What I ended up doing instead was adding a selection menu above the text field where the user could toggle between "rich text" and "plain text" editing, and I'd just kill the editor if they went into plain-text mode. Not a very pleasant "solution" but it at least avoids the issues CKEditor was presenting. >_ — SikoSoft, Apr 17 '11 at 15:25
Probably this ticket applies to your issue: http://dev.fckeditor.net/ticket/3260 — piotr.d, Jun 16 '10 at 08:21
I'm currently trying to stop ckeditor from formatting my source code. I find it annoying and useless. Why would I want to write in source mode only to have my source modified? I hate apps / plugins that assume you don't know what you are doing and try to do everything for you!!!! — willdanceforfun, May 24 '12 at 01:12
I'm assuming that there continues to be no native CKEditor solution to this issue. From what I could gather from the ckeditor support site, the short answer is that CKEditor will always reformat what it regards as "invalid", or more specifically, "invalid to the wysiwyg editor", HTML. I understand that the wysiwyg piece won't work otherwise, so I am at peace with this. If you want unmodified html, you'll need to use a textarea. If this is incorrect, please let me know, but I believe it to be correct. — MrBoJangles, Jul 01 '13 at 16:47
Perhaps the browser is interpreting the comment in the Javascript as a comment, and ignoring the code in the regular expression between the first opening comment and the last ending comment? CKEditor would not even see the full function parameter. View the source in a browser with syntax highlighting like Chrome to see if it's interpreting the comment. Try to create a new tag, like `` (which is a real HTML tag), and protect that instead. Or try to string together multiple strings to form a comment like `"<!" + "-- src" + ...`. — Chloe, Mar 20 '16 at 20:44

score 6 · Answer 1 · edited Jul 24 '17 at 15:51

6

I wanted to preserve newlines in my source, and the protectedSource feature works well for that. I added this to my config.js:

config.protectedSource = [/\r|\n/g];

edited Jul 24 '17 at 15:51

Michael

8,362
6
61
88

answered Oct 30 '12 at 17:42

Todd Kamin

409
5
4

Mikhail Bunkin · Answer 2 · 2015-10-15T05:26:20.667

My solution to this was to use comments in my system, but before feeding the page content to CKEditor, convert them to custom HTML tags. Then, upon save, convert them back to my comment tags.

For your syntax that would be something like this in PHP. Before printing the page content to the textarea:

$content = str_replace(array('<!-- src -->','<!-- end src -->'),array('<protected>','</protected>'),$content);

Before saving the resulting content:

$content = str_replace(array('<protected>','</protected>'),array('<!-- src -->','<!-- end src -->'),$content);

In the CKEditor configuration:

protectedSource:[/<protected>[\s\S]*<\/protected>/g]

Hope that helps!

Hari Das · Answer 3 · 2016-07-28T17:44:36.703

config.allowedContent=true; will do the trick

Here is the full HTML code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="http://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1"></textarea>
        <script>
            CKEDITOR.config.allowedContent=true;
            CKEDITOR.replace( 'editor1' );
        </script>
    </body>
</html>

score 1 · Answer 4 · answered Aug 06 '11 at 14:23

I solved this problem by simply surrounding the back-end output of edit form page with a conditional on a $_GET variable - when you click on "Expert Mode" it loads a plain textarea instead of the ckeditor system. Your invocation of the ckeditor object will vary depending on your setup. ( I have a custom class that calls/builds the editor object )

                <div id="postdivrich" class="postarea">
<?php
if( isset( $_GET['expert'] ) )
{
    print "<div style=\"text-align:right;\"><a href=\"/admin/ckeditor/edit.php?node={$nNode}\">Editor mode</a></div>\n";
    print "<textarea name=\"content\" style=\"height:400px;width:{$nEwidth}px;\">{$aDoc['content']}</textarea>\n";
}
else
{
    print "<div style=\"text-align:right;\"><a href=\"/admin/ckeditor/edit.php?node={$nNode}&expert=true\">Expert mode</a></div>\n";
    require_once( 'admin/editor.class.php' );
    $aDoc['content'] = str_replace( "\r", '', str_replace( "\n", '', nl2br( $aDoc['content'] ) ) );
    $oEditor = new setEditor( $aDoc['content'], $nEwidth, "400", 'content' );
    $oEditor->ShowEditor();
}
?>
                </div>

score 0 · Answer 5 · edited May 23 '17 at 11:46

0

Does this answer help? Basically you can turn off the options adding a javascript, it looks like.

edited May 23 '17 at 11:46

Community

1
1

answered Jul 12 '12 at 15:09

Alex J

1,547
2
26
41

Prevent CKEditor from formatting code in source mode

5 Answers5

Linked