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
- Verwenden Sie Flexbox nicht für Inline-Bilder, da Flexbox kein Rastersystem ist. Wenn ich mich recht erinnere, können Sie keine direkten Kinder des Flex-Containers inline.
- Inline auf p-Tags und img wird keinen Text umbrechen und Sie werden mit den oben aufgeführten Problemen enden.
- Wenn Sie das Cursorproblem, das Sie haben, wirklich umbrechen und entfernen möchten, müssen Sie Floats verwenden, z. B.
float: left;(empfohlener Ansatz)
- Fügen Sie kleine oder große Polster und Rahmenboxen hinzu, um das Zusammenfallen von Kanten zu erleichtern und um Bild und Text voneinander zu trennen
- Das Cursorproblem besteht darin, dass Sie innerhalb des Bildblocks, der vertikal nach oben ausgerichtet ist und mit dem Sie das Problem beheben können,
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.
<html>
<div class="editor">
<!-- <editor></editor>-->
</div>
</html>
<style>
.editor {
position: relative;
display: block;
padding: 10px;
}
.editor p {
font-weight: 400;
font-size: 1rem;
font-family: Roboto, Arial, serif;
color: #777777;
display: inline;
vertical-align: baseline;
}
.editor img {
width: 50px;
float: left;
padding: 20px;
}
</style>
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
export default class Paragraph extends Node {
get name() {
return 'paragraph';
}
get defaultOptions() {
return {
textAlign: ['left', 'center', 'right'],
}
}
inputRules({ type }) {
return [
markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
]
}
get schema() {
return {
attrs: {
textAlign: {
default: 'left'
}
},
content: 'inline*',
group: 'block',
draggable: false,
inclusive: false,
defining : true,
parseDOM: [
{
tag: 'p',
style: 'text-align',
getAttrs: value => value
}
],
toDOM: (node) => [ 'p', {
style: 'text-align:' + node.attrs.textAlign,
class: `type--base type--std text-` + node.attrs.textAlign
}, 0 ]
};
}
commands ({ type }) {
return (attrs) => updateMark(type, attrs)
}
}
<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?