Вопросы Теги

Contenteditable div и iframe при создании богатого -текстового/wysiwyg-редактора

я пытаюсь взвесить все за и против использования <div>и <iframe>при создании собственного редактор форматированного текста/wysiwyg.

Почему при этом я не могу просто использовать contenteditable<div>и почему так много людей предпочитают <iframe>?

Предыстория обсуждения :Насколько я понимаю, распространенный способ создания wysiwyg-редактора состоит в том, чтобы сделать div или iframe contenteditable , а затем выполнить 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>-представляется предпочтительным. Есть веские причины, по которым я передумаю?

28
задан meagar 12 July 2012 в 17:54
поделиться