Search code examples
javascriptjquerymedium-editor

How can I add a class to current active paragraph in Medium Editor?

I'm currently using the Medium Editor JS Clone on a project where I can edit articles.

The editor is working great, I can format elements and the code it's clean but I'm trying now to find a way for add photos while editing.

A great solution would be adding a side button to the active paragraph in absolute mode, but I haven't found any way to add a class to the current active paragraph.

This is what it generates:

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

Here's what I want to have:

Image Description of the problem

So, knowing which p inside the editor's div is the current active, will allow me to set the top position of the side button and on click append the just uploaded photo to the paragraph.

Solution

  • You can find the currently active element (where the selection is) using the getSelectedParentElement function

    editor.getSelectedParentElement()