Contenteditable div vs iframe in einen Rich-Text / WYSIWYG-Editor machen

ich versuche, Wägen die vor-und Nachteile der Verwendung von einem <div> vs. <iframe> in meine eigenen rich-text/wysiwyg-editor.

Tun so, warum kann ich nicht einfach ein contenteditable <div> - und warum so viele Menschen lieber die <iframe> ?

Hintergrund der Diskussion:
Einen gemeinsamen Weg zu gehen, über einen wysiwyg-editor, wie ich es verstanden habe um ein div oder iframe contenteditable und dann zu tun execCommand auf dem Dokument mit dem div oder iframe Körper, um Ihren text Fett oder was auch immer.

Hier die HTML-Ausgabe:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
       <div contenteditable="true"></div>
  </body>
</html>

vs.:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
    <iframe>
       <body contenteditable="true"></body>
    </iframe>
  </body>
</html>

und die JS:

$(document.body).on('click', '.btn-bold', function(){
     document.execCommand('bold', false, null); 
});

vs.:

$(document.body).on('click', '.btn-bold', function(){
     window.frames[0].document.body.execCommand('bold', false, null); 
});

Sieht es aus wie die meisten gut gemachten rich-text-Editoren verwenden Sie einen iframe. Ich kann zwar leicht dieses contenteditable /execCommand combo zu arbeiten, auf ein div/iframe in Webkit-Browsern, ich habe eine höllische Zeit versuchen, um das iframe-Element in Firefox. Ich bin mit einem Rückgriff auf das laden von Skripts und stylesheets in das iframe, und alle Arten von Unsinn zu duplizieren, was ich kann, leicht zu erreichen mit dem div-basierte version. Also die <div>-basierte Methode scheint vorzuziehen. Keine starken Gründe, die ich überdenken?

InformationsquelleAutor der Frage tim peterson | 2012-04-15

Schreibe einen Kommentar