2018/02/25

Adding a CKEditor plugin to DotNetNuke 8.0.4



This is a little visual walkthrough to explain how to add a custom plugin to a DNN website. It might not be the optimal way, but it's simple and it works.

First, you have to extract the plugin to the ".\Providers\HtmlEditorProviders\DNNConnect.CKE\js\ckeditor\4.5.3\plugins\" folder, just like it's usually explained for any plugin.

Now we must instruct DNN to load it. The js settings come from DNN itself, so go to Site Settings

Now open Site Behavior, More, Open HTML Editor Manager
 Now open the Editor settings tab
Scroll down to the ExtraPlugins field,



 add the new plugin and save the changes

Now the plugin itself is enabled, although the toolbar doesn't show any new button because it uses the customized toolbars from DNN. I haven't been able to find out if there's a way to do this next step better, but what I've found that works is to edit ".\Portals\0\Dnn.CKToolbarButtons.xml" and then add your button(s) following the pattern
In the ToolbarName put the name of the command that you want to use (it should be the CamelCase name of the plugin, but there might be cases where a plugin has more than one plugin, so check that)
For the ToolbarIcon you can either copy it to the Images folder or reference it like I've done directly from the plugin folder


  <toolbarbutton>
    <toolbarname>ImageMaps</toolbarname>
    <toolbaricon>../plugins/imagemaps/icon.png</toolbaricon>
  </toolbarbutton>

Now load the Custom Toolbars tab from in the Editor settings and you should have the new button available for you
Put the button wherever you think fits better and save it.
Now when you load again the editor, the plugin should be ready to use
I hope that this is useful for anyone that is interested.

No comments: