Comment ajouter un bouton personnalisé à la barre d'outils qui appelle une fonction JavaScript?
J'aimerais ajouter un bouton à la barre d'outils qui appelle une fonction JavaScript telle que Tada()?
Des idées sur la façon d'ajouter ceci?
Je suis en train de développer un certain nombre de plugins personnalisés pour CKEditor et voici mon pack de survie de marque-pages:
- n article de StackOverflow faisant le lien avec un tutoriel de plugins qui m'a permis de démarrer (Tim Down l'a déjà mentionné)
- A nombre de plugins prêts à l'emploi pour FCK et CKEditor pouvant améliorer la compréhension du système
- Le blog de AlfonsoML , l’un des développeurs, contient de nombreuses informations utiles, par exemple. Localisation du plugin dans CKEditor
- Interaction entre des boutons de dialogue et un dialogue IFrame , avec la contribution de Garry Yao, l'un des développeurs
- Les forums ne sont pas aussi mauvais qu'ils en ont l'air, il y a quelques trésors cachés là. Assurez-vous de chercher là-bas, eh bien, sinon en premier, puis au moins en deuxième ou en troisième.
Pour vous aider, je vous recommande de regarder l’un des plugins du _source/plugins répertoire, par exemple le bouton "imprimer". Ajouter une simple fonction Javascript est assez facile à réaliser. Vous devriez être capable de dupliquer le plugin print (prenez le répertoire de _source dans le répertoire/plugins lui-même, vous inquiétez pour une minification ultérieure), renommez-le, renommez chaque mention "print" qu'il contient, donnez au bouton le nom que vous utiliserez plus tard dans la configuration de votre barre d’outils pour inclure le bouton et ajouter votre fonction.
Il existe également un moyen agréable permettant 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 cela fonctionne ici: DÉMO
Voir cette URL pour un exemple simple http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/
Il y a quelques étapes:
1) créer un dossier de plugin
2) enregistrez votre plugin (l’URL ci-dessus vous dit d’éditer le fichier ckeditor.js, ne le faites pas car cela casserait la prochaine fois qu'une nouvelle version serait relasée. Éditez plutôt le fichier config.js et ajoutez une ligne comme suit:
config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere';
3) créer un fichier JS appelé plugin.js dans votre dossier de 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
});
}
});
})();
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' À l'intérieur de 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'
});
}
});
CKEditor 4
La documentation officielle de CKEditor 4 contient des tutoriels pratiques couvrant l’écriture d’un plugin insérant du contenu dans l’éditeur, enregistrant un bouton et affichant une fenêtre de dialogue:
Si vous lisez ces deux, passez à Intégration de plug-ins avec Advanced Content Filter .
CKEditor 5
Jusqu'à présent, un article d'introduction est disponible:
Framework CKEditor 5: Prise en main - Création d’un plugin simple
Vous pouvez ajouter l'image du bouton comme suit:
CKEDITOR.plugins.add('showtime', //name of our plugin
{
requires: ['dialog'], //requires a dialog window
init:function(a) {
var b="showtime";
var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
c.canUndo=true;
//add new button to the editor
a.ui.addButton("showtime",
{
label:'Show current time',
command:b,
icon:this.path+"showtime.png" //path of the icon
});
CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
}
});
Ici est le plugin actuel avec toutes les étapes décrites.
Vous aurez besoin de créer un plug-in. La documentation de CKEditor est très pauvre pour cela, d’autant plus que je pense que la situation a considérablement changé depuis FCKEditor. Je suggérerais de copier un plug-in existant et de l'étudier. Un rapide google pour "plugin CKEditor" a également été trouvé cet article de blog .
Cet article peut être utile aussi http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
Il existe des exemples de code et un guide pas à pas sur la construction de votre propre plug-in CKEditor avec un bouton personnalisé.