Html 防止 CKEditor 在源模式下格式化代码

Prevent CKEditor from formatting code in source mode

提问by Lev

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

在源模式下查看时，如何在 CKEditor 中防止任何自动格式化？

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.

我喜欢直接编辑 HTML 源代码而不是使用 WYSIWYG 界面，但是每当我编写新行或布局标签时，我将如何缩进它们，当我切换到 WYSIWYG 模式然后再次返回源模式时，所有这些都会被格式化。

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.

我偶然发现了一张 CKEditor 开发票，保留 ProtectedSource 元素的格式，它暗示了一个可能曾经存在过的设置，这正是我所追求的。我只想知道在源模式下编辑时如何完全关闭所有自动格式。

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

我想出了一个我认为万无一失的解决方案（尽管不是一个令人愉快的解决方案）。

I learned about the protectedSourcesetting, 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 protectedSourcearray, but even that (believe it or not) doesn't work.

我了解了protectedSource设置，所以我想，也许我可以使用它并在所有 HTML 之前创建一个 HTML 注释标签，然后在它之后创建另一个，然后将查找注释标签的正则表达式推送到protectedSource数组中，但即使如此（相信它与否）不起作用。

I've tried my expression straight up in the browser outside of CKEditor and it isworking, 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:

我已经在 CKEditor 之外的浏览器中直接尝试了我的表达式并且它正在工作，但是 CKEditor 没有按预期保护代码（我怀疑这是一个涉及注释标签的错误，因为我可以让它与其他字符串一起使用）。如果您想知道，这就是我希望可以作为解决方法的方法，但不是：

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:

我计划做的事情（似乎缺少在源模式下禁用格式的设置）是将我的所有 HTML 嵌套在注释标签中，如下所示：

<!-- 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 protectedSourceto work properly with two comment tags.

我很想听听是否有人对这种情况有任何建议，或者知道我描述的设置，或者即使有人可以告诉我为什么我无法protectedSource使用两个评论标签正常工作。

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.

我真的认为这一定是一个错误，因为我可以让许多其他表达式正常工作，我什至可以保护单个评论标签区域内的 HTML，但我根本无法让两个不同评论标签内的 HTML 保持不变。

回答by Mikhail Bunkin

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.

我对此的解决方案是在我的系统中使用注释，但在将页面内容提供给 CKEditor 之前，将它们转换为自定义 HTML 标签。然后，在保存时，将它们转换回我的评论标签。

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

对于您的语法，在 PHP 中将是这样的。在将页面内容打印到 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:

在 CKEditor 配置中：

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

Hope that helps!

希望有帮助！

回答by Todd Kamin

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

我想在我的源代码中保留换行符，并且该protectedSource功能对此非常有效。我将此添加到我的config.js：

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

回答by Hari Das

config.allowedContent=true;will do the trick

config.allowedContent=true;会做的伎俩

Here is the full HTML code

这是完整的 HTML 代码

<!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>

回答by AnOldMan

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 )

我通过简单地用 $_GET 变量上的条件包围编辑表单页面的后端输出来解决这个问题 - 当您单击“专家模式”时，它会加载一个纯文本区域而不是 ckeditor 系统。您对 ckeditor 对象的调用将因您的设置而异。（我有一个调用/构建编辑器对象的自定义类）

                <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>

回答by Alex J

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

请问这个答案的帮助？基本上你可以关闭添加javascript的选项，看起来像。