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

Я пытаюсь взвесить плюсы и минусы использования <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> представляется предпочтительным. Любые серьезные причины, по которым я пересматриваю?

Ответы

Ответ 1

Причины для iframe

Pros

  1. CSS изоляция
  2. Изоляция безопасности (я не могу детализировать этот пункт, повторяю то, что читаю)

минусы

  1. Тяжелее (но не до значительной/заметной точки)
  2. Сложнее получить доступ из JavaScript.

Лично я разработал свой собственный редактор и решил поместить его в iframe.

Ответ 2

Прежде всего... Не пытайтесь создать свой собственный редактор WYSIWYG, если вы думаете о коммерческом использовании. Это отличная идея для личного проекта, потому что вы можете узнать много, но это займет у вас годы, чтобы создать редактор, который вы сможете продать кому - то, что заботится о том, если это действительно работает, а не просто смотрит. Недавно я видел несколько действительно классных новых редакторов, но они действительно не работают. В самом деле. И это не потому, что их разработчики сосут - это потому что браузеры сосут.

Хорошо, это было отличное вступление, теперь некоторые факты:

  1. Я один из разработчиков CKEditor.
  2. Он был разработан около 10 лет.
  3. У нас все еще есть около 1 000 активных выпусков на нашем Trac.
  4. Мы не отстаем в веб-разработке: P.

Теперь ответ - в дополнение к тому, что Тим Даун написал здесь, создавая редактор wysiwyg, вы можете прочитать то, что я написал под этим вопросом. Редактор HTML WYSIWYG: почему редактируемый контент перемещается в iFrame

По сути, в iframe вы в большей безопасности, у вас есть весь документ, содержимое не будет вытекать из вашего редактируемого элемента, вы можете использовать стили и т.д. Недостаток подхода iframe также невелик - он тяжелее и загружает код это... действительно сложно, вы не можете наследовать стили веб-сайта, к которому прикреплен редактор, я думаю, что управление фокусом может быть более сложным в этом случае, и вы должны обратить внимание, в каком документе вы создаете новые элементы ( актуально только в IE <8).

И помните - не пишите свой собственный редактор, если вы не готовы к таким проблемам, как эта Вставить как простой текст Contenteditable div & textarea (word/excel...): D