A directory of browser-based WYSIWYG editors


Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0 - Add-Ons:
Word Cleaner, Paste, and caret position

The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.


New User

Jun 8, 2004, 9:39 PM

Post #1 of 1 (4863 views)
Word Cleaner, Paste, and caret position Can't Post

I needed a free CMS with word paste support that would keep formatting where possible but filter out the junk. I decided to using Luis's version of the htmlpage editor, and for the most part it worked fine. I just had a few problems with the Word Cleaner not running on all paste events, and the caret being moved to the end of the document after the word cleaner being run.

I am new to both javascript and the editor, but I have come up with a very hacky solution to this problem. While it is not very elegant, I figured I'd post the code here so If anyone was interested they could build on it in future. This has been written to work with ie5.5. Sorry mozilla users.

First. I removed all the special paste handling in the editor_event function. Just commented it out, and left the defaults to do their stuff.

in function editor_setmode, there is a line that reads:

 editdoc.body.onpaste = function() { editor_event(objname, 100); }

i rewrote this to read:

 editdoc.body.onpaste = function() { my_paste_event(objname); }

This causes the my_paste_event function to be called whenever a paste event occurs on the htmlarea.

Attached is a snippet of the remainder of my code to handle pasting and caret setting. Note there is a global variable used, which i don't like but I'm not familiar enough with javascript to do it another way at the moment. I'll also post it in here coz i know i am too lazy to ever open attachments. See attachment for extra comments though:


var recursivePasteMarker = false;

function my_paste_event(objname) {
//if we are already nested in this function then return
if(recursivePasteMarker) { return; }

//fetch editor objects
var editor_obj = document.all["_" +objname+ "_editor"]; var editdoc = editor_obj.contentWindow.document;

//cancel event
editEvent.returnValue = false; editEvent.cancelBubble = true;

//flag that we are in this function and reissue paste command.
recursivePasteMarker = true;

//paste has now occured. run the first part of the cleanup code
var range = editdoc.body.createTextRange();
var str=range.htmlText;
if (str.indexOf("; mso-")>=0 ||str.indexOf("<v:")>=0 ||str.indexOf("class=Mso")>=0){

//now run some intesting information to fetch the cursor //position after the paste in a way which is consistent //with the document after this method exits.
var bookmark = "~~marker~~";
var tmp2 = "" + cleanHTML(editdoc.body.innerHTML);
editor_insertHTML(objname, bookmark);
var tmp = "" + cleanHTML(editdoc.body.innerHTML);
editdoc.body.innerHTML = tmp;
var allStr = "" + editdoc.body.createTextRange().text;

//when we later wish to move the caret based on character //position, newlines do not count as characters, thus
//we remove them now before we search for index.
allStr = allStr.replace(/\n/gi, "");
var i = bookmark );

//Set the document body back to clean version without bookmark.
editdoc.body.innerHTML = tmp2;
setTimeout(function() { setCaretPos(objname, i); } ,100);
recursivePasteMarker = false;

function setCaretPos(objname, pos) {
var editor_obj = document.all["_" +objname+ "_editor"]; var editdoc = editor_obj.contentWindow.document;
range = editdoc.body.createTextRange();
range.moveStart("character", pos);

Attachments: pasteSnippet.js (3.79 KB)


Search for (options)