Markdown widget becomes unresponsive when a model has multiple DraceditorField

[gomezjdaniel]

Hello,

I just found this plugin and it is just what I need -congratulations for the good work ;)-, after installing and setting up some fields to DraceditorField() I entered the django admin panel and found the following error.

While in a model if you have only just 1 DraceditorField, the widget works as expected

But in the moment that in a same model two DraceditorFields are added when entering admin panel one of the widgets become unresponsive and duplicated with information of the previous field, and of course it is impossible to edit its content also. Try it by yourself, declare a model with two DraceditorField.

See how 2nd Markdown editor looks weird in the following image:

Do you have a guess on why this is happening? Could be easy for you to fix it?

[agusmakmun]

This because the Ace Editor need specific html selector id (<div id="draceditor"></div>) to render that editor. Of course selector id can't be used more than one in one page. an example;

You can see this line;

// Ace editor
var editor = ace.edit('draceditor'); // require for div#id => <div id="draceditor"></div>
var sessionEditor = editor.getSession();

---

Basic way to do that, perhaps using dynamic ids from that fields, an example;

Markup:

<div id="description1"></div>
<div id="description2"></div>

Finding an instance:

var editor1 = ace.edit("description1");
var editor2 = ace.edit("description2");

But until now, I never seen the best solution for that problem. I would be very happy if you find a solution for us.. 👍

[gomezjdaniel]

I couldn't fix it by myself but what you have to do is when rendering the widget pass to the context the field name

        return template.render({
            'draceditor': widget,
            'field_name': name,
        })

And then to modify the template to use this field_name and instatiate the ace editor INSIDE the template, something like

<div class="main-draceditor-{{ field_name }}" data-field-name="{{ field_name }}">
  {% include 'draceditor/toolbar.html' %}

  <div class="section-draceditor">
    <div id="draceditor-{{ field_name }}"></div>
    {{ draceditor }}
    <div class="draceditor-preview"></div>
  </div>

  {% include 'draceditor/guide.html' %}
  {% include 'draceditor/emoji.html' %}
</div>

<script>
    $(function() {
        $('.main-draceditor-{{ field_name }}').draceditor();
    });

    $( document ).ready(function(){
        // Semantic UI
        $('.main-draceditor-{{ field_name }} .ui.dropdown').dropdown();
    });
</script>

But it is not working properly and I dont know why :\

[agusmakmun]

Great idea, let me check out soon...

---

Update: 26 August 2017

Because if you check at this souce: https://github.com/agusmakmun/dracos-markdown-editor/blob/master/draceditor/static/draceditor/js/draceditor.js#L684, you will see here we using direct ID.

var draceEditorId     = $('#draceditor');

[olymk2]

you could also set a class on the drac editor div along side the id.

Then in javascript foreach over the class to first grab the id before creating an instance of draceditor for this id.

Something like this for example.

$.each( 'myclass', function( key, value ) {
  $(this.attr('id')).draceditor();
});

[gomezjdaniel]

Any update?

[pypetey]

@agusmakmun any updates?

[agusmakmun]

@pypetey not yet until now... I would be very grateful if there is someone who helped solve the problem.

[pypetey]

@agusmakmun I will try to verify that after Tuesday. I might have some ideas but I will have to dig into the code more deeply

[agusmakmun]

Recommended to upgrade the latest version, still similiar.
from DracEditor to Martor

$ pip install martor