Contenteditable div против iframe в создании редактора rich-text/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. Хотя я могу легко получить это execCommand Комбо для работы над div / iframe в браузерах Webkit, я адски пытаюсь заставить iframe работать в Firefox. Мне приходится прибегать к загрузке скриптов и таблиц стилей в iframe и всякой чепухе, чтобы дублировать то, что я могу легко сделать с помощью версии на базе div. Итак <div> основанный на методах кажется предпочтительным. Какие-то веские причины я пересматриваю?

Источник

2 ответа

Решение

Причины iframe

Pros

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

минусы

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

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

Источник

Прежде всего... Не пытайтесь создать свой собственный редактор 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

Источник
Другие вопросы по тегам