Html CKEditor 自动从 div 中剥离类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15659390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CKEditor automatically strips classes from div
提问by Iain Simpson
I am using CKEditoras a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
我在我的网站上使用CKEditor作为后端编辑器。它驱使我绕过弯道，因为它似乎想要在我按下源按钮时将代码更改为它认为合适的方式。例如，如果我点击源并创建一个<div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
然后它无缘无故地从 中剥离了类<div>，所以当我再次点击源时，它已更改为...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
我认为可以在config.js.
回答by Iain Simpson
Disabling content filtering
禁用内容过滤
The easiest solution is going to the config.jsand setting:
最简单的解决方案是转到config.js并设置：
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filteringwhich is one of the most important CKEditor features.
（记得清除浏览器的缓存）。然后 CKEditor 完全停止过滤输入的内容。但是，这将完全禁用内容过滤，这是 CKEditor 最重要的功能之一。
Configuring content filtering
配置内容过滤
You can also configure CKEditor's content filtermore precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
您还可以更精确地配置CKEditor 的内容过滤器，以仅允许您需要的这些元素、类、样式和属性。这个解决方案要好得多，因为 CKEditor 仍然会删除浏览器在复制和粘贴内容时产生的大量糟糕的 HTML，但它不会剥离您想要的内容。
For example, you can extend the default CKEditor's configuration to accept all div classes:
例如，您可以扩展默认 CKEditor 的配置以接受所有 div 类：
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
或者一些 Bootstrap 的东西：
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dirattributes for dtand ddelements:
或者您可以允许具有可选dir属性的描述列表dt和dd元素：
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules. Read more about:
这些只是非常基本的例子。您可以编写所有类型的规则 - 需要属性、类或样式、仅匹配特殊元素、匹配所有元素。您还可以禁止某些内容并完全重新定义 CKEditor 的规则。阅读更多关于：
- Content filtering in CKEditor– why do you need content filter.
- Advanced Content Filter– in deep description of the filtering mechanism.
- Allowed content rules– how to write allowed content rules.
- CKEditor 中的内容过滤– 为什么需要内容过滤器。
- 高级内容过滤器——深入描述过滤机制。
- 允许的内容规则– 如何编写允许的内容规则。
回答by Tommy at LIW
I found a solution.
我找到了解决方案。
This turns off the filtering, it's working, but not a good idea...
这将关闭过滤，它正在工作，但不是一个好主意......
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
使用内容字符串适用于 id 等，但不适用于类和样式属性，因为您有 () 和 {} 用于类和样式过滤。
So my bet is for allowing any class in the editor is:
所以我的赌注是允许编辑器中的任何类是：
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
这允许任何类和任何内联样式。
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
只允许 class="asdf1" 和 class="asdf2" 用于任何标签：
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
（所以你必须指定类名）
To allow only class="asdf" only for p tag:
仅允许 class="asdf" 仅用于 p 标签：
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
允许任何标签的 id 属性：
config.extraAllowedContent = '*[id]';
etc etc
等等等等
To allow style tag (<style type="text/css">...</style>):
允许样式标签 (<style type="text/css">...</style>)：
config.extraAllowedContent = 'style';
To be a bit more complex:
稍微复杂一点：
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
希望这是一个更好的解决方案...
回答by sepehr
Edit: this answer is for those who use ckeditor module in drupal.
编辑：此答案适用于在 drupal 中使用 ckeditor 模块的人。
I found a solution which doesn't require modifying ckeditor js file.
我找到了一个不需要修改 ckeditor js 文件的解决方案。
this answer is copied from here. all credits should goes to original author.
这个答案是从这里复制的。所有学分都应归原作者所有。
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add
config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
转到“管理>>配置>>CKEditor”；在配置文件下，选择您的配置文件（例如完整）。
编辑该配置文件，然后在“高级选项 >> 自定义 JavaScript 配置”上添加
config.allowedContent = true;.
不要忘记在“性能选项卡”下刷新缓存。
回答by Marty ZHANG
Since CKEditor v4.1, you can do this in config.js of CKEditor:
从 CKEditor v4.1 开始，您可以在 CKEditor 的 config.js 中执行此操作：
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
Allowed Content Rules的详细语法可以参考官方文档
回答by Wasif.Butt
if you're using ckeditor 4.x you can try
如果你使用 ckeditor 4.x 你可以试试
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
如果您使用的是 ckeditor 3.x，您可能会遇到此问题。
try putting the following line in config.js
尝试将以下行放入 config.js
config.ignoreEmptyParagraph = false;
回答by Mari Selvan
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
这在 ckeditor 中称为 ACF（自动内容过滤器）。它删除了我们在文本内容中使用的所有不需要的标签。在 config.js 文件中使用此命令应该关闭此 ACK。
config.allowedContent = true;
回答by oleq
Please refer to the official Advanced Content Filter guideand plugin integration tutorial.
请参考官方高级内容过滤指南和插件集成教程。
You'll find much more than this about this powerful feature. Also see config.extraAllowedContentthat seems suitable for your needs.
您会发现有关此强大功能的更多信息。另请参阅config.extraAllowedContent似乎适合您的需求。
回答by pyretta
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
如果您将 Drupal 和名为“WYSIWYG”的模块与 CKEditor 库一起使用，那么以下解决方法可能是一个解决方案。对我来说，它就像一种魅力。我在 Drupal 7.33 中使用 CKEditor 4.4.5 和 WYSIWYG 2.2。我在这里找到了这个解决方法：https: //www.drupal.org/node/1956778。
Here it is: I create a custom module and put the following code in the ".module" file:
这是：我创建了一个自定义模块并将以下代码放入“.module”文件中：
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
我希望这能帮助其他 Drupal 用户。
回答by Sanchit Gupta
Following is the complete example for CKEDITOR 4.x:
以下是CKEDITOR 4.x的完整示例：
HTML
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
脚本
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
上面的代码将允许编辑器中的所有标签。
For more Detail : CK EDITOR Allowed Content Rules
更多细节：CK EDITOR 允许的内容规则
回答by pandian_Snkl
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
我在使用 ckeditor 4.7.1 的 chrome 上遇到了同样的问题。只需在 ckeditor instanceReady 上禁用 pasteFilter。此属性禁用高级内容过滤器 (ACF) 的所有过滤器选项。
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});
