[英]Add buttons for custom styles to CKEditor
CKEditor允许您通过编辑文件styles.js将自定义样式添加到样式组合框(有关详细信息,请参阅什么是用于添加自定义HTML元素的好的JavaScript HTML编辑器? )
我想在工具栏中添加独特的按钮来应用我的自定义样式,而不是用户必须从样式组合中选择它们。
如何将自定义按钮添加到CKEditor工具栏?
继续使用以下代码:
// Your custom style.
var myStyle = new CKEDITOR.style( {
element: 'span',
attributes: {
'data-foo': 'bar',
'class': 'myClass'
},
styles: {
color: 'red'
}
} );
CKEDITOR.replace( 'editor1', {
on: {
// Register command and button along with other plugins.
pluginsLoaded: function() {
var editor = this;
// Registers a command that applies the style.
// Note: it automatically adds Advanced Content Filter rules.
this.addCommand( 'myStyle', new CKEDITOR.styleCommand( myStyle ) );
// Add toolbar button for this command.
this.ui.addButton && this.ui.addButton( 'myStyleButton', {
label: 'My style',
command: 'myStyle',
toolbar: 'insert,10'
// You may want to set some icon here.
// icon: 'someIcon'
} );
}
}
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.