具有自定义工具栏和自定义样式的CKEDITOR

CKEDITOR with custom toolbar and custom styles

本文关键字：自定义 CKEDITOR 样式 工具栏      更新时间：2023-09-26

我在将CKEDITOR配置为具有自定义样式的自定义工具栏时遇到问题。

这是我添加到config.js 中的自定义样式的配置

CKEDITOR.stylesSet.add('custom_styles', [
  { name: 'Text Bolder', element: 'p', attributes: { 'class': 'validate' }}
]);

这是我用来配置工具栏和样式并初始化工具栏的代码

var cfg = { 
  toolbar: [
    [ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
  ],
  stylesSet:  'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);

问题是样式，我不知道为什么它们显示空

问题出在<p>元素上。如果元素是<span>，则前面的代码有效。我认为这是因为内联编辑器是<p>标签

CKEDITOR.stylesSet.add('custom_styles', [
 { name: 'Text Bolder', element: 'span', attributes: { 'class': 'validate' }}
]);
var cfg = { 
  toolbar: [
   [ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
  ],
  stylesSet:  'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);
相关文章：