CKEditor 4 自定义下拉菜单
CKEditor 4 custom dropdown
我们正在尝试向 CKeditor 添加一个自定义下拉列表,其中包含我们将查找和替换的预设值列表,对于我来说,我找不到一种简单的方法来执行此操作。看看TinyMCE,很简单:
http://www.tinymce.com/tryit/menubutton.php
对于 CKEditor 是否有像这样的简单解决方案,我们宁愿不必为了这个功能而将 CKeditor 换成 TinyMCE。我找到了一个名为 PlaceHolder 的插件,但它并不能完全满足我们的需求,老实说,我希望在没有插件的情况下做到这一点,并且只需像 TinyMCE 那样在初始化时进行配置。
非常感谢您的任何见解。
都是关于editor.ui.addRichCombo
(JSFiddle):
CKEDITOR.replace( 'editor', {
toolbarGroups: [
{ name: 'mode' },
{ name: 'basicstyles' }
],
on: {
pluginsLoaded: function() {
var editor = this,
config = editor.config;
editor.ui.addRichCombo( 'my-combo', {
label: 'My Dropdown Label',
title: 'My Dropdown Title',
toolbar: 'basicstyles,0',
panel: {
css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
multiSelect: false,
attributes: { 'aria-label': 'My Dropdown Title' }
},
init: function() {
this.startGroup( 'My Dropdown Group #1' );
this.add( 'foo', 'Foo!' );
this.add( 'bar', 'Bar!' );
this.startGroup( 'My Dropdown Group #2' );
this.add( 'ping', 'Ping!' );
this.add( 'pong', 'Pong!' );
},
onClick: function( value ) {
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml( value );
editor.fire( 'saveSnapshot' );
}
} );
}
}
} );
我们正在尝试向 CKeditor 添加一个自定义下拉列表,其中包含我们将查找和替换的预设值列表,对于我来说,我找不到一种简单的方法来执行此操作。看看TinyMCE,很简单:
http://www.tinymce.com/tryit/menubutton.php
对于 CKEditor 是否有像这样的简单解决方案,我们宁愿不必为了这个功能而将 CKeditor 换成 TinyMCE。我找到了一个名为 PlaceHolder 的插件,但它并不能完全满足我们的需求,老实说,我希望在没有插件的情况下做到这一点,并且只需像 TinyMCE 那样在初始化时进行配置。
非常感谢您的任何见解。
都是关于editor.ui.addRichCombo
(JSFiddle):
CKEDITOR.replace( 'editor', {
toolbarGroups: [
{ name: 'mode' },
{ name: 'basicstyles' }
],
on: {
pluginsLoaded: function() {
var editor = this,
config = editor.config;
editor.ui.addRichCombo( 'my-combo', {
label: 'My Dropdown Label',
title: 'My Dropdown Title',
toolbar: 'basicstyles,0',
panel: {
css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
multiSelect: false,
attributes: { 'aria-label': 'My Dropdown Title' }
},
init: function() {
this.startGroup( 'My Dropdown Group #1' );
this.add( 'foo', 'Foo!' );
this.add( 'bar', 'Bar!' );
this.startGroup( 'My Dropdown Group #2' );
this.add( 'ping', 'Ping!' );
this.add( 'pong', 'Pong!' );
},
onClick: function( value ) {
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml( value );
editor.fire( 'saveSnapshot' );
}
} );
}
}
} );