{"id":1189,"date":"2010-12-10T21:58:37","date_gmt":"2010-12-10T21:58:37","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=1189"},"modified":"2010-12-10T22:00:42","modified_gmt":"2010-12-10T22:00:42","slug":"ckeditor-custom-dialog","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2010\/12\/10\/ckeditor-custom-dialog\/","title":{"rendered":"CKEditor – custom dialog"},"content":{"rendered":"

The CKEditor<\/a> is a great WYSIWYG and the best thing is that you are able to customize the interface to have buttons on the toolbars, here is a way that I created a custom button with custom image attached to it.<\/p>\n

The editor is created with <\/p>\n

\r\nvar editor = CKEDITOR.replace( 'Content');\r\n<\/pre>\n
So from now on in the variable editor is linked to the CKEditor instance, to setup the plugins to load when the CKEditor is created you call the pluginsLoaded function<\/p>\n
\r\n editor.on( 'pluginsLoaded', function( ev )\r\n         {\r\n           if ( !CKEDITOR.dialog.exists( 'statisticsDialog' ) )\r\n                 CKEDITOR.dialog.add( 'statisticsDialog','\/statistics.js');\r\n           \/\/ Register the command used to open the dialog.\r\n           editor.addCommand( 'statisticsAddCmd', new CKEDITOR.dialogCommand('statisticsDialog' ) );\r\n           editor.ui.addButton( 'Statistics',\r\n                    {\r\n                        label : 'Statistic',\r\n                        command : 'statisticsAddCmd',\r\n                        icon : '\/statistics_small.png',\r\n                    } );\r\n});\r\n<\/pre>\n
The first part will check to make sure that there is not dialog already created with the same name, and if not then load the javascript file that is the custom built dialog. The second part is adding the command (the button clicked) to be linked to the custom dialog, and the third part is to add the actual button to the user interface (editor.ui).  The addButton function links to the command to bring up the custom dialog.<\/p>\n
Here is the custom dialog code that will be called when the user interface button is clicked.<\/p>\n
\r\nCKEDITOR.dialog.add( 'statisticsDialog', function( editor )\r\n{\r\n      \/\/ Load data asynchronously.\r\n       return {\r\n               title : 'Pick a statistic',\r\n               minWidth : 400,\r\n               minHeight : 200,\r\n               onOk : insertOntoEditor,\r\n               contents : [\r\n                       {\r\n                               id : 'tab1',\r\n                               label : 'First Tab',\r\n                               title : 'First Tab',\r\n                               elements :[\r\n                                       {  id : 'graphselect',\r\n                                               type : 'select',\r\n                                               items : [ [\"option1\", \"link to image\"] ] ,\r\n                               }]\r\n                       }\r\n               ]\r\n       };\r\n} );\r\n<\/pre>\n
The dialog, will load up a screen and have a one drop down box that will allow the user to choose from the options (will you need to insert more options, or dynamic created options if you wanted to) and once the OK button is clicked (onOK) it will call this function below<\/p>\n
\r\nfunction insertOntoEditor()\r\n{\r\n       elem = this.getContentElement('tab1','graphselect');\r\n       value = elem.getValue();\r\n       if (value != -1)\r\n       {\r\n               var writer = new CKEDITOR.htmlWriter();\r\n               var fragment = CKEDITOR.htmlParser.fragment.fromHtml( '' );\r\n               fragment.writeHtml( writer )\r\n\r\n               \/\/ need to wrap up the graph image insertion into the ckeditor\r\n               CKEDITOR.instances.Content.insertHtml(writer.getHtml());\r\n       }\r\n}\r\n<\/pre>\n
This will basically insert some code into the CKEditor from the drop down box, the “link to image” you will need to insert a link for the insertion.<\/p>\n","protected":false},"excerpt":{"rendered":"
The CKEditor is a great WYSIWYG and the best thing is that you are able to customize the interface to have buttons on the toolbars, here is a way that I created a custom button with custom image attached to it. The editor is created with var editor = CKEDITOR.replace( ‘Content’); So from now on … Continue reading CKEditor – custom dialog<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,17],"tags":[277,278,280],"class_list":["post-1189","post","type-post","status-publish","format-standard","hentry","category-javascript","category-php","tag-ckeditor","tag-custom","tag-dialog"],"_links":{"self":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/1189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=1189"}],"version-history":[{"count":2,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/1189\/revisions"}],"predecessor-version":[{"id":1192,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/1189\/revisions\/1192"}],"wp:attachment":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=1189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=1189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=1189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}