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

【问题标题】：Prevent CKEditor from formatting code in source mode防止CKEditor在源代码模式下格式化代码
【发布时间】：2011-02-20 12:27:35
【问题描述】：

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

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

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

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

我了解了protectedSource 设置，所以我想，也许我可以使用它并在我的所有 HTML 之前创建一个 HTML 注释标签，然后在它之后创建一个 HTML 注释标签，然后将一个正则表达式推送到 @ 987654324@ 数组，但即使这样（信不信由你）也不起作用。

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

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

我计划做的（因为似乎缺少在源模式下禁用格式设置的设置）是将我所有的 HTML 嵌套在这样的注释标签中：

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

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

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

【问题讨论】：

可能这张票适用于您的问题：dev.fckeditor.net/ticket/3260
列夫：嘿，这个问题很老了……你有什么解决办法吗？
不，很遗憾，我没有找到我正在寻找的解决方案，因为 CKEditor 开发人员告知我 cmets 已被剥离（这就是为什么我的最佳解决方案仍然失败的原因） .我最终做的是在文本字段上方添加一个选择菜单，用户可以在“富文本”和“纯文本”编辑之间切换，如果他们进入纯文本模式，我会杀死编辑器。不是一个非常令人愉快的“解决方案”，但它至少避免了 CKEditor 提出的问题。 >_
我目前正试图阻止 ckeditor 格式化我的源代码。我觉得它烦人和无用。为什么我想在源代码模式下编写只是为了修改我的源代码？我讨厌那些假设你不知道自己在做什么并试图为你做所有事情的应用程序/插件！！！！
我假设这个问题仍然没有本地 CKEditor 解决方案。根据我从 ckeditor 支持站点收集到的信息，简短的回答是 CKEditor 将始终重新格式化它认为“无效”，或者更具体地说，“对所见即所得编辑器无效”，HTML。我知道所见即所得的部分将无法正常工作，所以我对此很平静。如果您想要未修改的 html，则需要使用 textarea。如果这不正确，请告诉我，但我相信它是正确的。

标签： html formatting ckeditor wysiwyg

【解决方案1】：

我想在我的源代码中保留换行符，protectedSource 功能非常适用。我将此添加到我的config.js：

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

【讨论】：

【解决方案2】：

config.allowedContent=true; 可以解决问题

这是完整的 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>

【讨论】：

【解决方案3】：

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

对于您在 PHP 中的语法。在将页面内容打印到 textarea 之前：

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

在保存结果内容之前：

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

在CKEditor配置中：

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

希望有帮助！

【讨论】：

【解决方案4】：

this 回答有帮助吗？基本上你可以关闭添加javascript的选项，它看起来像。

【讨论】：

【解决方案5】：

我通过简单地将编辑表单页面的后端输出与 $_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>

【讨论】：