How to add a custom button to the toolbar that calls a JavaScript function

Question

I d like to add a button to the toolbar that calls a JavaScript function like Tada     Any ideas on how to add this

User · Answer

You ll need to create a plug-in  The documentation for CKEditor is very poor for this  especially since I believe it has changed significantly since FCKEditor  I would suggest copying an existing plug-in and studying it  A quick google for  CKEditor plugin  also found this blog post

User · Answer

This article may be useful too http   mito-team com article 2012 collapse-button-for-ckeditor-for-drupal  There are code samples and step-by-step guide about building your own CKEditor plugin with custom button

User · Answer

There might be Several plugins but one may use CSS for creating button  First of all click on Source button mentioned in Editor then paste the button code over there  As I use CSS to create button and added href to it    lt p dir  ltr  style  text-align center  gt  lt a href  https   play google com store apps details id com mobicom mobiune amp hl en  style  background-color  0080ff  border  none color  white padding  6px 20px text-align  center text-decoration  none display  inline-block border-radius  8px font-size  15px  font-weight  bold   gt Open App lt  a gt  lt  p gt    This is the Button Written Open App over It  You May change the Color as i am using  0080ff  Light Blue

User · Answer

See this URL for a easy example http   ajithmanmadhan wordpress com 2009 12 16 customizing-ckeditor-and-adding-a-new-toolbar-button   There are a couple of steps   1  create a plugin folder  2  register your plugin  the URL above says to edit the ckeditor js file DO NOT do this  as it will break next time a new version is relased  Instead edit  the config js and add a line like so  config extraPlugins    pluginX pluginY yourPluginNameHere      3  make a JS file called plugin js inside your plugin folder Here is my 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

User · Answer

You can add the button image as follows   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           Here is the actual plugin with all steps described

User · Answer

If you have customized the ckeditor toolbar then use this method    x000D   x000D  var editor   CKEDITOR replace  da html     x000D    disableNativeSpellChecker  false  x000D    toolbar     x000D        name   clipboard   x000D        items    Cut    Copy    Paste    PasteText    PasteFromWord    -    Undo    Redo   x000D         x000D           x000D        x000D        name   basicstyles   x000D        items    Italic   x000D         x000D        x000D        name   paragraph   x000D        items    BulletedList   x000D         x000D        x000D        name   insert   x000D        items    Table   x000D         x000D           x000D        x000D        name   styles   x000D        items    Styles    Format    Font    FontSize   x000D         x000D        x000D        name   colors   x000D        items    TextColor    BGColor   x000D         x000D        x000D        name   tools   x000D        items    Maximize    saveButton   x000D         x000D      x000D      x000D   x000D  editor addCommand  mySaveCommand        create named command x000D    exec  function edt    x000D      alert edt getData     x000D      x000D      x000D   x000D  editor ui addButton  saveButton        add new button and bind our command x000D    label   Click me   x000D    command   mySaveCommand   x000D    toolbar   insert   x000D    icon   https   i stack imgur com IWRRh jpg s 328 amp g 1  x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   cdn ckeditor com 4 5 7 standard ckeditor js  gt  lt  script gt  x000D   x000D   lt textarea id  da html  gt How are you  lt  textarea gt  x000D   x000D   x000D    Working code in jsfiddle due to some security issue of stackoverflow  http   jsfiddle net k2vwqoyp

User · Answer

I am in the process of developing a number of custom Plugins for CKEditor and here s my survival pack of bookmarks    A StackOverflow post linking to and talking about a plugins tutorial that got me started  Tim Down already mentioned this  A number of ready-made plugins for FCK and CKEditor that may improve one s understanding of the system The Blog of AlfonsoML  one of the developers  lots of valuable stuff there  e g  Plugin localization in CKEditor Interaction between dialog buttons and a IFrame dialog  with input from Garry Yao  one of the developers  The forums are not as bad as they look  there are some hidden gems there  Make sure you search there  well  if not first  then at least second or third     For your purpose  I would recommend look at one of the plugins in the  source plugins directory  for example the  print  button  Adding a simple Javascript function is quite easy to achieve  You should be able to duplicate the print plugin  take the directory from  source into the actual plugins  directory  worry about minification later   rename it  rename every mention of  print  within it  give the button a proper name you use later in your toolbar setup to include the button  and add your function

User · Answer

CKEditor 4  There are handy tutorials in the official CKEditor 4 documentation  that cover writing a plugin that inserts content into the editor  registers a button and shows a dialog window    Creating a CKEditor 4 Plugin in 20 Lines of Code Creating a Simple CKEditor Plugin   If you read these two  move on to Integrating Plugins with Advanced Content Filter   CKEditor 5  So far there is one introduction article available   CKEditor 5 Framework  Quick Start - Creating a simple plugin

User · Answer

In case anybody is interested  I wrote a solution for this using Prototype  In order to get the button to appear correctly  I had to specify extraPlugins   ajaxsave  from inside the CKEDITOR replace   method call    Here is the 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

User · Answer

Also there is a nice way allowing one to add the button without creating plugin   html    lt textarea id  container  gt How are you  lt  textarea gt    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 amp s 16        Check out how it works here  DEMO

[javascript] How to add a custom button to the toolbar that calls a JavaScript function?

Examples related to javascript

Examples related to ckeditor