Ich möchte einen Editor mit Slate oder ProseMirror erstellen und bei Verwendung eines Inline-Elements ein merkwürdiges Verhalten mit Chrome um die Caret-Position und den Auswahlbereich feststellen . Problem 1 ist im ersten Bild unten dargestellt. Wenn sich die Position des Textcursors hinter dem "f" befindet, wird das Caret oben im Bild angezeigt. Problem 2 befindet sich im zweiten Bild. Wenn Sie den Text auswählen, wird ein hervorgehobener Bereich angezeigt, der so hoch ist wie im inline-Element. Gibt es eine Möglichkeit, dieses Verhalten zu steuern und stattdessen das Caret an der Position des Textes anzuzeigen und nur den Raum um den Text hervorzuheben (auch wenn das Inline-Bild die Zeilenhöhe vergrößert)?
Ich möchte das Verhalten hier von Firefox nachahmen:
Beispielbilder wurden mit der ProseMirror-Demo hier erstellt: https://prosemirror.net/examples/basic/
Ein minimales Beispiel (danke @Kaiido) mit JSBin :
<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>
Ich bin mir nicht sicher, wie sich dies unter anderen Betriebssystemen verhält, aber ich verwende macOS Catalina.
quelle
<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>
. Nun, so machen sie es, es gibt derzeit keine Spezifikationen, so dass sie ziemlich frei sind, das zu tun, was sie für das Beste halten. Benötigen Sie diese Bibliotheken unbedingt oder reicht Ihnen eine Rohlösung?Antworten:
Sie können das Auswahlproblem mithilfe der Flexbox beheben. Ich habe ursprünglich versucht, zu verwenden,
align-items: flex-end
aber ich bekam ein seltsames Verhalten der Pfeiltasten.align-items: baseline
scheint ab sofort zu funktionieren.Das Bildproblem ist sehr seltsam. Mir ist aufgefallen, dass Chrome SVG-Elemente anders als IMG-Elemente überschreitet. Ab sofort "wartet" die neueste Version von Chrome vor dem Überspringen von IMG, ermöglicht es dem Benutzer jedoch, ein SVG wie jedes andere Zeichen zu überspringen (der linke Pfeil überspringt das Zeichen, das dem SVG am nächsten liegt). Dies kann durch zugrunde liegende Standardstile verursacht werden, aber ich weiß es nicht.
Ich wollte gerade meine Ergebnisse veröffentlichen, stellte jedoch fest, dass Firefox nicht gleich funktionierte. Firefox hat bei Verwendung von SVG und / oder Flexbox ein wirklich seltsames Verhalten der Pfeiltasten. Der Cursor bewegt sich über dem Bild, jedoch nur, wenn Sie die rechte Pfeiltaste drücken.
Firefox funktioniert jedoch problemlos mit einem normalen IMG-Element.
Kurz gesagt, Sie müssen je nach Browser verschiedene Bildelemente rendern.
PS Viele Editoren habe ich standardmäßig für Bilder in voller Breite verwendet.
Bearbeiten: Ich habe gerade festgestellt, dass meine Firefox-Lösung anscheinend auch in der neuesten Version von Chrome funktioniert. Ich denke, das funktioniert, weil ich die Textknoten in SPAN-Elemente eingeschlossen habe. Das SVG-Element funktioniert in Chrome immer noch anders, aber das Umschließen von Text in SPAN scheint die meisten Probleme zu lösen.
quelle
span
mitcontenteditable="false"
und das scheint die Arbeit an Chrome und Firefox! jsbin.com/xosasuruni/edit?html,outputdisplay: flex
es funktionieren wird, da jetzt der Text in jedem Element nicht Teil derselben Zeile ist. Wenn der Text in einem der Elemente zu lang ist, wird der andere Text nichtflex-wrap: wrap;
Bearbeiten Sie zunächst nicht das ProseMirror-DOM wie im JQuery-Beispiel gezeigt. Tatsächlich werden Sie höchstwahrscheinlich auf DOM- oder Inhaltsprobleme stoßen. ProseMirror verwendet einen eigenen DOM-Knoten und ein eigenes Markup-Schema. Wenn Sie das ProseMirror-DOM bearbeiten oder ein Plugin hinzufügen möchten, schauen Sie sich die Markup-, Plugin- und Node-Apis an. Ich habe ein einfaches Beispiel für Textausrichtungs-Markup-Code angehängt. Nebenbei bemerkt, der Grund, warum Grammarly und andere keine ProseMirror-Plugins haben, ist der DOM-Ansatz / die DOM-Modelle. Ich sollte hinzufügen, dass ProseMirror sehr gut ist, aber um ehrlich zu sein, ist es eher eine fortschrittliche Entwicklerlösung.
Abgesehen davon sind die guten Nachrichten die Probleme, die Sie haben, ein reines CSS. ProseMirror entfernt alle Klassen und setzt das DOM / CSS zurück. Wenn Sie also ein Dokument importieren oder alle / die meisten ausschneiden und einfügen, sind Ihre Klassen verschwunden.
Der einfachste Lösungsansatz besteht darin, den Editor in ein Div zu verpacken und dem Div eine Klasse zuzuweisen und dieser Klasse dann Stile und untergeordnete Stile hinzuzufügen. Der Grund für den Wrap ist, dass die CSS-Selektoren wie img, p, h usw. nur für die Tags innerhalb der Editor-Klasse gelten. Ohne das kommt es zu offensichtlichen CSS-Konflikten.
CSS
float: left;
(empfohlener Ansatz)vertical-align: baseline;
jedoch ohne Gleitkommazahlen, immer noch einen Cursor haben, der der Höhe des Bildes und nicht dem Text entspricht. Wenn Sie keine Floats verwenden, wird der Cursor verlängert, da die Linienhöhe praktisch der Höhe des Bildes entspricht. Die blaue Farbe ist nur eine Auswahl, die Sie auch mit CSS ändern.Beispiel für eine Knotenerweiterung
Beispiel für eine Knotenerweiterung für die Textausrichtung, die als Symbolleiste hinzugefügt werden kann. Viel längerer Beitrag, aber selbst wenn Sie einen Knoten / ein Plugin für Bilder erstellt haben, müssen Sie sich mit der Art und Weise auseinandersetzen, in der es rendert, dh base64 versus url usw., was übrigens durchaus Sinn macht, warum sie das getan haben, aber fügen Sie einfach hinzu Komplexität für Entwickler, die nach SEO usw. suchen
quelle
Ich habe versucht, einen kleinen Hack mit HTML und CSS zu machen.
// CSS
Hier ist jsfiddle https://jsfiddle.net/wtekxavm/1/
quelle