Ich versuche die Vor- und Nachteile der Verwendung von a abzuwägen <div> vs. <iframe> bei der Erstellung meines eigenen Rich-Text-/Wysiwyg-Editors.
Warum kann ich dabei nicht einfach a verwenden Inhalt editierbar <div> und warum bevorzugen so viele Menschen die <iframe> ?
Hintergrunddiskussion: Ein gängiger Weg, einen Wysiwyg-Editor zu erstellen, ist meines Wissens nach ein Div oder Iframe Inhalt editierbar und dann zu tun execCommand auf dem Dokument, das das div oder den Iframe-Körper enthält, um seinen Text fett oder was auch immer zu machen.
Hier ist der HTML-Code:
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<div contenteditable="true"></div>
</body>
</html>
gegen:
<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);
});
gegen:
$(document.body).on('click', '.btn-bold', function(){
window.frames[0].document.body.execCommand('bold', false, null);
});
Es sieht so aus, als ob die meisten gut gemachten Rich-Text-Editoren einen Iframe verwenden. Während ich das leicht bekommen kann Inhalt editierbar /execCommand Combo, um an einem div/iframe in Webkit-Browsern zu arbeiten, habe ich eine höllische Zeit damit, den iframe in Firefox zum Laufen zu bringen. Ich muss auf das Laden von Skripten und Stylesheets in den iframe und allen möglichen Unsinn zurückgreifen, um zu duplizieren, was ich mit der div-basierten Version leicht erreichen kann. Also die <div>-basierte Methode scheint vorzuziehen. Gibt es starke Gründe, die ich noch einmal überdenken sollte?
mögliches Duplikat des Erstellens eines Wysiwyg-Editors
– AlfonsoML
15. April 2012 um 13:51 Uhr
Hallo AlfonsoML, danke für den Link, leider geht es nicht um den Kern der Sache, nämlich dass ich Firefox nicht so einfach zum Laufen bringen kann
contenteditablein iframes. Ich möchte lieber keinen ganz anderen Codesatz erstellen, um mit diesem Browser umzugehen, und deshalb frage ich mich nur, warum ich nicht einfach ein div anstelle eines iframe verwenden kann.– Tim Petersen
15. April 2012 um 15:06 Uhr
Außerdem ist dieser Link anderthalb Jahre alt. Die Browser haben sich seitdem ziemlich verändert und ich habe ein abnehmendes Interesse daran, ältere Browser zu unterstützen.
– Tim Petersen
15. April 2012 um 15:24 Uhr
Obwohl Sie vielleicht denken, dass der Link “alt” ist, haben sich die Browser in Bezug auf contentEditable nicht wirklich geändert. Sie verbessern es nach und nach, aber Sie benötigen immer noch eine Menge Code, damit es in allen Browsern auf die gleiche Weise funktioniert. Die Antwort von Tim Down bietet einen Überblick (sowie eine Antwort zu iframe vs. div), aber der wichtigste Teil steht am Anfang: Es richtig zu machen, kostet viel Zeit und Mühe. Wenn Sie es nicht nur zum Lernen tun möchten, sollten Sie einen der vielen vorhandenen Editoren auswählen.
– AlfonsoML
15. April 2012 um 18:02 Uhr
Mir ist klar, dass es eine Weile her ist, seit die Frage gestellt wurde, aber Ihr HTML-Code eines iframe ist fehlerhaft – der Code zwischen den