Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Replacing TinyMCE - World of hurt?


Go to End


6 Posts   25203 Views

Avatar
Dig

Community Member, 33 Posts

3 April 2008 at 10:56am

I would like to replace TinyMCE with a commercial WYSIWYG editor that I have licensed. This is for a number of reasons including tidier interface, better CSS options, cleaner code output etc.,

I was just wanting to know how deeply embedded TinyMCE is. It is a case of replacing Tiny's scripts with my own and changing the cms code in a couple of places to use the new editor, or has Tiny been heavily customised to work with SilverStripe.

Obviosuly I can find this out by getting my hands dirty but just an indication before I start of how big the job might be will help prioritise the changes I'm wanting to make :)

Cheers,
Nick

Avatar
Sam

Administrator, 690 Posts

3 April 2008 at 9:22pm

There's been a lot of work in creating custom link and image inserters based around TinyMCE. If you want to use another editor, then you will lose these.

But apart from that, it should be doable. However, to get to a satisfactory result, you'll have to muck with a bunch of code in the core packages, which will make it hard to upgrade.

The place where all this is controlled is HTMLEditorField. You should be able to edit that class to load your own editor javascript into the system.

If you stop including the TinyMCE javascript files, you will run into some javascript bugs in the CMS - particularly when you ajax-load a page. Your best bet is probably to use firebug to see where the code is tripping up, and commenting the TinyMCE-specific stuff out.

You should update LeftAndMain.php, to use Requirements::javascript() to include your editor's script files.

You'll also need to remove the WYSIWYG toolbar from the top panel, by editing the .ss templates for the CMS.

If you would like to make it easier to upgrade in the future, you might want to consider extending the system so that it has a configuration option to choose alternative editor implementations. Provided the code followed our coding standards, it would be a good candidate for merge into the mainline system - meaning you could continue to upgrade your site.

Avatar
Dig

Community Member, 33 Posts

9 April 2008 at 2:03pm

Excellent I'll get stuck into those and may give you all an update on my progress later on.

Thanks for the detailed information

Nick

Avatar
Dig

Community Member, 33 Posts

13 May 2008 at 11:43am

Ok I'm a little stuck basically my editor integrates with the following concept (in short):

<textarea id="myHTMLArea">Some content</textarea>
<script>
   createHTMLEditor("myHTMLArea");
</script>

This is obviously different to how TinyMCE is implemented in SilverStripe. Works fine when visiting a page on a full refresh but when selecting a new page the innerHTML obviously changes but the script isn't executed.

I wrote an additional script to scan for class="htmlarea" and change that after an AJAX update and it found it but broke the whole page any time I put it anywhere. Most likely because I was adding it in the wrong place and it seemed to get stuck in a loop somewhere along the lines.

So, I need to run a script to change the HTMLArea afters it been updated by AJAX where should I put this so its run after the page has been updated?

Cheers,
Nick
(Other than that I'm making good progress a full refresh on each page with f5 give me a spanky new editor :) ).

Avatar
Sam

Administrator, 690 Posts

13 May 2008 at 1:14pm

Use our built-in behaviour class to apply the script. Put this into a separately-included JS file:

Behaviour.register({
'textarea.yourClass' : {
initialize: function() {
createHTMLEditor(this.id); // this == the textarea DOM element
}
}
});

It will be applied on load, and reapplied on ajax load

Avatar
Dig

Community Member, 33 Posts

13 May 2008 at 1:16pm

Thank you so much :)