web-dev-qa-db-fra.com

Changer la barre d'outils CKEditor de manière dynamique

Comment modifier la barre d'outils CKEditor de manière dynamique (sans utiliser de barre d'outils prédéfinie)?

CKEditor Guide du développeur vous indique uniquement comment définir la barre d'outils lors de l'initialisation.

J'utilise CKEditor 3.6.4.

ckeditor
14
hpique

Suite à la suggestion de mb21 , j'ai réussi à charger une nouvelle barre d'outils en réinitialisant tout l'éditeur:

CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);
9
hpique
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);
7
shasi kanth

Vous pouvez recharger ou modifier la barre d’outils sans recharger l’éditeur, avec le code suivant:

  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

L'ajout de la fonction the editor.prototype en fait une méthode pour toute instance de l'éditeur. Votre objet d'édition est probablement CKEDITOR.instances.editor1

L'argument de loadToolbar est le nom de la barre d'outils à charger ou, si la valeur est null, la barre d'outils actuelle est rechargée. Le nom de la barre d'outils actuelle est dans CKEDITOR.instances.editor1.config.toolbar. Si vous spécifiez la barre d'outils 'foo', un tableau CKEDITOR.instances.editor1.config.toolbar_foo doit être créé pour définir le contenu de la barre d'outils.

Vous pouvez ajouter ou supprimer des éléments du tableau de variables de tableau actuel de la barre d’outils, puis le recharger avec: edObj.loadToolbar (null);

(Problème méta n'affectant pas la méthode ci-dessus: je ne comprends pas pourquoi les écouteurs de l'événement 'themeSpace' disparaissent après que l'éditeur a initialement chargé le thème. (La méthode init () du plugin de barre d'outils effectue un événement.on ("themeSpace" ...) mais l'écoute disparaît après que l'éditeur ait été initialisé. Je ne voyais pas où il effectuait removeListener (). Donc, l'appel ... toolbar.init (this) était nécessaire pour rétablir les écouteurs d'événement de sorte que la barre d'outils le code reconstruirait la nouvelle barre d’outils.)

3
Ribo

pour moi au moins cela s'est un peu compliqué ....

et pour répondre à la question, je pensais partager le code de travail.

j'ai des extraits de texte définis par l'utilisateur - appelés modèles dans ckeditor jargon - je devais les charger. Je modifie également dynamiquement la barre d'outils en fonction de la largeur de la fenêtre et le redimensionne de manière dynamique lors du redimensionnement de la fenêtre. chaque taille de navigateur obtient sa propre barre d'outils personnalisée. (XS, SM, MD). Je suppose que tous les éléments avec un CKEDITOR ont une classe de .ckeditor et qu’ils ont un identifiant attribué. De plus, j'ai un gestionnaire de sauvegarde sur le flou ajax mis en place, donc lors d'une perte de focus, le contrôle est automatiquement enregistré (via la fonction ajax_post) si nécessaire.

J'appelle la procédure à l'aide de setupCKEdit. Merci à hpique de nous avoir inspiré pour supprimer l’ancien objet et créer une nouvelle instance. sur l'événement de redimensionnement, je le fais avec un léger retard (resizeTimeout = 200 ms), de sorte qu'il ne se déclenche pas aussi souvent lors du changement de la taille de la fenêtre.

// ********* 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 **************
1
pgee70

Juste un rapide.

Vous devrez peut-être ajouter cette ligne à la fonction loadToolbar si votre barre d'outils contient les boutons textcolor et/ou backgroundcolor:

//Need to call init for colorbutton so that we can re-draw the color buttons
CKEDITOR.plugins.registered.colorbutton.init(this);
1
user2173985

Ou:

   $(document).ready(function() {
      CKEDITOR.config.customConfig = 'configSimple';
   }); 

   //the configSimple.js file is the same folder with config.js
1
ThangTD

Vous pouvez créer la barre d’outils de façon dynamique à votre guise. J'ai trouvé que la meilleure approche consiste à écouter les événements CKE concernant la création d'instances.

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' ] },
    ];
});
0
Mitja Gustin

Si vous voulez un moyen simple d’échanger des barres d’outils dans différents domaines, il vous suffit d’ajouter les barres d’outils à la configuration, puis de sélectionner celle de votre choix lors de l’instanciation de l’éditeur.

Dans 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

Dans votre page où vous instanciez une instance de l'éditeur, procédez de la manière suivante:

<script>
    CKEDITOR.replace('MyObject', {toolbar: 'mycustom2'});
</script>
0
jnl

Je suppose que vous voulez ajouter un bouton via un fichier plugin. Voici comment. Ajoutez votre bouton à l'interface utilisateur.

editor.ui.addButton('ButtonName', {
  label: lang.lockediting.locked,
  icon: this.path + 'icons/locked.png',
  command: 'lockediting'});

Ensuite, vous pouvez pousser ButtonName à la barre d'outils.

//Here it is pushed as a new group
editor.config.toolbar.Push(['ButtonName']);

Si vous vérifiez console.log (editor.config.toolbar); vous verrez que la barre d’outils est un objet avec des groupes de barres d’outils sous forme de tableaux [Array [10], Array [2], Array [5]]. [Tableau [10] signifie qu'il y a 10 boutons dans le premier groupe. Vous pouvez appuyer sur votre bouton dans l’un de ces tableaux.

0
Guest