替换 CKEditor 中的样式

Question

我正在使用 CKEditor 构建一个简单的站点构建工具。该工具具有选择和设置调色板的能力，这应该反映在 CKEditor 的样式下拉列表中。然而，在我看来，样式不能在 CKEditor 中被覆盖。我现在的代码是：

CKEDITOR.stylesSet.add( 'styles', [
  // Block-level styles
  { name: 'blah 1', element: 'h2', styles: { 'color': '#xxxxxx' } },
  { name: 'blah 2', element: 'h3', styles: { 'color': '#xxxxxx' } },
  { name: 'blah 3' , element: 'h4', styles: { 'color': '#xxxxxx' } },
  { name: 'blah 4' , element: 'h5', styles: { 'color': '#xxxxxx' } },
] );
CKEDITOR.config.stylesSet = 'styles';

现在，如果我用新样式重复此操作，我会得到：

ckeditor.js:232 Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "styles" is already registered.

我试过使用 CKEDITOR.replace，但这并不能解决问题。我想，最明显的解决方案是在每次使用时迭代样式名称； style1、style2、style3...但这对资源不是很友好。有人对此有实际的解决方案吗？

谢谢，李

Answer 1

您是否尝试过将 styles 重命名为 default？

我使用它并且它有效，我的加载了一个外部样式文件。但是相同的数组结构。

CKEDITOR.config.stylesSet = 'default:http://' + window.location.host + '/folder/fckeditor.styles.js';

Answer 2

因此，我找到了一个解决方案，即在重新创建面板之前始终销毁该面板（如果存在）。例如：

if (CKEDITOR.instances['footer-' + i]) {
  CKEDITOR.instances['footer-' + i].destroy(true);
}
var editor = CKEDITOR.inline('footer-' + i, {
  stylesSet: [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
    { name: 'Brown Title' , element: 'h4', styles: { 'color': 'Red' } },
    { name: 'Purple Title' , element: 'h5', styles: { 'color': 'Red' } }
  ]
});

现在，这确实每次都会发出警告，说：

[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-incorrect-destroy

但是，使用 CKEditor API 没有干净的方法可以做到这一点，所以由于它有效，我将其标记为答案。

替换 CKEditor 中的样式

Replace styles in CKEditor

ckeditor