Is there a Editor Javascript API document?

James Hurst
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
Per Hemmingson
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
James Hurst
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
James Hurst
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
James Hurst
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