Implementing the FCKEditor

One of our customers really needed an editor that would work for FireFox when they are Mac-users, so I tried to implement the FCKEditor which EPiServer has an howto about: http://world.episerver.com/Download/Code-Samples/Editor-Tools/Editor-for-non-IE-browsers/.

I followed the steps in the article, but the editor only loaded about half of the times. Wierd, so I started debugging. No luck at all. Tried to deploy the project to our test-server and it worked all of the time.

Some problems/wanted features that I bumped into was:

  1. Got a Javascript error when trying to insert an EPiServer page
  2. The document tab was selected when i wanted to insert a EPiServer page
  3. When the property had no toolbar-options choosen(in admin) it still showed the rich text editor

Well, I really needed this to work ASAP so i made some modification to the EPiServer-FCKEditor project.

Solutions
1. In the WrapServerObjectBrowser.aspx I changed the content for the SelectPage-panel to this:

<script type="text/javascript"><!--
function OpenGetPageDialog(url, selectedpage, value, text, lang)
{
EPi.CreatePageBrowserDialog(url, selectedpage,'False','False', text, value, lang, enddialog, null);
}
// --></script>
<input id="PageAddText" disabled="disabled" type="text" Runat="server" />
<input type="button" value="Select page" onclick="OpenGetPageDialog('<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/pagebrowser.aspx") %>','', '<%= PageUrlValue.ClientID %>', '<%= PageAddText.ClientID %>', 'en');" />
<script type="text/javascript"><!--
OpenGetPageDialog('<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/pagebrowser.aspx") %>','', '<%= PageUrlValue.ClientID %>', '<%= PageAddText.ClientID %>', 'en');
// --></script>

2. In the WrapServerObjectBrowser.aspx.cs OnInit-method I added these lines

if (!IsPostBack)
{
if (Request.QueryString["type"]!= null)
actionTab.SetSelectedTab(Request.QueryString["type"]);
}

3. In PropertyLongStringControlAdapter.cs, declared a TextBox, checked if the property had any settings choosen and then choosed if to use the textbox or the FCKEditor. When the proeprty was saved I had to do the check again to know wich webcontrol to fetch the value from.

protected WrapFCKEditor editor;
protected TextBox textbox;

public override void ApplyEditChanges()
{
if (((PropertyLongString)this.PropertyData).EditorToolOptions == 0)
this.PropertyData.Value = textbox.Text;
else
this.PropertyData.Value = editor.Value;

}

public override void CreateEditControls()
{
if (((PropertyLongString)this.PropertyData).EditorToolOptions == 0)
{
textbox = new TextBox();
textbox.TextMode = TextBoxMode.MultiLine;
textbox.Rows = 10;
textbox.Columns = 40;
textbox.Text = this.PropertyData.Value as string;
this.Control.Controls.Add(textbox);
}else{
// display the editor...
}
}

151 thoughts on “Implementing the FCKEditor

  1. F

    Great post, thanks a lot. However I discovered an error in your WrapServerObjectBrowser.aspx, line 8 should be modified according to this.

    <input onclick=”OpenGetPageDialog(”,”, ”, ”, ‘en’);” />

  2. F

    Seems it got a bit stripped 🙂

    However, the thing was that ResolveUrlFromUIBySettings is not properly closed..

  3. Ruwen Jin

    Nice post. I will try to adapt changes the code on our site.

    about this:
    I followed the steps in the article, but the editor only loaded about half of the times. Wierd, so I started debugging. No luck at all. Tried to deploy the project to our test-server and it worked all of the time.

    I think it is because there is error before and iis or browser has cache the error. If you do an iisreset and new browser it will be gone.

  4. Andreas Ek

    Have someone made adjustments so that FCKEditor works in EPiServer according to Images and Links? I would just be great!

  5. Br

    Hi! Is there any documentation about replacing editor for CMS 6 R2 and Commerce? I’m trying to replace the default editor with FCK Editor.

Comments are closed.