Wysiwyg Editing Control for Dynamics NAV 2013 and 2015

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.

Share thisShare on FacebookTweet about this on TwitterShare on RedditShare on Google+Share on LinkedIn

38 thoughts on “Wysiwyg Editing Control for Dynamics NAV 2013 and 2015”

  1. Thanks for sharing this. Unfortunately for me pressing Enter to add a break does work only in the Web Client, but not in the Windows Client. Did you come across that problem?

  2. When I try to run a page where I’ve added the component, I get the following error: “Method ‘Page50001.Editora58a58ControlAddInReady(number of arguments: 0), with matching argument types.’ not found.”

    I noticed the “ControlAddInReady” trigger is not created.

    Any ideas?

  3. Hello,

    I have a problem with this editor.

    Every Time I want to compile the Page 72001, i got the following error ina demo database of NAV 2015:

    —————————
    Microsoft Dynamics NAV Development Environment
    —————————
    Could not load type ‘EriksTinyEditorControl;PublicKeyToken=c87fd1af2bffc7dc’.
    —————————
    OK
    —————————

    In a demo database 2013 R2, i get the Page compiled, after i set the permissions for everyone with all permissions.

    But if I open the Page in 2013 R2 i got the following Error:

    Could not locate the control add-in library for “EriksTinyEditorControl;PublicKeyToken=c87fd1af2bffc7dc, The page contains a control add-in that is not permitted. Contact your system administrator”.

    A restart from the NST Instance doesn’t fix it.

    Thanks for help,
    db3rg

  4. Hello
    We can not currently install the DLL in question under NAV2015. Under NAV2013 everything is fine. How could we get stuck there? Are the resources planned for NAV2015? Thanks for your help

  5. Page 72001 HTML Editor page giving error on compile.

    Could not load type ‘EriksTinyEditorControl;PublicKeyToken=c87fd1af2bffc7dc’.

    This error is only on Nav 2015. It’s working fine on Nav 2013R2.
    Could you provide any solution?

  6. As you described I have placed the file TinyEditor.DLL in the folders
    C:\Program Files (x86)\Microsoft Dynamics NAV\80\RoleTailored Client\Add-ins
    and
    C:\Program Files\Microsoft Dynamics NAV\80\Service\Add-ins

  7. I have still problems when I try to install the objects.

    When I import the ZIP-file in the registration procedure, I receive the following error from NAV:
    Invalid object name ‘dbo.Add-in’
    Any suggestion of what this means, and how to solve it?

      1. Hi,

        First of all, thank you for your work.

        I have the same problem that everybody installing the add-in under NAV 2015. Under 2013 R2 it works fine.

        I know that the add-in is written in javascript/hmtl, but I think that the problem has to be with the Framework Extensibility

        “add-in Microsoft.Dynamics.Framework.UI.Extensibility.dll”

        http://vjeko.com/control-add-ins-version-compatibility

        Maybe recompiling the add-in with the right Framework Extensibility (2015/2016) will make it work.

  8. Erik,

    I’m pleased to report I’ve been able to get this control working on NAV 2016 without much issue, however I’ve got a couple bugs with the control itself that I was wondering about:

    1. If I enter text “ABC”, save the text, then go back into the control and delete the “C”, and re-open the control, the text still reads ABC. If I do the same but instead of deleting the C replace it with a D, the text will read ABC. To me this seems like the text buffer isn’t being reset before you save the new data, and it’s merely copying the values over the old text, which makes delete impossible.

    2. The “Bold” command works great when applying bold, but it doesn’t appear to work when trying to remove bold. Underline, italic and strike through all appear to work just fine, but not bold.

    Thanks again for the nifty control. Other than the issues above it works quite well.

    I’m also running a bit of code on the resulting text that strips out HTML and character entities (to save as standard text), but the lack of buffer reset sometimes causes issues if, for instance, a   is overwritten so just the & is excluded, and thus my code can’t recognize the character entity.

      1. 1. Yes. I’m actually using your page provided in the sample, just renumbered to the 50000 range.

        2. I’m not actually using a web client. This is in the base NAV.

        1. 1. Hmm.. Strange, because the editor.post() (look in script.js) should take care of this ?

          2. Hmm.. so it IE7 🙁 – Do you know about FEATURE_BROWSER_EMULATION ?

  9. 1. I’ll do some digging just to make sure it isn’t a problem on my end when I set the variables. Looking at the script.js, I agree that your code should work, as you’re declaring the variable right before you feed the data, so I don’t see how buffer initialization should fail.

    2. I did not. What do you suggest setting the key to?

  10. More information from experimentation on point 1.

    In the OnAction from where the code is changed, I had to add an additional line to clear the blob field before overwriting it. I haven’t tried this in 2015 so I don’t know if this is a feature of 2016 or if it always existed, but in the code after the call to the HTML page “GetText” I had to specifically clear the blob field as shown below:

    HtmlPage.RUNMODAL();
    Txt2 := HtmlPage.GetText();
    IF Txt2 Txt THEN
    IF CONFIRM(‘Save changes?’) THEN BEGIN
    // New line of code immediately below to reset the blob field
    CLEAR(Rec.Description);
    Rec.Description.CREATEOUTSTREAM(OutS);
    StreamWriter := StreamWriter.StreamWriter(OutS);
    StreamWriter.Write(Txt2);

    In other words, it isn’t an issue with your control but rather with the way NAV appears to not be correctly Initializing the outstream from the blob. My apologies for casting doubt on your control.

    On point 2, I’ll look forward to your post whenever you get to it, thank you for your time.

        1. Dear Erik,

          I’ve changed the registry key to run Internet Explorer 11. Unfortunately still something goes wrong when you put the first word in the editor in Bold, Italic or Underlined and remove the editing afterwards. Sometimes it works. My idea is something is done with the first letter in the editor.
          It would be very nice if there would be a solution for this issue.

          Thank you very much for this nice piece of software.

  11. Hi,
    It is a bit unclear to me how to fix the issue with generating new list elements when pressing the Enter key.
    Even though pressing SHIFT + ENTER would move the cursor to the next line, it would still not create a proper line break or initialize a list element. Is it possible to create an event listener for Keypress events ? If so, how ?

      1. Yes, pretty sure.
        I placed the AddIn on a client as well, it works perfect on that one, but not from running on the servers client.
        Could it be a framework issue or?

  12. the download link above for htmledit does not work anymore. the correct link is “https://www.hougaard.com/wp-content/uploads/2014/11/HTMLedit.zip”.

    addition to secure connection via https: that control does not work with https. you get then a “mixed content” warning in IE. in other browsers it is not shown at all. the reason is the link in file manifest.xml in archive EriksTinyEditorControl.zip. expand the xml file and edit it. then replace the unsecure scripturl link “http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js” by “https://code.jquery.com/jquery-1.9.1.min.js”. saved the changed file, copy it back to the archive file EriksTinyEditorControl.zip. replace the content file in the control-addin record with the new version.

Leave a Reply