PageToScreen Logo

Tuesday, May 24, 2005

tinyMCE Cleaner plugin for ExpressionEngine

Note: Since version 1.4 of ExpressionEngine TinyMCE has been installable through an Extension. This is a much better way of installing. You can pick up the Extension right here

I have created a plugin for ExpressionEngine which cleans up some of the mess that tinyMCE leaves behind.

tinyMCE is a terrific ‘wysiwyg’ tool to help your content editors add a few formatting styles to the text that is entered into the fields in the ‘publish’ part of the control panel. The problem is that, by giving your editors (and I presume that you are using ExpressionEngine as a content management system rather than just a ‘blogging’ tool) - too much control, then there is a danger that this text formatting introduced anomalies in the markup of your pages. I have found that users of tinyMCE inadvertently wrap header tags in paragraph tags, introduce breaks in list, wrap paragraphs in paragraphs and enter empty paragraphs. Some of this happens when text is entered directly, but sometimes it happens when text is pasted into the fields from a word processor. The text, may include line breaks where paragraphs were intended, and you may even find other things happening that I have not even noticed!

furthermore...

Download the plugin from here I built this plugin for my own use and, as such, I may keep modifying, if I notice other anomolies creeping in. I do not intend to criticise MoxieCode for the excellent work that they have done on tinyMCE. In fact I think the tool works really well for an experienced user. The problem is, that I am using ExpressionEngine as a contentent management system for users who will be unaware of any issues when they first click a header tag and then hit a paragraph tag. To them, it 'looks' ok. The plugin uses a combination of search and replace and regular expressions to tidy things up. This plugin is meant to be used in conjunction with 'tinyMCE' - a wysywig entry system from MoxieCode If you use this tool to help your editors add some formatting (emphasising the text, italicising the text, adding headers etc), then you will notice that certain things can go wrong and prevent your pages from validating. I suggest that you confige tinyMCE to only use a limited amount of tools (in other words - don't give too much formatting control to your content editors). This plugin removes double <p> and </p> tags. It also removes <p> tags where they wrap <ul> tagsThere is but one option:If you want to change breaks into paragraphs then put: breaks2paras="yes" It will then change br tags to paragraphs and then remove the empty paragraphs It also removes paragraph tags that get put into header tags To use this plugin, wrap anything you want to be processed by it between these tag pairs: {exp:clean_tinymce break2paras="yes"} text you want processed {/exp:clean_tinymce}
Posted by Chris Jennings on 24 May around 2pm •

Tags:

Further Information:

Here is the link to MoxieCode, where you can read all about tinyMCE.  Html Area includes a directory of all wysiwyg text entry systems.  Download the plugin from here

Comments added in later:

Extra words from Vik Rubenfeld:

A number of people on the EE forums are wondering how to integrate TinyMCE with the latest version of EE, version 1.3. Can you advise us on how to do this? Thanks very much in advance for any info.

Posted on  07/07  at  09:18 AM

Extra words from :

I have installed one instance of 1.3. I will have a go at installing tinyMCE within it in the next week. I’ll post up any info I have.

Cheers

Posted on  07/07  at  09:30 AM

Extra words from Vik Rubenfeld:

That’s great news, Chris. Please let me know if I can help beta-test.

Posted on  07/07  at  11:43 PM

Extra words from Werner Gusset:

Chris

I have started the question in the EE Forum on how Tiny MCE integrates in EE 1.3 like it worked in 1.2.1.
I look forward to your infos on that. If you like chocolate I would be happy to send you some from Switzerland to express my appreciation.

Regards

Posted on  07/08  at  07:25 AM

Extra words from :

Oh great, I’m very interested in trying this out for 1.3 - thanks much!!!

Posted on  07/08  at  05:03 PM

Extra words from JT Thompson:

Very much agreed. I’m really looking forward to this.

I need the editor before I’ll upgrade.

Thanks Chris!

Posted on  07/10  at  07:21 PM

Extra words from :

I have installed tinyMCE and I have posted up the
instructions here. Good luck. Send comments through on that posting please.

Posted on  07/11  at  02:41 PM

Extra words from Vik Rubenfeld:

I can’t wait to try this out!

Posted on  07/11  at  05:57 PM

Extra words from Vik Rubenfeld:

It works! Thanks Chris!

Posted on  07/12  at  07:37 PM

Extra words from Vik Rubenfeld:

Everything is working super-well, with the one exception of the link button. When I click it, I get the dialog box, and I enter the URL and the link title. Then I click Insert, and nothing happens. When I close the dialog box, I find the link has not yet been inserted in the HTML. I’m on FireFox for Mac OS-X. Does anything jump out as something I can try to fix this? Thanks in advance for any thoughts.

Posted on  07/12  at  10:21 PM

Extra words from Werne:

Vik
I’m on Windows XP with FF and have the same problem. Though when I close the link window with [x] the link is there. It worked with EE 1.2.1 and TinyMCE 1.43. With updating EE I updated also TinyMCE. Now, where’s the problem? I don’t know. Have to investigate. Maybe the forum from Moxie holds some info. Will check. But today I have not much time.
What happens with the advlink plugin is another question? It’s an advanced Link modul which I will try later. Let you know when I get somewhere.

Posted on  07/13  at  05:03 AM

Extra words from Vik Rubenfeld:

The advlink plugin works!

Posted on  07/13  at  08:29 AM

Extra words from Werner Gusset:

Thanks Vik: Gonna install it, soon.

Posted on  07/13  at  08:49 AM

Creative Commons License
This work is licensed under a Creative Commons Attribution License.

PageToScreen

Powered by ExpressionEngine