12

在我的<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？

谢谢你的帮助。

4

8 回答 8

9

我有一个类似的问题，在 Drupal 7 中使用 CKEditor 7.x.1.13 打开和保存正在剥离我的 HTML 元素中的属性。在“自定义 JavaScript 配置”下添加以下内容修复了它。

config.allowedContent = true;
于 2014-01-06T19:06:16.573 回答
9

您可以通过设置允许任何内容：标签、类、样式和属性

config.allowedContent = true;

但是，最好只允许插件提供的功能以外的其他功能。要允许将任何类附加到表，请键入

config.extraAllowedContent = 'table(*)';

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

于 2015-03-18T08:41:27.757 回答
6

正如我在这里看到的，很可能您使用的是 CKEditor 4.1 或更高版本，而您的问题是Advanced Content Filter。我猜您的表格对话框中没有“高级”选项卡，您dialogadvtab的编辑器包中也没有插件：

CKEDITOR.instances.yourInstance.plugins.dialogadvtab
> undefined

正确的？然后你必须配置config.extraAllowedContent：

config.extraAllowedContent = `table[class]`;

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

“嘿，编辑，我要给表格添加类，你应该很酷。”

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

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

请参阅我之前对类似问题的回答：CKEditor automatically strips classes from div

于 2013-07-25T10:44:48.747 回答
4

我找到了解决方案。

这会关闭过滤，它正在工作，但不是一个好主意......

config.allowedContent = true;

使用内容字符串可以很好地用于 id 等，但不适用于类和样式属性，因为您有 () 和 {} 用于类和样式过滤。

所以我的赌注是允许编辑器中的任何类是：

config.extraAllowedContent = '*(*)';

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

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

只允许 class="asdf1" 和 class="asdf2" 用于任何标签：

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

（所以你必须指定类名）

仅允许 class="asdf" 用于 p 标签：

config.extraAllowedContent = 'p(asdf)';

允许任何标签的 id 属性：

config.extraAllowedContent = '*[id]';

等等等等

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

config.extraAllowedContent = 'style';

再复杂一点：

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

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

于 2014-08-07T13:00:47.327 回答
1

Thsi 是使用我们自己的 css 样式的 CKeditor 4.0 及更高版本的完美示例。

  <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');
                          }
                       }

                    });
于 2016-07-12T19:41:24.700 回答
0

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

于 2013-07-24T14:04:14.627 回答
0

And Still, in 2020, The problems occur to many users, for solution follow the step

1.goto ckeditor folder

2.find file config.js and open it

3.find

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

Add table(*) like this

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

note if you don't find point no 3 then add the following code to config.js file

`config.div_wrapTable = true;` 


`config.extraAllowedContent = 'table(*);`
于 2020-09-17T18:19:55.660 回答
0 
config.allowedContent = true;

我通过在本地主机上添加此代码解决了同样的问题。但是在我的服务器上它不起作用。多亏了这个，我'tabletools' : 1,在 ckeditor/build-config.js 中禁用了它，它有所帮助。

于 2018-04-04T14:09:12.727 回答