Angular UI Tutorial: TinyMCE Directive

Leave a comment Link

This is a really useful plunker that allows you to integrate tinyMCE into your angular projects as a directive. You can apply the WYSIWYG to multiple textareas on a page or in angular UI tabs too. This isn’t my plunker but it’s still a super useful one. Enjoy!

Error FIX: Tiny_MCE & RSH Additional “Mysterious” Editor

Comments 2 Standard

The Problem
Of course I always find the most obscure problems that can occur….

I’m using AJAX and I have both RSH and Tiny_MCE running. To make my life easier I have Tiny_MCE automatically making all textarea fields into editors. Now, the problem is there’s a mysterious textarea field that shows up on Internet Explorer (Yay microsoft!) and it really shouldn’t be there. Even if there are no textarea fields on the entire page the Tiny_MCE editor still shows up.

So, it turns out, after several hours of Googling (is that a word?) I found out that RSH has a historyStorage.StorageField that is a pointer to a textarea DOM node. Go figure!!

This means the only way I can use Tiny_MCE and RSH is t0

1) Turn off the textareas mode and put in the id’s manually, which I can tell you now is not going to happen

2) Or re-write Tiny_MCE to disregard specific kinds of textareas.

The Solution
I modified the tiny_mce.jsp so if it’s set to textarea mode it automatically skips the textarea with ID rshStorageField. That way in IE it doesn’t show another random textarea floating somewhere on the screen.

case "textareas":

 				case "specific_textareas":

 					function hasClass(n, c) {

 						return c.constructor === RegExp ? c.test(n.className) : DOM.hasClass(n, c);

 					};						each('textarea'), function(v) {

 						if (s.editor_deselector && hasClass(v, s.editor_deselector))


if (!s.editor_selector || hasClass(v, s.editor_selector)) {

 							// Can we use the name

 							e = DOM.get(;

 							if (! && !e)

// Generate unique name if missing or already exists

 							if (! || t.get(
 = DOM.uniqueId();

if (! = "rshStorageField") //added by

 							      new tinymce.Editor(, s).render(1);