Integrating a WYSIWYG editor in PHP-Fusion

Integrating a WYSIWYG editor in PHP-Fusion

Integrating TinyMCE in PHP-Fusion

How to integrate the TinyMCE without loosing the original editor.

I am happy to have found PHP-Fusion. It serves my needs in nearly every respect. My need is to create homepages for small local social organisations that are not able to pay a professioal webmaster and do not necessarily have members that know of HTML, or PHP.

The built in editor can do nearly everything that is needed. But sometimes it would be nice to be able to make e.g. a table, and that possibility is not offered by Fusion's own editor.

So I have integrated the WYSIWYG editor TinyMCE, which - like PHP-Fusion - is an open source tool. You can learn about it at http://tinymce.moxiecode.com. It has a lot of features that I cannot deal with here (Which language do you want? Shall the Return button make a <p></p> or rather a <br />? How many tools do you want for creating a table? - and so forth).

There is only one thing that it cannot do. It cannot render the valuable PAGEBREAK function which the Fusion editor offers. And that is the main reason why I prefer to have both editors available.

The following will show how this can be done.

In subheader.php just before </head> place this code:


<!-- tinyMCE -->
<script language=\"javascript\" type=\"text/javascript\" src='".FUSION_BASE."jscripts/tiny_mce/tiny_mce.js'></script>
<script language=\"Javascript\" type=\"text/javascript\">

function tinyadvanced() {
tinyMCE.init({
mode : 'none',
theme: 'advanced',
force_p_newlines: 'false'
});
}

function tinysimple() {
tinyMCE.init({
mode : 'none',
theme: 'simple'
})
}
</script>
<!-- /tinyMCE -->

Actually, in my case I would use Danish function names, just in order to be sure that I did not use af function name that was already in use.

There could be a lot more parameters in each function, e.g. for choice of language. You do your own choice.

There are two things to notice here. 1) the Javascript has been placed in funttions, so it is not activated immediately, and 2) the mode has been set to 'none'. This is one of the tricks I have learned from the TinyMCE discussion forum. If the mode had been set to 'textareas', the TinyMCE would have been applied to any textarea on the pages where it were activated. Now it will have to wait untill further notice.

But first we will choose the files where to activate the editor. Since the basic functions have been placed in subheader.php they are always ready for use. In fusion_admin I would choose the arcitcles.php and maybe the news.php. And if I have the infusion for newsletters, that file as well. The easiest way to do it will be to place this code right in the bottom of each file:

<script language="Javascript" type="text/javascript">
yourPreferredFunction()
</script>

This will look a little nasty because the code will come after the </html> tag. But the browsers accept it.

Now there is a little work to be done with the textareas that are to be served with TinyMCE. The textareas already have a NAME, but they also need an ID. So if name=body' I'll add id='body'. And then I'll make the textarea somewhat higher, because this editor places itself inside the textarea. I'd add 5 rows for each textarea.

And here comes the next trick I've learned from the TinyMCE forum:

The editor can be applied to a textarea with this code:
tinyMCE.addMCEControl(document.getElementById('foo'),'foo');
and it can be deactivated again with this:
tinyMCE.removeMCEControl(tinyMCE.getEditorId('foo'));

In this case the 'foo' should be replaced with 'body'.

Since we are in PHP-Fusion we will place these commands in buttons. Like this:

<input type='button' value='Tiny' class='button' style='width:40px;' onclick=\"tinyMCE.addMCEControl(document.getElementById('foo'),'foo')\">
<input type='button' value='-Tiny' class='button' style='width:40px;' onclick=\" tinyMCE.removeMCEControl(tinyMCE.getEditorId('foo'))\">

This code should be placed under the textarea together with the other buttons (if there are any).

---

And then you are free to use either the original editor or the TinyMCE at your own choice.

There is just one concern: If you are writing in a language like Danish with its special characters like '&Atilde;¦', '&Atilde;¸', and '&Atilde;¥' you will loose the possibility do do a search on words that contain such letters. For the TinyMCE alters those letters to their equivalent “entitiesâ€?. For instance, an '&Atilde;¦' will be changed to “aeligâ€? surrounded by “&â€? and a semicolon. You will have to make some mayor alterations in the search.php. But that is another story.

:cherry: