答案 0 :(得分：9)
按照mb21的建议，我设法通过重新初始化整个编辑器来加载新的工具栏：
CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);
答案 1 :(得分：7)
var editor = CKEDITOR.instances['text_id'];
if (editor) { editor.destroy(true); }
CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
'-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
CKEDITOR.config.toolbar = 'Basic';
CKEDITOR.config.width=400;
CKEDITOR.config.height=300;
CKEDITOR.replace('text_id', CKEDITOR.config);
答案 2 :(得分：3)
您可以使用以下代码重新加载或更改工具栏，而无需重新加载编辑器：
CKEDITOR.editor.prototype.loadToolbar = function(tbName) {
// If the 'themeSpace' event doesn't exist, load the toolbar plugin
if (!this._.events.themeSpace) {
CKEDITOR.plugins.registered.toolbar.init(this);
// causes themeSpace event to be listened to.
}
// If a different toolbar was specified use it, otherwise just reload
if (tbName) this.config.toolbar = tbName;
// themeSpace event returns a object with the toolbar HTML in it
var obj = this.fire( 'themeSpace', { space: 'top', html: '' } );
// Replace the toolbar HTML
var tbEleId = "cke_"+this.config.toolbarLocation+"_"+this.name;
var tbEle = document.getElementById(tbEleId);
tbEle.innerHTML = obj.html;
} // end of loadToolbar
添加函数editor.prototype使其成为任何编辑器实例的方法。您的编辑器对象可能是CKEDITOR.instances.editor1
loadToolbar的参数是要加载的工具栏的名称，如果为null，则重新加载当前工具栏。当前工具栏的名称位于CKEDITOR.instances.editor1.config.toolbar中。如果您指定工具栏＆＃39; foo＆＃39;那么必须有一个CKEDITOR.instances.editor1.config.toolbar_foo数组来定义工具栏的内容。
您可以在数组变量的当前工具栏数组中添加或删除内容，然后重新加载：edObj.loadToolbar（null）;
（元问题不会影响上述方法：我不明白为什么在编辑器最初加载主题后，“#Space＆＃39;”活动的听众会消失。（工具栏插件init（）方法执行一个event.on（＆＃34; themeSpace＆＃34; ...）但是在编辑器初始化之后，侦听会消失。我没有看到它在哪里执行了removeListener（）。所以调用.. .toolbar.init（this）需要重新建立这些事件侦听器，以便工具栏代码重建新工具栏。）
答案 3 :(得分：3)
根据[CKEditor文档] [1]，他们放弃了'theme'的概念，因此上面提到的'loadToolbar（）'方法必须稍微修改一下才能使用最新版本的CKEditor。
这对我有用（CKEditor 4.4.4）：
CKEDITOR.editor.prototype.setToolbar = function(tbName) {
if (!this._.events.themeSpace) {
CKEDITOR.plugins.registered.toolbar.init(this);
// causes themeSpace event to be listened to.
}
// If a different toolbar was specified use it, otherwise just reload
if (tbName){
this.config.toolbar = tbName;
}
//According to CKEditor documentation
var obj = this.fire( 'uiSpace', { space: 'top', html: '' } ).html;
console.log("Received from themespace:");
console.log(obj);
// Replace the toolbar HTML
var tbEleId = this.id +"_" + this.config.toolbarLocation;
console.log("Editor element id: " + tbEleId);
var tbEle = document.getElementById(tbEleId);
//tbEle.innerHTML = obj.html;
$(tbEle).html(obj);
}
答案 4 :(得分：1)
快一点。
如果工具栏包含textcolor和/或backgroundcolor按钮，则可能需要将此行添加到loadToolbar函数中：
//Need to call init for colorbutton so that we can re-draw the color buttons
CKEDITOR.plugins.registered.colorbutton.init(this);
答案 5 :(得分：1)
并回答我认为我会分享工作代码的问题。
我有一个用户定义的文本片段 - 在我需要加载的ckeditor用语中称为模板。 我还根据窗口宽度动态更改工具栏，并在窗口调整大小时动态调整大小。每个浏览器大小都有自己的自定义工具栏（XS，SM，MD）。我希望所有带有CKEDITOR的元素都有一个.ckeditor类，并且它们分配了一个ID。 另外我有一个模糊的ajax保存处理程序设置，所以在失去焦点时，控件会自动保存（通过ajax_post函数），如果需要的话。
我使用setupCKEdit调用该过程。感谢hpique提供了删除旧对象和创建新实例的灵感。在调整大小事件时，我会稍微延迟（resizeTimeout = 200毫秒），因此在更改窗口大小时不会经常触发。
// ********* ck editor section starts **************
var resizeTimeout;
var ckeditorXSToolbar = Array(
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo' ] },
{ name: 'document', groups: [ 'mode' ], items: [ 'Source'] },
{ name: 'tools', items: [ 'Maximize'] },
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize'] ,class:'hidden-xs'},
{ name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'TextColor','Bold', 'Italic'] }
);
var ckeditorSMToolbar = [
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize'] ,class:'hidden-xs'},
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection' ], items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print'] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'TextColor','Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
];
var ckeditorMDToolbar = [
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize'] ,class:'hidden-xs'},
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print'] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'TextColor','Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
];
function setupCKEdit(selector){
if (typeof(o.snippets) == 'object'){
var template = {
imagesPath:url_img ,
templates: o.snippets
};
CKEDITOR.addTemplates('myTemplate', template);
}
resizeCKEdit();
$('.ckeditor',selector).not('.hasCKEDITOR').each(function(index,element){
$(this).addClass('hasCKEDITOR');
var ckConfig = {
templates_replaceContent:false,
scayt_slang:'en_GB',
scayt_autoStartup:scayt_autoStartup,
toolbarCanCollapse:true,
extraPlugins:'templates,colorbutton',
toolbar:getCKtoolbar(),
toolbarStartupExpanded:getCKToolbarStartup()
};
// inject the snippets after the toolbar[].name = 'document'
if (typeof(o.snippets) == 'object'){
ckConfig.templates = 'myTemplate';
for(var i = 0 ; i < ckConfig.toolbar.length ; i++){
if (ckConfig.toolbar[i].name == 'document'){
// iterate throught each document element to make sure template is not already there.
var hasTemplate = false;
for ( var j = 0 ; j < ckConfig.toolbar[i].items.length; j++){
if (ckConfig.toolbar[i].items[j] == 'Templates'){
hasTemplate = true;
}
}
if (hasTemplate == false){
ckConfig.toolbar[i].items.push('-'); // add to documents group.
ckConfig.toolbar[i].items.push('Templates');
}
}
}
}
$(this).ckeditor(ckConfig);
var editor = CKEDITOR.instances[this.id];
if(typeof(editor) == 'object'){
editor.on('blur',function(event){
if (event.editor.checkDirty()){
var ta = $('#'+event.editor.name); // ta = textarea
if ( (typeof(ta) == 'object')
&& (typeof(ta[0]) == 'object')
&& ( $(ta[0]).hasClass('noajax') == false )
&& ( $(ta[0]).data('id'))
&& ( ta[0].name)) {
var data = {
field_name:ta[0].name,
field_value:event.editor.getData(),
id:$(ta[0]).data('id')
};
data[ta[0].name]=event.editor.getData();
ajax_post(url_ajax + 'update_field', data);
event.editor.resetDirty();
}
}
});
}
});
}
function getCKtoolbar(){
// returns the CK editor toolbar array based on window width
var dw = $(document).width();
if (dw < 768){
return ckeditorXSToolbar;
} else if(dw < 991){
return ckeditorSMToolbar;
}
else {
return ckeditorMDToolbar;
}
}
function getCKToolbarStartup(){
// returns the toolbarStartupExpanded parameter, based on window width
var dw = $(document).width();
if (dw < 768){
return false;
} else if(dw < 991){
return true;
}
else {
return true;
}
return true;
}
function resizeCKEdit(){
// when there is a document resize, update the toolbar buttons.
if ($('body').data('resize_enabled') == undefined){
$('body').data('resize_enabled',true);
$(window).resize(function(event){
// only do the reize 100msec after the resizing finishes.
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(function(){
// iterate through all CKEDITOR instances, and update their toolbars.
var ckConfig = {
templates_replaceContent:false,
scayt_slang:'en_GB',
scayt_autoStartup:scayt_autoStartup,
toolbarCanCollapse:true,
extraPlugins:'templates,colorbutton',
toolbar:getCKtoolbar(),
toolbarStartupExpanded:getCKToolbarStartup()
};
if (CKEDITOR.editor.length){
// need to get all instances before deleting them,
var instances = Array();
var i = 0;
for (var instance in CKEDITOR.instances) {
instances[i] = instance;
i++;
}
for (i = 0 ; i < instances.length ; i ++){
CKEDITOR.instances[instances[i]].destroy();
$('#'+instances[i]).removeClass('hasCKEDITOR');
setupCKEdit($('#'+instances[i]).parent());
}
}
},200);
});
}
}
// ********* ck editor section ends **************
答案 6 :(得分：1)
或者：
$(document).ready(function() {
CKEDITOR.config.customConfig = 'configSimple';
});
//the configSimple.js file is the same folder with config.js
答案 7 :(得分：0)
如果您想要一种简单的方法在不同区域交换工具栏，您只需将工具栏添加到配置中，然后在实例化编辑器时选择所需的工具栏。
在config.js中：
CKEDITOR.editorConfig = function(config)
{
// default toolbar
config.toolbar = [
{ name: 'source', items: [ 'ShowBlocks', 'Source' ] },
{ name: 'clipboard', items: [ 'Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ] },
{ name: 'editing', items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] },
{ name: 'p2', items: [ 'Blockquote', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList' ] },
{ name: 'insert', items: [ 'CreatePlaceholder', 'CreateDiv', 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Iframe' ] },
//{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'styles', items: [ 'Format' ] },
{ name: 'morestyles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'BGColor', 'TextColor' ] }
];
// here is one custom toolbar
config.toolbar_mycustom1 = [
{ name: 'source', items: [ 'ShowBlocks', 'Source' ] },
{ name: 'clipboard', items: [ 'Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ] },
{ name: 'editing', items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] }
];
// here is another custom toolbar
config.toolbar_mycustom2 = [
{ name: 'styles', items: [ 'Format' ] },
{ name: 'morestyles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'BGColor', 'TextColor' ] }
];
// ...other config vars here
在您实例化编辑器实例的页面中，这样做：
<script>
CKEDITOR.replace('MyObject', {toolbar: 'mycustom2'});
</script>
答案 8 :(得分：0)
我假设你想通过插件文件添加按钮。这是怎么回事。将您的按钮添加到ui。
editor.ui.addButton('ButtonName', {
label: lang.lockediting.locked,
icon: this.path + 'icons/locked.png',
command: 'lockediting'});
然后你可以将ButtonName推送到工具栏。
//Here it is pushed as a new group
editor.config.toolbar.push(['ButtonName']);
如果你检查console.log（editor.config.toolbar）;你会看到工具栏是一个对象，工具栏组为数组[Array [10]，Array [2]，Array [5]]。 [Array [10]表示第一组中有10个按钮。您可以将按钮按到任何阵列中。
答案 9 :(得分：0)
您可以根据需要动态创建工具栏。我发现最好的方法是收听有关实例创建的CKE事件。
CKEDITOR.on('instanceCreated', function(event) {
var editor = event.editor;
editor.config.toolbar = [
{ name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
]; // could be from synchronous!!! XHR as well
});
CKEDITOR.on('instanceReady', function(event) {
var editor = event.editor;
editor.config.toolbar = [
{ name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
];
});