Wysiwyg Editing Control for Dynamics NAV 2013 and 2015

UPDATE: If you need a control for Business Central in AL look here

In Dynamics NAV 2013 R2 and 2015 there is a new format for control add-ins.  This control add-in is actually done in HTML/Javascript so it will work in both clients.

When running in the Role Tailored Client, a WebBrowser Controls is created for the control, one of the main challenges, is that the WebBrowser Control insist on being a Internet Explorer 7 browser, witch reduces the level of JavaScript that can be used and excludes all HTML5 based controls.

The control here, is a modified version of the Tiny Editor presented here:
http://www.scriptiny.com/2010/02/javascript-wysiwyg-editor/
Download the ZIP here:

HTMLedit

Inside the ZIP file you wil find:
EriksTinyEditorControl.zip (ZIP file to import into the Control Add-ins page.
TinyEditor_NAV.DLL (DLL file that need to be placed in the Addins folder, both in the client and on the server).
HTML Editor 2013R2 Demo.fob – A couple of demo objects to show the functionality

This is how it looks in the Role Tailored Client:

html-09 html-10

Install the interface in the addins folder

Unzip the TinyEditor_NAV.DLL into the Addins folder in the service tier, and on the development client (Not nessesary in 2015)

Register the controll add-in

You need to register the ZIP file in the  control add-ins register, if you fail to do this, you will get an error looking like this when starting a page with the control add-in.

Open page 9820 or search for control. It will looks like this, with a list over the controls you currently have installed in the database.

html-01

Create a new, give it EriksTinyEditorControl as name and c87fd1af2bffc7dc as public token.

After creating the line, you must import the  ZIP file – press import and select the EriksTinyEditorControl.zip file.

Now your database is ready to use the control add in.

Use the control in a Page

Create a simple field in a page, and select the control in the properties (In the ControlAddIn property)

html-03 html-02

Give the field a name (“Editor”)

To load a value into the editor, use the CurrPage.Editor.LoadHtml(Txt) method.
html-04

To get the value back from the editor is a bit more complicated since a javascript control is controlled asynchronous, so you must use the CurrPage.Editor.RequestSave() method, and the use the Editor::SaveCompleted(HTML : Text) event. In the example objects, the “Save button will trigger the Editor::SaveCompleted event.