CKEditor移除表格的class属性

Question

在我的<textarea>中，我有这段文本：

<table class='table table-striped'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

使用CKEDITOR.replace()后，我的文本区域变成了 CKEditor，里面有一个表格。问题是 CKEditor 添加了自己的类到我的表格中叫做cke_show_border。只有该类中的属性应用于该表格，没有应用我的类。

我该怎么做才能让它应用我的table和table-striped类呢？

谢谢您的帮助。

- Triet Doan

---

如果您将此代码从CKE发送到数据库，则将拥有包含您的类的表，并且CSS也将应用。不过，我从未尝试在CKE内部应用自定义CSS到HTML标签。 - DeiForm

你说的“将这段代码从CKE发送到数据库”是什么意思？我只是想将其显示给用户。 - Triet Doan

我以为你要在某个 PHP 应用程序中使用它。 - DeiForm

不，我使用ASP.NET MVC 4 :) - Triet Doan

Answer 1

通过设置，您可以允许任何东西：标签、类、样式和属性。

config.allowedContent = true;

然而，更好的方式是仅允许使用插件提供的功能以外所需的特性。 要允许将任何类附加到表格，请键入

config.extraAllowedContent = 'table(*)';

要了解有关规则语法的更多信息，请访问此处：http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-string-format

- Madars Veners

Answer 2

我曾遇到类似的问题，使用Drupal 7中的CKEditor 7.x.1.13打开和保存时会剥夺我的HTML元素中的属性。在“自定义JavaScript配置”下添加以下内容即可解决。

config.allowedContent = true;

- JTHouseCat

Answer 3

根据我所看到的，您很可能正在使用CKEditor 4.1或更新版本，并且您的问题是高级内容过滤。我猜测您的表格对话框中没有“高级”选项卡，您的编辑器包中也没有dialogadvtab插件：

CKEDITOR.instances.yourInstance.plugins.dialogadvtab
> undefined

对吗？那么您需要配置config.extraAllowedContent：

config.extraAllowedContent = `table[class]`;

你可能会问为什么会这样？这是因为编辑器中没有功能（命令、按钮、对话框、字段等）可以将类附加到<table>标签上。所以没有这样的功能说：

"嘿，编辑器，我要添加表格类，你应该支持它。"

事实上，这是通过定义allowedContent和功能定义来完成的。因此，如果没有加载能告诉编辑器表格可以带有类的dialogadvtab插件，编辑器会在输出时丢弃class属性，因为它们不受任何功能支持。

这种行为是为了保持您的标记干净，并控制由您的所见即所得编辑器生成的内容。但是，它需要注意和基本理解。

请参考我之前回答类似问题的答案：CKEditor自动从div中剥离类

- oleq

---

谢谢你的回答。但是我的 dialogadvtab 已经存在了。此外，CKE并没有删除我的类，它仍然存在，只是没有被应用。 - Triet Doan

Answer 4

我找到了一个解决方案。

这将关闭过滤功能，虽然有效，但不是一个好主意...

config.allowedContent = true;

对于id等属性，使用内容字符串进行操作很好，但是对于class和style属性来说不行，因为你需要使用()和{}进行class和style过滤。

因此，我认为在编辑器中允许任何类别是最好的选择：

config.extraAllowedContent = '*(*)';

这允许任何类和任何内联样式。

config.extraAllowedContent = '*(*);*{*}';

为任何标签只允许 class="asdf1" 和 class="asdf2":

config.extraAllowedContent = '*(asdf1,asdf2)';

所以您需要指定类名。

只允许在 p 标签中使用 class="asdf"：

config.extraAllowedContent = 'p(asdf)';

允许任何标签使用 id 属性：

config.extraAllowedContent = '*[id]';

为了允许样式标签（<style type="text/css">...</style>）:

config.extraAllowedContent = 'style';

稍微复杂一些的话：

（保留HTML标签）

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

希望这是一个更好的解决方案...

- Tommy at LIW

---

这不是问题所在。 - Andrew Barber

Answer 5

这是一个完美的例子，可以使用 CKeditor 4.0 及更高版本和我们自己的 CSS 样式。

  <script src="//cdn.ckeditor.com/4.5.9/standard-all/ckeditor.js"></script>



     var editor = CKEDITOR.replace("textarea", {
                        width: 750, height: 500, fullPage: true,
                        extraPlugins: 'stylesheetparser',

                        //// Do not load the default Styles configuration.
                        stylesSet: [],
                        on: {
                            instanceReady: function (evt) {
                            // Remove ckeditor table border
                            $("iframe").contents().find('body').removeClass('cke_show_borders');
                          }
                       }

                    });

- tika

---

还有另一种隐藏表格边框的选项，可以通过配置属性实现：config.startupShowBorders = false; - tika

Answer 6

config.allowedContent = true;

我在本地主机上通过添加以下代码解决了相同的问题。但是在我的服务器上它没有起作用。感谢this，我在 ckeditor/build-config.js 中禁用了 'tabletools' : 1,，这有所帮助。

- gavrotte

Answer 7

将border=1添加到表格中，这样CKEditor就不会在表格上设置自己的类（可能有其他方法可以实现，但我发现这是最简单的方法，因为它不需要对CKEditor进行任何更改）。

- AlfonsoML

---

是的，但它仍然没有应用我的 CSS 类。 - Triet Doan

您可能忘记将CSS添加到编辑器的内容中，或者存在其他优先级更高的规则。此时我们只能猜测您的问题所在。 - AlfonsoML

这里没有更高优先级的规则，我已经使用 FireFox 的检查元素功能进行了检查。我需要将 CSS 放到文本区域中吗？但是用户会在编辑器中看到 CSS 吗？我将我的 CSS 存储在一个 CSS 文件中。 - Triet Doan

你是否将contentsCss配置值调整为你的CSS文件？ - AlfonsoML

那是什么？如何进行调整？ - Triet Doan

Answer 8

即使在2020年，许多用户仍然遇到问题，为了解决问题，请按照以下步骤进行：

1. 进入 ckeditor 文件夹

2. 找到文件config.js并打开它

3.find

`config.extraAllowedContent = 'div(*)'`;

请添加以下代码：

table(*)

`config.extraAllowedContent = 'table(*);div(*)';`

注意：如果您找不到第3点，请将以下代码添加到config.js文件中。

`config.div_wrapTable = true;` 


`config.extraAllowedContent = 'table(*);`

- Khadka Pushpendra