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.

Customising the CMS /

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

tiny mce leaving empty <p> tags


Go to End


4 Posts   10030 Views

Avatar
jkd77

Community Member, 12 Posts

6 January 2009 at 11:24am

Edited: 06/01/2009 11:29am

I've modified code to allow js script links to be added to each page's header area via the admin area and a new tab / htmlText area.

This is working fine until I enter a js link then remove it using the tiny mce html editor. It appears to be gone (even the pesky hard to notice blank space) but upon viewing the code of the page after a refresh there is an empty paragraph element left behind. Is there something going on in sapphiremce_cleanup that is causing this?

To enable using script tags w/ tiny i had to modify this file: tinymce.template.js with:

script[charset|defer|language|type|src]

at the end of valid_elements.

Also once a script element has been entered and I exit the html editor window, I open it back up and an empty <br/> tag has been placed in the code window in front of the script tag. Though upon reviewing the page code this does not seem to appear.

Any help would be greatly appreciated!

Avatar
jkd77

Community Member, 12 Posts

7 January 2009 at 5:23am

This is also occurring with a previously installed HTMLtext area designed to allow content to be added to a right side column for each page. Every page that has this ability has an empty <p> element inserted for no apparent reason (I only discovered this upon looking through the DB). When I open the admin side editor and remove the space that denotes it, save & publish, change pages in the editor, then return to the page I just edited - the space (aka empty paragraph) has returned.

The Tiny MCE forum has revealed someone with a similar issue: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=11981

But the described remedy of setting certain init values doesn't seem to help - since they are already set as described:

"There are some settings in TinyMCE which might cause your experience, such as force_p_newlines (which defaults to "true"), force_br_newlines (which defaults to "false") and forced_root_block (which defaults to "false")."

Since these settings appear to be as desired as described by the Tiny Mce descriptions of these settings I can only assume something else is causing this.

Anyone?

Avatar
jkd77

Community Member, 12 Posts

7 January 2009 at 6:49am

It seems the editor automatically puts an empty element in the HTMLText window to prepare for keying of content. To test this I selected a new element from the Tiny mce pulldown (an H2 element), and clicked in the edit window without entering content, then saved. Low and behold there is now an empty h2 element being created. Is there any way to cleanup empty elements before storing the content in the db?

Avatar
jkd77

Community Member, 12 Posts

7 January 2009 at 10:58am

Edited: 07/01/2009 10:59am

Update:

At this point I'm trying to add a string.replace or regexp to the sapphiremce_cleanup() function of jsparty/tiny_mce_improvements.js to get rid of empty elements.

I've tried various things and nothing seems to work. It either does nothing OR removes all the closing tags.

function sapphiremce_cleanup(type, value) {
	if(type == 'get_from_editor') {
		// replace indented text with a <blockquote>
		value = value.replace(/<p [^>]*margin-left[^>]*>([^\n|\n\015|\015\n]*)<\/p>/ig,"<blockquote><p>$1</p></blockquote>");
	
		// replace VML pixel image references with image tags - experimental
		value = value.replace(/<[a-z0-9]+:imagedata[^>]+src="?([^> "]+)"?[^>]*>/ig,"<img src=\"$1\">");
		
		// Word comments
		value = value.replace(new RegExp('<(!--)([^>]*)(--)>', 'g'), ""); 
			
		// kill class=mso??? and on mouse* tags  
		value = value.replace(/([ \f\r\t\n\'\"])class=mso[a-z0-9]+[^ >]+/ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"]class=")mso[a-z0-9]+[^ ">]+ /ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"])class="mso[a-z0-9]+[^">]+"/ig, "$1"); 
		value = value.replace(/([ \f\r\t\n\'\"])on[a-z]+=[^ >]+/ig, "$1");
		value = value.replace(/ >/ig, ">"); 
	
		// remove everything that's in a closing tag
		value = value.replace(/<(\/[A-Za-z0-9]+)[ \f\r\t\n]+[^>]*>/ig,"<$1>");
		
		//remove empty elements - 06jan09
		value = value.replace(/<[^>]*><\/[^>]*>/ig,""); //this removes all the closing tags for some reason
	}

	if(type == 'get_from_editor_dom') {
		var allImages =value.getElementsByTagName('img');
		var i,img;

		for(i=0;img=allImages;i++) {
			img.onresizestart = null;
			img.onresizeend = null;
			img.removeAttribute('onresizestart');
			img.removeAttribute('onresizeend');
		}

		var allDLs =value.getElementsByTagName('img');
		for(i=0;img=allDLs;i++) {
			if(img.className.match(/(^|\b)specialImage($|\b)/)) {
				img.onresizestart = null;
				img.onresizeend = null;
				img.removeAttribute('onresizestart');
				img.removeAttribute('onresizeend');
			}
		}
		
	}
	return value;
}

Thoughts anyone? Anyone?