CKEditor, comment ajouter un bouton personnalisé à la barre d'outils qui appelle une fonction JavaScript

Question

Je voudrais ajouter un bouton à la barre d'outils qui appelle une fonction JavaScript comme Tada ()?

Des idées sur la façon d'ajouter ceci?

Answer 1

Il existe également un moyen agréable d’ajouter le bouton sans créer de plug-in.

html:

 <textarea id="container">How are you!</textarea>
 

javascript:

 editor = CKEDITOR.replace('container'); // bind editor

editor.addCommand("mySimpleCommand", { // create named command
    exec: function(edt) {
        alert(edt.getData());
    }
});

editor.ui.addButton('SuperButton', { // add new button and bind our command
    label: "Click me",
    command: 'mySimpleCommand',
    toolbar: 'insert',
    icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
 

Découvrez comment ça marche ici: DEMO

Answer 2

Je suis dans le processus de développement d'un certain nombre de Plugins personnalisés pour CKEditor et voici mon pack de survie de signets:

• Un StackOverflow post lier et faire parler de plugins tutoriel qui m'a (Tim déjà mentionné ce)
• Un certain nombre de plugins pour FCK et CKEditor qui peut améliorer la compréhension du système
• Le Blog de AlfonsoML, l'un des développeurs, beaucoup d'objets de valeur il y a, par exemple, le Plugin localisation dans CKEditor
• L'Interaction entre les boutons du dialogue et d'une IFrame dialogue, avec la participation de: Garry Yao, l'un des développeurs
• Les forums ne sont pas aussi mauvais que ce qu'ils regardent, il y a quelques joyaux cachés. Assurez-vous chercher là, bien, si pas le premier, alors, au moins, deuxième ou troisième.

Pour votre objectif, je vous recommande de regarder l'un des plugins en _source/plugins répertoire, par exemple le bouton "imprimer". L'ajout d'une simple fonction Javascript est assez facile à faire. Vous devriez être en mesure de reproduire l'impression plugin (prendre le répertoire de _source dans le répertoire plugins/, vous soucier de minification plus tard), le renommer, le renommer chaque mention de "imprimer" à l'intérieur de lui, lui donner le bouton d'un nom propre, vous les utiliser plus tard dans votre barre d'outils de configuration pour inclure le bouton, et d'ajouter votre fonction.

Answer 3

Voir cette URL pour un exemple facile http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/

Il ya un couple de mesures:

1) créer un dossier du plugin

2) enregistrer votre plugin (l'URL ci-dessus, dit de modifier le ckeditor.js fichier NE le faites PAS, il va se casser la prochaine fois qu'une nouvelle version est publiée. Au lieu de modifier le config.js et ajouter une ligne comme

config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere'; 

3) faire un fichier JS appelé plugin.js à l'intérieur de votre dossier plugin Voici mon code

(function(){
//Section 1 : Code to execute when the toolbar button is pressed
var a= {
exec:function(editor){
 var theSelectedText = editor.getSelection().getNative();
 alert(theSelectedText);
}
},

//Section 2 : Create the button and add the functionality to it
b='addTags';
CKEDITOR.plugins.add(b,{
init:function(editor){
editor.addCommand(b,a);
editor.ui.addButton("addTags",{
    label:'Add Tag', 
    icon:this.path+"addTag.gif",
    command:b
    });
}
}); 
})();

Answer 4

Je ne le savais pas auparavant, mais pour le nouveau CKEditor 4, il est clair qu'il faut lire le manuel

Answer 5

Au cas où quelqu'un serait intéressé, j'ai écrit une solution pour cela en utilisant Prototype. Pour que le bouton apparaisse correctement, je devais spécifier extraPlugins: 'ajaxsave' depuis l'appel de méthode CKEDITOR.replace() .

Voici le plugin.js:

 CKEDITOR.plugins.add('ajaxsave',
{
    init: function(editor)
    {
    var pluginName = 'ajaxsave';

    editor.addCommand( pluginName,
    {
        exec : function( editor )
        {
            new Ajax.Request('ajaxsave.php',
            {
                method:     "POST",
                parameters: { filename: 'index.html', editor: editor.getData() },
                onFailure:  function() { ThrowError("Error: The server has returned an unknown error"); },
                on0:        function() { ThrowError('Error: The server is not responding. Please try again.'); },
                onSuccess:  function(transport) {

                    var resp = transport.responseText;

                    //Successful processing by ckprocess.php should return simply 'OK'. 
                    if(resp == "OK") {
                        //This is a custom function I wrote to display messages. Nicer than alert() 
                        ShowPageMessage('Changes have been saved successfully!');
                    } else {
                        ShowPageMessage(resp,'10');
                    }
                }
            });
        },

        canUndo : true
    });

    editor.ui.addButton('ajaxsave',
    {
        label: 'Save',
        command: pluginName,
        className : 'cke_button_save'
    });
    }
});