Is there a Editor Javascript API document?

Member since: 2007
 

Hi,

 I'm trying to build editor plugin to allow users to create an address block using the VCard microformat.

I have been following the Create an editor Plug-In tutorial (http://sdk.episerver.com/library/CMS5/Developers%20Guide/How%20To/Create%20an%20editor%20Plug-in.htm?id=24896), however there are things I want to do that aren't descibed in here.

I was wondering if the javascript API for the editor environment is documented anywhere?

There must be loads of JavaScript functions available that provide alot of the functionality that I will want, however, I don't really want to have to debug the existing editor functionality to fnd it. 

 Thanks,

 Jim

#27285 Jan 23, 2009 11:39
  • Member since: 2006
     

    Hi,

    There is not a specific Javascript document except for what you find in the sdk.

    Our Javascript developer wrote this article which helps a bit,

    http://world.episerver.com/en/Articles/Items/Modal-Dialogs-in-the-EPiServer-UI-for-non-IE-Browsers/

    Otherwise I would recommend searching for that info, looking at our blog posts and the rest of the articles at this website.

    We know its a little bit difficult to find the correct information and we are continuing working on to improving it. :-)

     

     

     

    #27290 Jan 23, 2009 16:25
  •  

    Hi,

    Sadly there is no documentation on the Editor javascript API, I would have loved it when I started at EPiServer. However I might be able to push you in the right direction if you describe what you want to do and what you are after.

    /Regards

    Henrik

    #27293 Edited, Jan 23, 2009 17:14
  • Member since: 2007
     

    I was trying to create a HTML construct;

    <p class="vcard">
    <span class="fn org">Example Corp</<span><br />
    <span class="adr">
    <span class="street-address">123 Somewhere Road</span><br />
    <span class="locality">Sunderland</span><br />
    <span class="country-name">United Kingdom</span>
    </span>
    </p> 

     from a editor plugin and then re-populate the control if the editor selected some or all of the HTML.

    I used this to select the parent node of the selected content:

    var range = plugin.editorDocument.selection.createRange();

    parent = range.parentElement();

    while (parent.className != "vcard")
    {
    parent = parent.parentElement;
    if (parent.tagName == "body")
    {
    parent = null;
    break;
    }
    }

    And then iterated through the nodex within the parent node to get the values. When I started I was wondering if there was a simpler way? I didn't know if there where eisting JavaScript functions available within the editor that would have done alot of what I wanted to do?

    Got it working now, but I'm sure I've repeated alot of code that already exists.

    Thanks,

     Jim.

    #27297 Jan 23, 2009 17:41
  • Member since: 2007
     

    I have now re factored my editor plugin to follow the new CMS 5 way of doing things described in the article Modal Dialogs in the EPiServer UI for Non-IE Browsers (http://world.episerver.com/en/Articles/Items/Modal-Dialogs-in-the-EPiServer-UI-for-non-IE-Browsers/).

    I have one small thing, how do you get the call to EPi.AddEventListener to work? I have added a script tag pointing to /UI/javascript/system.js, which is loading correctl, but that method does not seam to exist. Also, when I look at the source of the system.js, there is no definition for AddEventListener either.

    The editor window inherits straight from System.Web.UI.Page.

    Am I missing something? Is there another js file I need to include?

    Thanks,

     Jim.

    #27301 Jan 23, 2009 18:39
  •  

    Hi!

    The needed javascript files (and css for cms look) will automatically be registered if you use UI/MasterPages/EPiServerUI.Master master page file and inherit from EPiServer.UI.SystemPageBase.

    If you want to register the files yourself the needed files are: 

    1. UI/javascript/system.js
    2. UI/javascript/system.aspx (which really is a javascript file but with server side code)
    3. Util/javascript/EPiServerScriptManager.js (which includes EPi.AddEventListener)

    About editor API: There really aren't that much helper functions in the API. There is one file Util/Editor/Javascript/HtmlTextBox2_API.js which contains some code you might find useful. But since it really has no comments(!?) it is a bit hard to see what to use. I had a hard time myself to understand what was going on...

    I have made some additions to this file in EPiServer CMS 5 to overcome some of the bugs in the old editor (and/or MS HTML Edit bugs) and you might find EPiGetRangeParent useful since range.parentElement() returns wrong parentElement when the user has made certain types of selections.

    /Regards
    Henrik

    #27349 Edited, Jan 27, 2009 11:08
  • Member since: 2007
     

    Great, got it working now.

    It was the UI/javascript/system.js file I was missing.

     

    Thanks,

    Jim

     

    #27356 Jan 27, 2009 13:13