This applies to Rich Text editing in web browsers.
Usually almost every editor I saw uses iframes as editing areas, something like this:
- the iframe:
<iframe id="editor" src="editable.html" style="width:500px;height:300px;border:solid 1px red;"></iframe>
- and the content for "editable.html":
<html>
<head>
<title>Editable content example</title>
<meta charset="utf-8" />
</head>
<body contenteditable="true">
Some text in the editor.
</body>
</html>
- and the script you need for your problem should be something similar to this (tested in latest version of firefox, but should work from FF3 up):
<script type="text/javascript">
function InsertHtml() {
var html = 'text for testing';
var editor = document.getElementById("editor");
var editorDoc;
if (editor.contentDocument)
editorDoc = editor.contentDocument;
else
editorDoc = editor.contentWindow.document;
editorDoc.execCommand('insertHTML', false, html);
}
</script>
If you will use another HTML element as wrapper for your editor, like a DIV:
<div id="rteName" contentEditable="true" style="width:500px;height:300px;border:solid 1px red;">
and use the following script or your script, you will get "contentWindow" is undefined.
I don't really know the reason for this, but this is how it works.
And another thing, in Chrome it only works if you are inside the editor (the editor area is active).
Hope it helps,
Valy.
Submit an article or tip