Я пытаюсь взвесить плюсы и минусы использования <div> vs. <iframe> при создании собственного редактора rich text/wysiwyg.
При этом почему я не могу использовать контент-контент <div> и почему многие люди предпочитают <iframe>?
Фоновая дискуссия:
Обычный способ сделать редактор wysiwyg, насколько я понимаю, - сделать div или iframe доступным для контента, а затем сделать execCommand в документе, содержащем тело div или iframe, чтобы сделать его текст полужирным или любым.
Здесь HTML:
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<div contenteditable="true"></div>
</body>
</html>
против:.
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<iframe>
<body contenteditable="true"></body>
</iframe>
</body>
</html>
и JS:
$(document.body).on('click', '.btn-bold', function(){
document.execCommand('bold', false, null);
});
против:.
$(document.body).on('click', '.btn-bold', function(){
window.frames[0].document.body.execCommand('bold', false, null);
});
Похоже, что большинство хорошо продуманных редакторов с богатым текстом используют iframe. Хотя я могу легко получить это contenteditable/ execCommand комбо для работы с div/iframe в браузерах Webkit, у меня есть адское время, пытаясь заставить iframe работать в Firefox. Мне нужно прибегать к загрузке скриптов и таблиц стилей в iframe и всевозможные глупости, чтобы дублировать то, что я могу легко выполнить с помощью версии на основе div. Таким образом, метод на основе <div> представляется предпочтительным. Любые серьезные причины, по которым я пересматриваю?
