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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gründe für die
iframe
Vor -
Nachteile
Persönlich entwickelte ich meinen eigenen editor, und ich wählen, um es in ein
iframe
.InformationsquelleAutor der Antwort Benibur
Erste von allen... nicht versuchen, machen Sie Ihre eigenen WYSIWYG-editor, wenn Sie denken über die kommerzielle Nutzung. Es ist eine Coole Idee für ein persönliches Projekt, weil Sie lernen können, vielaber es wird Jahre dauern, um zu erstellen-editor, werden Sie in der Lage, zu verkaufen, um jemanden, der sich darüber sorgt, ob es wirklich funktioniert, nicht einfach nur sieht. Ich habe vor kurzem gesehen einige wirklich cool suchen neue Redakteure, aber Sie wirklich nicht funktioniert. Wirklich. Und das ist nicht, weil Ihre Entwickler saugen - es ist, weil Browser saugen.
OK, das war ein großartiges intro, jetzt ein paar Fakten:
Nun die Antwort ist - zusätzlich zu dem, was Tim nach Unten schrieb hier Aufbau eines wysiwyg-editor können Sie Lesen, was ich schrieb, unter dieser Frage HTML-WYSIWYG-edtor: warum ist der editierbare Inhalt verschoben in einen iFrame
Grundsätzlich in einem iframe-Sie sind sicherer, Sie haben das gesamte Dokument, der Inhalt wird nicht Auslaufen Ihrer editierbare element, können Sie Stile verwenden, etc. Es gibt auch einige Nachteil der iframe-Ansatz - es ist schwerer, bootstrap-code ist... wirklich schwierig, kann man nicht Erben, der Stil der website-editor ist angebracht, ich denke mal, dass die Verwaltung konzentrieren kann schwieriger sein, in diesem Fall, und Sie haben, um die Aufmerksamkeit in dem Dokument, das Sie neue Elemente erstellen (nur relevant im IE<8).
Und denken Sie daran - nicht schreiben Sie Ihre eigenen editor-es sei denn, Sie bereit sind, für Probleme wie dieses Einfügen als nur-text Contenteditable div & textarea (word/excel...) 😀
InformationsquelleAutor der Antwort Reinmar