remove from TinyMCE editor content value

I have described at my another post how to set up TinyMCE editor to any application. To get/set the content of editor use this function

V3 or later :

text = tinyMCE.activeEditor.getContent() // for get

tinyMCE.activeEditor.setContent(text) // for set

older version:

text = tinyMCE.getInstanceById(’txtNote’).getBody().innerHTML // get

tinyMCE.getInstanceById(’txtNote’).getBody().innerHTML = text //set

but current version has one problem that is every time it add <p> at beginning and </p> at ending. thats why i have created one method that return the exact content.

function tinyMCE_getContent(txtAreaId) { //strips html tags leaving plain text
var content = tinyMCE.get(txtAreaId).getContent();
var re = /(<([^>]+)>)/ig ; //strip all tags
plaintext = content.replace(re, “”);
return plaintext;
}

Show word count, remaining char, adding additional event’s function for TinyMCE editor

I have described at my another post how to set up TinyMCE editor to any application. charcount1I added some functions that shows the char remaining values in the initTinyMCE.js file. if you want to add some other function you can do that the same way.the function is –

setup :function(ed) {
/*ed.onClick.add(function(ed, e){ alert(‘click’);   });  */
ed.onBeforeSetContent.add(function(ed, o) {
// o.content = o.content.replace(/&lt;p&gt;/i, “”);
// o.content = o.content.replace(‘&lt;/p&gt;’, “”);
var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,””); ///remove <p> and </p>
var text = strip.split(‘ ‘).length + ” Words, ” +  strip.length + ” Characters. You have ” +(characterLimit-strip.length)+” Chracter remaining.”;
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + ‘_path_row’), text); //_path_row is used for showing text at status bar of editor
}
);

ed.onKeyUp.add(function(ed, e) {
var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,””);
var text = strip.split(‘ ‘).length + ” Words, ” +  strip.length + ” Characters. You have ” +(characterLimit-strip.length)+” Chracter remaining.”;
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + ‘_path_row’), text);
if(strip.length > characterLimit){
strip = strip.substring(0,characterLimit);
tinyMCE.execCommand(‘mceSetContent’,false,strip);
alert(“The length of your message is “+strip.length +” the max num of characters n allowed for this text Area is “+characterLimit);
}
});

}

This new version (3+) introduce tinyMCE.activeEditor.getContent() function for getting the content value. for old version use – tinyMCE.getInstanceById(‘txaMainline’).getBody().innerHTML

tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + ‘_path_row’), text); is used for setting message at the editor status bar.

tinyMCE.execCommand(‘mceSetContent’,false,strip); is used for dynamically set the new value. when editor exceed the max value, the value from zero to max char is set to the content.

so the full text of initTinyMCE.js is

————— initTinyMCE.js
var characterLimit = 2000;
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “searchreplace,print,paste”,
entity_encoding:”named”,
entities : “&quot;,34,&nbsp;,160,&amp;,38,&cent;,162,&euro;,8364,&pound;,163,&yen;,165,&copy;,169,&reg;,174,&trade;,8482,&permil;,8240,&lt;,60,&gt;,62,&le;,8804,&ge;,8805,&deg;,176,&minus;,8722”,
theme_advanced_buttons1 : “print,search,replace,separator,undo,redo”,
theme_advanced_buttons2: “”,
theme_advanced_buttons3 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_path_location : “bottom”,
extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]”,
theme_advanced_resize_horizontal : true,
theme_advanced_resizing : true,
nonbreaking_force_tab : false,
apply_source_formatting : false,
width : 400,
debug : false,
//handle_event_callback : “myHandleEvent”,
cleanup : true,
theme_advanced_path : false,
setup :function(ed) {
/*ed.onClick.add(function(ed, e){ alert(‘click’);   });  */
ed.onBeforeSetContent.add(function(ed, o) {
// o.content = o.content.replace(/&lt;p&gt;/i, “”);
// o.content = o.content.replace(‘&lt;/p&gt;’, “”);
var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,””);
var text = strip.split(‘ ‘).length + ” Words, ” +  strip.length + ” Characters. You have ” +(characterLimit-strip.length)+” Chracter remaining.”;
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + ‘_path_row’), text);
}
);

ed.onKeyUp.add(function(ed, e) {
var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,””);
var text = strip.split(‘ ‘).length + ” Words, ” +  strip.length + ” Characters. You have ” +(characterLimit-strip.length)+” Chracter remaining.”;
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + ‘_path_row’), text);
if(strip.length > characterLimit){
strip = strip.substring(0,characterLimit);
tinyMCE.execCommand(‘mceSetContent’,false,strip);
alert(“The length of your message is “+strip.length +” the max num of characters n allowed for this text Area is “+characterLimit);
}
});
}

});

Setup TinyMCE Editor

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor. I used here 3.2.1.1 version.lets see how add this editor to an application. first download it and unzipped it and put it in your web application’s js folder. so the folder structure looks –

folderstruc1

I used one configaration file that initialize the TinyMCE editor. this file name is initTinyMCE.js. put this folder into webappjstiny_mce folder.

——————–  initTinyMCE.js

tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “searchreplace,print,paste”,
entity_encoding:”named”,
entities : “&quot;,34,&nbsp;,160,&amp;,38,&cent;,162,&euro;,8364,&pound;,163,&yen;,165,&copy;,169,&reg;,174,&trade;,8482,&permil;,8240,&lt;,60,&gt;,62,&le;,8804,&ge;,8805,&deg;,176,&minus;,8722”,
theme_advanced_buttons1 : “print,search,replace,separator,undo,redo”,
theme_advanced_buttons2: “”,
theme_advanced_buttons3 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_path_location : “bottom”,
extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]”,
theme_advanced_resize_horizontal : true,
theme_advanced_resizing : true,
nonbreaking_force_tab : false,
apply_source_formatting : false,
width : 300,
debug : false,
//handle_event_callback : “myHandleEvent”,
cleanup : true,
theme_advanced_path : false,
});

here i used entities value so that it returns the actual character. there are so many plugins and button i used only some plugins of them. the ‘TinyMCE test.html’ looks like –

——————— TinyMCE Test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”>
<title>TinyMCE Test</title>
</head>

<body>
<script type=”text/javascript” src=”js/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript” src=”js/tiny_mce/initTinyMCE.js”></script>

<table width=”100%”>
<tr>
<td align=”center”>
<textarea id=”txtNote1″ name=”txtNote1″ rows=”7″ cols=”10″ >
This is Text1.
</textarea>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td align=”center”>
<textarea id=”txtNote2″ name=”txtNote2″ rows=”7″ cols=”10″ >
This is Text2.
</textarea>
</td>
</tr>

</table>
</body>
</html>

the TinyMCE test.html page looks like –

tinymce-test1
Thanks