CKEditor 4:如何从插件添加CSS样式表
CKEditor 4: How to add CSS stylesheet from plugin?
暂时尝试过这个,但没有运气
editor.addCss(this.path + 'tabber.css');
editor.document.appendStyleSheet(this.path + 'tabber.css');
完整代码
(function () {
CKEDITOR.plugins.add('tabber', {
init: function (editor) {
editor.ui.addButton('addTab', {
command: 'addTab',
icon: this.path + 'icons/tabber.png',
label: Drupal.t('Insert tabs')
});
editor.addCss(this.path + 'tabber.css');
editor.document.appendStyleSheet(this.path + 'tabber.css');
editor.addCommand('addTab', {
exec: function (editor) {
editor.insertHtml('<dl>' +
'<dt>Tab title 1</dt>' +
'<dd><p>Tab content 1.</p></dd>' +
'<dt>Tab title 2</dt>' +
'<dd><p>Tab content 2.</p></dd>' +
'</dl>');
}
});
}
});
})();
init 中的解决方案(感谢您指出正确方式的答案)
var cssPath = this.path + 'tabber.css';
editor.on('instanceReady', function () {
this.document.appendStyleSheet(cssPath);
});
CKEDITOR.addCss
接受字符串作为参数,因此无法在那里传递任何路径。 CKEDITOR.document.appendStyleSheet
是正确的(小提琴):
CKEDITOR.replace( 'editor', {
on: {
instanceReady: function() {
this.document.appendStyleSheet( 'http://path.to.your.css' );
}
}
} );
只需确保:
- 您的 CSS 存在。
- 它具有正确的读取权限。
- 编辑器中允许使用 HTML(另请阅读集成指南,因为从 4.1 开始,您需要调整命令的
allowedContent
)。
我想你可能也会发现 CKEDITOR.getUrl 很有用。
将以下内容添加到 config.js:
config.contentCss = [CKEDITOR.getUrl( 'content.css' ), '/path/to/your/css'];
这会将您的 CSS 文件附加到默认的 CKEditor 样式中。与 instanceReady 相比,此方法的优势在于(至少对我而言)当用户将模式从源切换到视觉对象时,instanceReady 事件不会重新触发,并且不会重新应用自定义样式。
如果您使用的是 CKEditor 4.4 或更高版本,则可以使用
editor.addContentsCss( pluginDirectory + 'styles/example.css' );
如果您使用的是 CKEditor 旧版本(如 4.3),则应使用:
beforeInit: function(editor) {
var ccss = CKEDITOR.config.contentsCss;
if(typeof ccss == 'string'){
ccss = [ccss];
}
ccss.push('/css/style.css');
CKEDITOR.config.contentsCss = ccss;
}
在创建功能时查看此票证:https://dev.ckeditor.com/ticket/11532
相关文章:
- 如何添加CSS&JavaScript进入Windows窗体应用程序C#.net
- 对于每个json结果,使用类jquery添加css
- 为未标记的文本添加CSS样式
- 在WordPress中使用JavaScript在html元素上添加css类
- jQuery检查CSS宽度是否大于0,然后添加CSS属性
- 单击禁用的按钮添加 CSS
- 在 Twig Child 中添加 CSS 和 JavaScript
- 更改现有的css属性,并通过删除或添加css元素来使用它
- Ember.js为特定的模型id添加css类
- 我可以用添加css吗!重要的是,只使用jquery
- Regex用于添加CSS类
- 如何在一个表的输入中搜索一组特定的值,而不是另一个表's id(s)值以添加css
- 使用JQuery添加css属性悬停
- 通过程序添加CSS渐变作为背景图像
- 使用JS添加CSS规则
- 如何为Fabric.js中的文本添加CSS属性
- IE7/8未添加css属性'top'动态地作为内联样式
- 通过jquery损坏的旋转木马添加css样式
- Node.js Express应用程序:如果存在cookie,则从服务器端向元素添加CSS类
- 添加css转换时间以使用javascript切换类