Come si modifica la barra degli strumenti di CKEditor in modo dinamico (senza utilizzare una barra degli strumenti predefinita)?Modifica dinamicamente la barra degli strumenti di CKEditor
Il CKEditor Developer's Guide indica solo come impostare la barra degli strumenti durante l'inizializzazione.
Sto usando CKEditor 3.6.4.
Seguendo il suggerimento mb21 s' sono riuscito a caricare una nuova barra degli strumenti per reinizializzare l'intero editor di:
CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);
è possibile ricaricare o cambiare la barra degli strumenti, senza ricaricare l'editor, con questo codice:
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
Aggiungendo la funzione l'editor.prototype lo rende un metodo di qualsiasi istanza di editor. L'oggetto del tuo editor è probabilmente CKEDITOR.instances.editor1
L'argomento per loadToolbar è il nome della barra degli strumenti da caricare, oppure se null, la barra corrente viene ricaricata. Il nome della barra degli strumenti corrente si trova in CKEDITOR.instances.editor1.config.toolbar. Se si specifica la barra degli strumenti 'foo', deve essere presente una matrice CKEDITOR.instances.editor1.config.toolbar_foo che definisce il contenuto della barra degli strumenti.
È possibile aggiungere o rimuovere elementi dall'array della barra degli strumenti corrente della variabile di array e quindi farli ricaricare con: edObj.loadToolbar (null);
(problema Meta non influenzare il metodo di cui sopra: Non capisco il motivo per cui gli ascoltatori per l'evento 'themeSpace' vanno via dopo l'editor carica in origine il tema metodo (L'init plugin di barra degli strumenti() fa un. event.on ("themeSpace" ...) ma gli ascolti vanno via dopo che l'editor è stato inizializzato.Non ho visto dove ha fatto un removeListener(). Quindi la chiamata ... toolbar.init (questo) era necessaria per ristabilire quei listener di eventi in modo che il codice di barra degli strumenti avrebbe ricostruito la nuova barra degli strumenti.)
tuo ultimo commento, penso che il codice potrebbe usare qualcosa come fireOnce così gli ascoltatori vengono automaticamente rimossi. – AlfonsoML
Solo un rapido uno.
potrebbe essere necessario aggiungere questa riga alla funzione loadToolbar se r barra degli strumenti contiene i textcolor e/o backgroundColor pulsanti:
//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);
almeno per me questo ha un po 'complicato ....
e per rispondere alla domanda ho pensato di condividere il lavoro codice.
Ho un frammento di testo definito dall'utente - noto come modelli in gergo da ufficio che dovevo caricare. anche dinamicamente cambiare la barra degli strumenti in base alla larghezza della finestra, e ridimensionare dinamicamente il ridimensionamento della finestra. ogni dimensione del browser ottiene la propria barra degli strumenti personalizzata. (XS, SM, MD). mi aspetto che tutti gli elementi con un CKEDITOR abbiano una classe di .ckeditor e che abbiano un ID assegnato. Inoltre ho impostato su sfocatura ajax set up del gestore, quindi in caso di perdita di messa a fuoco il controllo viene salvato automaticamente (tramite la funzione ajax_post), se necessario.
Io chiamo la procedura utilizzando setupCKEdit. grazie a hpique per l'ispirazione di rimuovere il vecchio oggetto e creare una nuova istanza. sull'evento di ridimensionamento lo faccio con un leggero ritardo (resizeTimeout = 200msec), quindi non spara così spesso mentre si cambia la dimensione della finestra.
// ********* 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 **************
Secondo [documentazione di CKEditor] [1] hanno rinunciato devono essere modificati un po 'di lavorare con la versione più recente del concetto di 'tema' e quindi la 'loadToolbar()' metodo di cui sopra CKEditor.
questo ha funzionato per me (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);
}Se volete un modo semplice per scambiare le barre degli strumenti in diverse aree, tutto quello che dovete fare è aggiungere il barre degli strumenti sulla configurazione, quindi seleziona quella che vuoi quando installi l'editor.
In 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
Nella pagina in cui si crea un'istanza di un'istanza di editor di farlo in questo modo:
<script>
CKEDITOR.replace('MyObject', {toolbar: 'mycustom2'});
</script>
Oppure:
$(document).ready(function() {
CKEDITOR.config.customConfig = 'configSimple';
});
//the configSimple.js file is the same folder with config.js
Io parto dal presupposto che si voglio aggiungere pulsante tramite il file plugin. Ecco come Aggiungi il tuo pulsante a ui.
editor.ui.addButton('ButtonName', {
label: lang.lockediting.locked,
icon: this.path + 'icons/locked.png',
command: 'lockediting'});
Quindi è possibile premere ButtonName sulla barra degli strumenti.
//Here it is pushed as a new group
editor.config.toolbar.push(['ButtonName']);
Se si controlla console.log (editor.config.toolbar); vedrai nella barra degli strumenti un oggetto con gruppi di barre degli strumenti come array [Array [10], Array [2], Array [5]]. [Matrice [10] significa che ci sono 10 pulsanti nel primo gruppo. Puoi spingere il tuo pulsante in uno di quegli array.
È possibile creare la barra degli strumenti in modo dinamico come desiderato. Ho trovato che l'approccio migliore è ascoltare gli eventi CKE riguardanti la creazione di istanze.
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' ] },
];
});
Credo che si potrebbe sempre reinizializzare l'intero editor di .. – mb21