Wie kann ich dem aktuellen aktiven Absatz im Medieneditor eine Klasse hinzufügen?

Question

Ich verwende derzeit die Medium Editor JS Clone für ein Projekt, wo ich Artikel bearbeiten kann.

Der Editor funktioniert gut, ich kann Elemente formatieren und der Code ist sauber, aber ich versuche jetzt einen Weg zu finden, um Fotos während der Bearbeitung hinzuzufügen.

Eine großartige Lösung wäre das Hinzufügen einer Seitenschaltfläche zum aktiven Absatz im absoluten Modus, aber ich habe keine Möglichkeit gefunden, dem aktuellen aktiven Absatz eine Klasse hinzuzufügen.

Dies ist, was es erzeugt:

<div class="editable" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="574f8260-cdfd-bf53-e5e4-3fff9da2aa19" data-placeholder="Scrivi il testo..." data-medium-focused="true"> 
    <p>Hello this is an editor test.</p> 
    <p>This is an another paragraph.</p> 
</div> 

Hier ist, was ich haben will:

Also, was p innerhalb des Herausgebers div wissen, die aktuelle aktiv ist, wird mir erlauben, um die obere Position der Seitentaste festzulegen und beim Klicken das gerade hochgeladene Foto an den Absatz anzuhängen.

Answer 1

Sie können das aktuell aktive Element finden (wo die Auswahl ist) unter Verwendung der getSelectedParentElement Funktion

editor.getSelectedParentElement() 

Answer 2

ich für die meisten Fälle glauben nur getSelectedParentElement() mit sollte gut funktionieren, aber es kann Fälle geben, wo editor.getSelectedParentElement() Aufruf möglicherweise nicht Geben Sie das Blockelement auf oberster Ebene an, nach dem Sie suchen. Es kann einige Arten von Formatierungs sein, wo Elemente ineinander verschachtelt werden können (dh eine <pre> innerhalb eines <p> oder ein <p> innerhalb eines <blockquote>)

Es gibt einen weiteren getTopBlockContainer(element) Hilfsmethode über MediumEditor.util.getTopBlockContainer(element) ausgesetzt, die in einem Element nehmen und Rückkehr der oberste Blockelement-Container, der ein direktes Kind des Stammes <div> des Editors ist.

Also, wenn Sie schauen, um immer das Blockelement zu erhalten, die ein direktes Kind des Wurzel Editor ist <div>, können Sie eine Kombination aus getSelectedParentElement() und getTopBlockContainer() wie folgt verwenden:

var topBlock = MediumEditor.util.getTopBlockContainer(editor.getSelectedParentElement());