Show Editable fields on page load using medium-editor

Question

I am using medium-editor js to for the editable fields. When I hover on the respecitve field/s it shows me the fields to edit.

But, I want it to show the editable fields on page load instead of hovering over the div containing editable fields.

Is there option that I can pass while intializing MediumEditor class or any other way to show all editable fields on page load?

My code looks like this

 var editor = new MediumEditor(el, {
            placeholder: false,
            toolbar: false
        })

        editor.subscribe('editableInput', function (event, currentEditable) {
// Code for editable Fields
}

Answer 1

If you're instantiating MediumEditor by passing an element directly (the el variable in your example code) then can't you add a custom css class to each element you pass into the editor? I'm not sure where el is coming from in your example code, but you could do something like this:

var els = document.querySelectorAll('.editable');
var editor1 = new MediumEditor(els, {
  placeholder: false,
  toolbar: false
});

.editable {
  border: 3px solid #00ff00;
}

<script src="http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<link href="http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" rel="stylesheet" />


<div class="editable">Editor Field 1</div>
<div>Non-Editable Field</div>
<div class="editable">Editor Field 2</div>

The result of this would be each of the editor fields has a 'editable' class on it, and I've styled those fields with a border via css.

Is this what you were asking for?