Custom cleanup

This example shows how you can make add some custom cleanup, click the cleanup icon below and observe how the strong element gets an span element appended to it and then as a post process the strong element is removed using some regexps.

HTML source

Below is all you need to setup the example.

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	setup : function(ed) {
		// Gets executed before DOM to HTML string serialization
		ed.onPreProcess.add(function(ed, o) {
			// State get is set when contents is extracted from editor
			if (o.get) {
				// Add span element to each strong/b element
				tinymce.each(ed.dom.select('strong,b', o.node), function(n) {
					n.appendChild(ed.dom.create('span', {style : 'border: 1px solid green'}, 'Content.'));
				});
			}
		});

		// Gets executed after DOM to HTML string serialization
		ed.onPostProcess.add(function(ed, o) {
			// State get is set when contents is extracted from editor
			if (o.get) {
				// Replace all strong/b elements with em elements
				o.content = o.content.replace(/<(strong|b)([^>]*)>/g, '');
				o.content = o.content.replace(/<\/(strong|b)>/g, '');
			}
		});
	}
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>