Как я могу добавить класс к текущему активному абзацу в Medium Editor?

Question

В настоящее время я использую Medium Editor JS Clone в проекте, где я могу редактировать статьи.

Редактор работает отлично, я могу отформатировать элементы и код, он чистый, но сейчас я пытаюсь найти способ добавить фотографии во время редактирования.

Отличным решением было бы добавить боковую кнопку к активному абзацу в абсолютном режиме, но я не нашел способа добавить класс в текущий активный абзац.

Вот что он генерирует:

<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>

Вот что я хочу иметь:

Таким образом, зная, какой p внутри div редактора является текущим активным, я смогу установить верхнюю позицию боковой кнопки и при щелчке добавить только что загруженную фотографию к абзацу.

Answer 1

Вы можете найти активный в данный момент элемент (где выделение), используя функцию getSelectedParentElement

editor.getSelectedParentElement()

Answer 2

Я считаю, что в большинстве случаев просто getSelectedParentElement() должно работать нормально, но могут быть случаи, когда звонят editor.getSelectedParentElement() может не дать вам блочный контейнерный элемент верхнего уровня, который вы ищете. Могут быть некоторые типы форматирования, когда элементы могут быть вложены друг в друга (т.е. <pre> в пределах <p> или <p> в пределах <blockquote>)

Есть еще одно getTopBlockContainer(element) вспомогательный метод выставляется через MediumEditor.util.getTopBlockContainer(element) который примет элемент и вернет контейнер блочного элемента верхнего уровня, который является прямым потомком корня <div> редактора.

Итак, если вы хотите всегда получать блочный элемент, который является прямым потомком корневого редактора <div>Вы можете использовать комбинацию getSelectedParentElement() а также getTopBlockContainer() как это:

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