Как вы изменяете панель инструментов CKEditor динамически (без использования заранее определенной панели инструментов)?
CKEditor Руководство разработчика сообщает только, как установить панель инструментов во время инициализации.
Я использую CKEditor 3.6.4.
Следуя mb21, мне удалось загрузить новую панель инструментов, повторно инициализируя весь редактор:
CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);
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);
Вы можете перезагрузить или сменить панель инструментов, не перезагружая редактор, с помощью этого кода:
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. Если вы укажете панель инструментов foo, тогда должен быть массив CKEDITOR.instances.editor1.config.toolbar_foo, который определяет содержимое панели инструментов.
Вы можете добавлять или удалять вещи из текущего массива массивов переменных массивов, а затем заставлять его перезагружать: edObj.loadToolbar(null);
(Мета-проблема не влияет на вышеописанный метод: я не понимаю, почему слушатели для события themeSpace уходят после того, как редактор загружает тему. (В модуле plugin init() метод event.on( "themeSpace"...), но слушатели исчезают после того, как редактор инализован. Я не видел, где это сделал removeListener(). Поэтому вызов... toolbar.init(это) был необходим для восстановления этих прослушивателей событий поэтому код панели инструментов перестроит новую панель инструментов.)
В соответствии с [документацией CKEditor] [1] они отказались от концепции "темы", и поэтому упомянутый выше метод 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);
}Просто быстрый.
Вам может понадобиться добавить эту строку к функции loadToolbar, если ваша панель инструментов содержит кнопки textcolor и/или backgroundcolor:
//Need to call init for colorbutton so that we can re-draw the color buttons
CKEDITOR.plugins.registered.colorbutton.init(this);
для меня, по крайней мере, это немного осложнилось.
и ответить на вопрос, я думал, что буду делиться рабочим кодом.
У меня есть пользовательские фрагменты текста, известные как шаблоны в языке ckeditor, которые мне нужно загрузить. Я также динамически меняю панель инструментов в зависимости от ширины окна и динамически изменяю ее размер при изменении размера окна. каждый размер браузера получает свою собственную панель инструментов. (XS, SM, MD). Я ожидаю, что все элементы с CKEDITOR имеют класс .ckeditor, и у них есть идентификатор. Кроме того, у меня есть функция размытия ajax save handler, поэтому при потере фокуса управление автоматически сохраняется (через функцию 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 **************
Или:
$(document).ready(function() {
CKEDITOR.config.customConfig = 'configSimple';
});
//the configSimple.js file is the same folder with config.js
Если вам нужен простой способ обменивать панели инструментов в разных областях, все, что вам нужно сделать, это добавить панели инструментов в конфигурацию, а затем выбрать тот, который вы хотите, при создании экземпляра редактора.
В 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>
Я предполагаю, что вы хотите добавить кнопку через файл плагина. Вот как. Добавьте свою кнопку в 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 кнопок. Вы можете нажать кнопку в любой из этих массивов.
Вы можете создать панель инструментов динамически, как вам нравится. Я обнаружил, что наилучшим подходом является прослушивание событий 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' ] },
];
});