Replace Xed with HTML textarea

Since HTMLArea is just a simple HTML textarea form element that gets replaced by the advanced editor through JavaScript, replacing the Xed editor is not that difficult.

First we have to replace the Xed editor with an ordinary textarea widget. In this document I describe how to replace the editor in the 'add webpage' form only, but I think it's trivial how the other forms have to be modified to use the HTMLArea.

The form to add a new Sitellite webpage is defined in the file /inc/app/cms/forms/add/sitellite_page/index.php. Open this file in your favorite editor and then first remove all the parts that are related to the Xed editor widget.

Remove the Xed widget

At approximately line 30, remove the JavaScript onsubmit. The new code with the call on submit removed, looks like this:

$this->extra = 'id="cms-edit-form"';

Then surround the code where the Xed widget is created with a comment start en end tag (/* */). Or just remove this part. Approximately lines 113-118. The widget's name is 'body'. Now the Xed widget is removed.

Because select boxes and iframes can't be hidden under another block element in Internet Explorer, the templates contain some JavaScript code to hide these elements when a user chooses to make an other tab visible.

The Xed widget is now removed from the add page form, but there is still some never accessed JavaScript code in the templates (preview button etc). We will change this later, first add the new ordinary textarea.

Add ordinary textarea form widget

To get the form to function again, we have to add a new textarea widget.

Add the textarea with the same name and id as the removed Xed widget and put the code for the new widget at the same location as the removed Xed widget code:

/* Textarea */
$w =& $this->addWidget ('textarea', 'body');
$w->alt = intl_get ('Body');
$w->extra = 'id="body" style="width:100%; height:450px;"';

In case we modified the edit page instead of the add page, don't forget to set the value for the widget:

$w->setValue ($_document->body);

Because there is some JavaScript for the Xed editor in the templates, a quick (and dirty) hack to get the new form working is to insert somewhere in the form a dummy span tag like this:

print '<span id="xed-body-formatblock"></span>';

I have this new span tag at line 112. Now confirm that the modified form works and that no JavaScript errors occur. Instead of the Xed editor you see the ordinary textarea that is fully functional. Now the new form is working, you may remove the dummy span tag again.

Add HTMLArea advanced editor

First test the HTML Area installation and confirm that the demo's are working. For the modifications to work, HTMLArea must be in the root of your website. Open the example page http://www.YourWebsite.com/htmlarea/examples/core.html with your browser to make sure everything works.

Once htmlArea is on your website all you need to do is add some JavaScript to any pages that you want to add a or more then one WYSIWYG editors to. Here's how to do that for the Sitellite 'add webpage' form.

Define some global variables. "_editor_url" has to be the absolute URL where HTMLArea resides within your website; as we discussed, this would be “/htmlarea/”. "_editor_lang" must be the language code in which you want HTMLArea to appear. This defaults to "en" (English).

Then include the "htmlarea.js" script and change your textarea into an HTMLArea. This is the code to insert in /inc/app/cms/forms/add/sitellite_page/index.php:

page_add_script ('_editor_url = "/htmlarea/";
_editor_lang = "en";');
page_add_script ('/htmlarea/htmlarea.js');
page_onload ('HTMLArea.replace(\'body\');');

Modify JavaScript in template

Now when you start to add a new Sitellite weppage, a JavaScript error will occur, because the script wants to display Xeds toolbar that isn't there anymore.

It is the function cms_focus (element, index) that hides and makes the panels visible again. The tab with the WYSIWYG editor is named 'cms-edit'.

Because the new editor has more select boxes that has to be hidden, I wrote a new JavaScript function that automatically searches for all list elements to hide them all at once. Replace the part between the if (elements == 'cms-edit') with the following code:

document.getElementById('body').style.visibility =
(index==1) ? 'hidden':'visible';
// The HTML editor is in a div with classname 'htmlarea'.
// Get all SELECT tags between this div tag
var allDivElements = document.getElementsByTagName('div');
for (var i=0; i<allDivElements.length; i++) {

divAttributes = allDivElements[i].attributes;
for (var j=0; j<divAttributes.length; j++) {

// Div found, loop all childs
if (divAttributes[j].name=='class' &&
divAttributes[j].value=='htmlarea') {

selectChilds = allDivElements[i].getElementsByTagName('select');
for (var k=0; k<selectChilds.length; k++) {
selectChilds[k].style.visibility =
(index==1) ? 'hidden':'visible';
}
}
}
}

Now to make the broken preview work again, open the /inc/app/cms/conf/properties.php file. Then in the cms_preview (f. \'body\') function, replace the xed_copy_value function call with:

if (document.getElementById(\'xed-body-edit-bar\')) {
xed_copy_value (f, \'body\');
}

The preview function should be fixed now, and the other forms with the Xed editor should still work. (at least the forms that don't use the same (and now modified) template).

Stylesheet tweaks

To correct a little problem with the layout of the edit buttons, change the table stylesheet property in the template file /inc/app/cms/html/page/edit-top.spt from 99% width to auto width:

#cms-edit table {
width: auto;
}

Page 1: Introduction to HTMLArea
Page 2: Replace Xed with HTML textarea
Page 3: HTMLArea configuration and troubleshooting

Home   More Xed WYSIWYG Editor Stories