Hi all, i loved reading this discussion, since i’ve been having the same exact problem vavroom posted here, and had no real solutino to the problem, for many years.
I believe i finally found a good solution, it involves some client side scripting, but it solves ALL my problems.
The approach is quite simple, I’m using a DIV with contentEditable set to true, then i’m catching the onpaste event (which takes care of all pastes – edit menu, right click and ctrl+v), and ondrop (which takes care of dragging content into my rich text editor area)
when pasting or dropping occurs, i go over the entire HTML in the editor area, and simply remove all unneeded tags, styles and classes, resulting with clean HTML code.
This does not require user to do a thing, straight copy paste from any rich html application (word,excel,another web page). I also disabled the undo feature (handling ctrl+z), making sure user cannot undo the automatic HTML formatting:
<html >
<head>
<title></title>
</head>
<body >
<DIV
style=”width:300px;height:100px;
overflow: auto;
border: thin inset;
font-weight: normal”
id=”TEXTEDITOR1″
name=”TEXTEDITOR1″
onpaste=”onPasteHandler();”
ondrop=”onPasteHandler();”></DIV>
<SPAN
id=”TEXTEDITOR1Message”
style=”color:red”></span>
<SCRIPT language=”JavaScript”>
function handleImportsTEXTEDITOR1() {
var aSourceHTML = TEXTEDITOR1.innerHTML;
var newHTML = document.createElement(‘SPAN’);
newHTML.innerHTML = aSourceHTML
nNode = processNode(newHTML);
if (nNode != newHTML)
newHTML = nNode;
TEXTEDITOR1.innerHTML = newHTML.innerHTML;
document.all.TEXTEDITOR1Message.innerText = ‘Note: Some of the content you just pasted have been modified to conform to our web standards’
window.setTimeout(‘document.all.TEXTEDITOR1Message.innerText = “”‘, 8000);
}
function processNode(obj) {
for (var i=0; i < obj.childNodes.length; i++) {
var nObj = processNode(obj.childNodes(i));
if (nObj != obj)
obj.replaceChild(nObj,obj.childNodes(i))
}
if (!validTag(obj)) {
var newNode = document.createElement(‘SPAN’)
newNode.innerText = obj.innerText
return newNode;
} else {
try {
// Removing classes
var attr = obj.className + ”;
if ((attr != ”) && (attr != ‘undefined’)) obj.className = ”;
// Removing styles
var attr = obj.style + ”;
if ((attr != ”) && (attr != ‘undefined’)) obj.style = ”;
} catch (e) {}
return obj;
}
}
function validTag(node) {
// Cleanup function, all tags not listed here will be removed!!
var nodeName = node.nodeName.toUpperCase();
if (nodeName == ‘#TEXT’) return true;
else if (nodeName == ‘BR’) return true;
else if (nodeName == ‘FONT’) return true;
else if (nodeName == ‘B’) return true;
else if (nodeName == ‘STRONG’) return true;
else if (nodeName == ‘SPAN’) return true;
else if (nodeName == ‘I’) return true;
else if (nodeName == ‘BLOCKQUOTE’) return true;
else if (nodeName == ‘A’) return true;
else if (nodeName == ‘DIV’) return true;
else if (nodeName == ‘P’) return true;
else if (nodeName == ‘OL’) return true;
else if (nodeName == ‘UL’) return true;
else if (nodeName == ‘LI’) return true;
return false;
}
function onPasteHandler(e) {
setTimeout(function() {
// editor cleaning code goes here
handleImportsTEXTEDITOR1();
}, 1); // 1ms should be enough
}
function myKeyHandler() {
if (event.keyCode != null) {
if (event.keyCode == 90) { // “z” pressed
if (event.ctrlKey) { // CTRL+Z pressed – disabling
event.returnValue = false;
}
}
}
}
TEXTEDITOR1.contentEditable = true;
TEXTEDITOR1.innerHTML = ‘<FONT face=Arial size=2>Preload your HTML content here</FONT>’;
TEXTEDITOR1.document.body.style.margin = ‘0px’;
TEXTEDITOR1.document.onkeyup = handleChangeTEXTEDITOR1;
document.attachEvent(“onkeydown”, myKeyHandler);
</script>
</body>
</html>
let me know if this works for you??
