W jaki sposób dynamicznie zmieniasz pasek narzędzi CKEditor (bez użycia predefiniowanego paska narzędzi)?Dynamicznie zmieniaj pasek narzędzi CKEditor
Program CKEditor Developer's Guide informuje tylko, jak ustawić pasek narzędzi podczas inicjowania.
Używam CKEditor 3.6.4.
Po sugestia mb21 „s udało mi się załadować nowy pasek narzędzi ponownym zainicjowaniem cały edytor:
CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);
można przeładować lub zmienić pasek narzędzi, bez przeładowywania edytor, z tym kodem:
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
Dodanie funkcji edytora.prototype powoduje, że jest to metoda dowolnej instancji edytora. Obiektem twojego edytora jest prawdopodobnie CKEDITOR.instances.editor1
Argumentem do loadToolbar jest nazwa paska narzędzi do załadowania, lub jeśli null, bieżący pasek narzędzi jest przeładowywany. Nazwa bieżącego paska narzędzi znajduje się w pliku CKEDITOR.instances.editor1.config.toolbar. Jeśli wybierzesz pasek narzędzi "foo", musi to być tablica CKEDITOR.instances.editor1.config.toolbar_foo, która definiuje zawartość paska narzędzi.
Można dodawać lub usuwać elementy z bieżącej tablicy pasków tablic zmiennych, a następnie powodować ich ponowne ładowanie za pomocą: edObj.loadToolbar (null);
(Meta problem nie wpływa na metodę powyżej: Nie rozumiem, dlaczego słuchacze na imprezę „themeSpace” odejść po redaktor pierwotnie ładuje motyw metoda (init plugin Toolbar() robi An. event.on ("themeSpace" ...) ale nasłuchuje odejść po tym, jak edytor zostanie zainicjowany.Nie widziałem, gdzie to zrobił removeListener(). Więc wywołanie ... toolbar.init (this) było potrzebne do restablish te detektory zdarzeń więc kod Toolbar by odbudować nowy pasek narzędzi.)
o swoim poprzednim komentarzu, myślę, że kod może użyć czegoś jak fireOnce więc słuchacze są automatycznie usuwane. – AlfonsoML
Tylko szybki jeden.
może trzeba dodać tę linię do funkcji loadToolbar jeśli Pasek narzędzi zawiera textColor R i/lub backgroundColor przyciski:
//Need to call init for colorbutton so that we can re-draw the color buttons
CKEDITOR.plugins.registered.colorbutton.init(this);
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);
przynajmniej dla mnie to ma trochę skomplikowany ....
i odpowiedzieć na pytanie, myślałem, że dzielić pracę kod.
Mam zdefiniowane przez użytkownika fragmenty tekstu - znane jako szablony w języku ckeditora, które musiałem wczytać. Dynamicznie zmieniam pasek narzędzi w zależności od szerokości okna i dynamicznie zmieniam rozmiar okna. każdy rozmiar przeglądarki otrzymuje własny niestandardowy pasek narzędzi. (XS, SM, MD). Oczekuję, że wszystkie elementy z CKEDITOR mają klasę .ckeditor i mają przypisany identyfikator. Dodatkowo mam funkcję "zapisz" ajax, ale przy braku fokusa kontrola jest automatycznie zapisywana (za pomocą funkcji ajax_post) w razie potrzeby.
Zadzwonię do procedury za pomocą setupCKEdit. dzięki hpique za inspirację do usuwania starego obiektu i tworzenia nowej instancji. w przypadku zmiany wielkości robię to z niewielkim opóźnieniem (resizeTimeout = 200msec), więc nie zmienia się tak często przy zmianie rozmiaru okna.
// ********* 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 **************
Zgodnie [dokumentacji CKEditor] [1], że zrezygnowało pojęcie „motywu”, a tym samym „loadToolbar()” sposobu wspomnianego powyżej, do modyfikacji trochę do pracy z najnowszej wersji CKEditor.
ten pracował dla mnie (CKEditor 4.4.4):
CKEDITOR.editor.prototype.setToolbar = function(tbName) {
\t \t if (!this._.events.themeSpace) {
\t \t CKEDITOR.plugins.registered.toolbar.init(this);
\t \t // causes themeSpace event to be listened to.
\t \t }
\t \t // If a different toolbar was specified use it, otherwise just reload
\t \t if (tbName){
\t \t \t this.config.toolbar = tbName;
\t \t }
\t \t //According to CKEditor documentation
\t \t var obj = this.fire('uiSpace', { space: 'top', html: '' }).html;
\t \t console.log("Received from themespace:");
\t \t console.log(obj);
\t \t // Replace the toolbar HTML
\t \t var tbEleId = this.id +"_" + this.config.toolbarLocation;
\t \t console.log("Editor element id: " + tbEleId);
\t \t var tbEle = document.getElementById(tbEleId);
\t \t //tbEle.innerHTML = obj.html;
\t \t $(tbEle).html(obj);
}Jeśli chcesz w prosty sposób do wymiany pasków w różnych dziedzinach, wszystko co musisz zrobić, to dodać paskami narzędzi do konfiguracji, a następnie wybierz ten, który ma być użyty podczas tworzenia instancji edytora.
W 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
W swojej strony, na której instancji instancji edytora zrobić w ten sposób:
<script>
CKEDITOR.replace('MyObject', {toolbar: 'mycustom2'});
</script>
czyli
$(document).ready(function() {
CKEDITOR.config.customConfig = 'configSimple';
});
//the configSimple.js file is the same folder with config.js
jestem zakładając chcesz dodać przycisk za pomocą pliku wtyczki. Oto jak. Dodaj swój przycisk do interfejsu użytkownika.
editor.ui.addButton('ButtonName', {
label: lang.lockediting.locked,
icon: this.path + 'icons/locked.png',
command: 'lockediting'});
Następnie można nacisnąć przycisk ButtonName na pasku narzędzi.
//Here it is pushed as a new group
editor.config.toolbar.push(['ButtonName']);
Jeśli zaznaczysz console.log (editor.config.toolbar); zobaczysz pasek narzędziowy z obiektem z grupami pasków narzędzi jako tablice [Array [10], Array [2], Array [5]]. [Array [10] oznacza, że w pierwszej grupie jest 10 przycisków. Możesz wcisnąć przycisk w jedną z tych tablic.
Możesz utworzyć pasek narzędzi dynamicznie, jak chcesz. Odkryłem, że najlepszym sposobem jest słuchanie zdarzeń CKE dotyczących tworzenia instancji.
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' ] },
];
});
Chyba zawsze można ponownie zainicjować cały edytor .. – mb21