В настоящее время я обновляю WYSIWYG Rich Text Editor, основанный на DHTML Editor Control (DEC), чтобы использовать более современные средства управления редактором в современных браузерах.Я использую iFrame с включенным режимом дизайна и смесью обычного javascript и jquery.
Одним из моих требований является вставка html-содержимого (форм и т. Д.) В iframe, чтобы пользователи могли их редактировать.У меня это работает в FF + Chrome, но IE доказывает боль.Мой текущий код вставляет содержимое в начало родительского документа, а не в iframes, я использую функцию selection.createRange (), которая при использовании с DEC вставляет содержимое либо в курсоре, если выбран элемент управления, либо вконец документа внутри редактора, если нет.
В настоящее время это работает только тогда, когда я выбираю какой-то текст в IE.Вот мой текущий код (извиняюсь, если он выглядит неформатированным, брандмауэр на работе блокирует много css + js из stackoverflow), есть идеи?
<html>
<head>
<title>Text Editor Test</title>
<style type="text/css">
.toolbar {background-color:#BFC193;width:500px;padding:5px;}
#insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}
</style>
</head>
<body>
<h1>MSHTML Text Editor</h1>
<form id="frmEdit">
<div class="toolbar" id="toolbar">
<input type="button" name="insertHTML" value="insert html" onClick="showForm();"/>
</div>
<div id="insertForm" style="display:none;">
Insert Content Form
<input type="button" value="OK" style="width: 80px" onClick="insertContent();">
</div>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
// functions to execute once the DOM has loaded.
$(document).ready(function() {
pageInit();
});
function pageInit() {
// create iframe
$('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>");
//insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job
document.getElementById('frameEdit').contentWindow.document.open();
document.getElementById('frameEdit').contentWindow.document.close();
document.getElementById('frameEdit').contentWindow.document.designMode='On';
}
function showForm() {
$('#insertForm').toggle();
}
function insertContent() {
// turn off form
showForm();
// set test content
var htmlContent = "<p>Insert Test</p>";
var doc = document.getElementById('frameEdit').contentWindow.document;
if (doc.selection && doc.selection.createRange) { // IE
var range = doc.selection.createRange();
range.pasteHTML(htmlContent);
} else { // FF
doc.execCommand('insertHTML', false, htmlContent);
}
}
</script>
</form>
</body>
</html>