ckeditor,如何调整包装代码显示样式

时间:2017-08-25 11:10:16

标签: javascript html css ckeditor

我正在测试CKEditor

我试图在编辑器中显示,以匹配我的网站css样式以显示最终结果。

我想要做的就是设置"包装代码"通过添加课程来匹配我网站的CSS的按钮。

我在this page of the manual看过你可以做这样的事情:

config.format_pre = { element: 'pre', attributes: { 'class': 'editorCode' } };

然而,对于像这样的代码块也这样做:

config.format_code = { element: 'code', attributes: { 'class': 'someclass' } };

实际上什么都不做。有人指出我可能会遗失的东西吗?

我已经对其他元素进行了测试,因此我知道正在调整配置文件的更改。

1 个答案:

答案 0 :(得分:0)

一个重要的事情是,通过config.format_tagname格式化的每个标记都应包含在config.format_tags中。但是,这两个设置(config.format_tagnameconfig.format_tags)仅适用于块级元素(如您引用的manual page中所述)。

由于code元素被CKEditor视为内联元素(请参阅DTD),因此无法在此处使用此配置。

但是,修改通过Style下拉列表添加的元素的最简单方法是编辑CKEditor目录中的styles.js文件。下拉样式基于此文件,因此您可以轻松修改code element there。您还可以定义自定义stylesSet