selectImg menu doesn't appear after image uploaded

[orhanveli]

I implemented editor to my CMS and image upload phase works well but selecting new uploaded image by clickig on it couse this console oputput;

Uncaught TypeError: Cannot read property 'options' of null

Releated code is; in Images.prototype.addToolbar() method,

var mediumEditor = this.core.getEditor();
var toolbarContainer = mediumEditor.options.elementsContainer || 'body';

this.core.getEditor() method returns null.

Am I miss something?

[linkesch]

How do you initialize the plugin? You should provide editor instance like this:

$('.editable').mediumInsert({
    editor: editor
});

[orhanveli]

Just like that but problem occurs when I clicked new uploaded image

[linkesch]

Can you reproduce your problem in https://jsfiddle.net/? It works without any error on our demo page.

[orhanveli]

Hi all

Finaly I found the problem. Because of using multiple element as editable was my issue. If anyone exprienced smillar problem can fix this problem with $(selector).each() pattern via jquery something like that:

  function makeEditable(el) {

    var editor = new MediumEditor(el, {
      "autolink": true
    });
    $(el).mediumInsert({
      "editor": editor,
      spellcheck: false,
    });
  }

  $(".editable").each(function (i, elem) {
    makeEditable(elem);
  });

cheers.

[a-vasyukov]

@orhanveli thanks a lot! it works for me. but serialize() shows last enabled editor, how can i get content of all enabled editors?

[orhanveli]

Actually I used knockoutJS with medium editor with dynamic elements and in makeEditable function theres is a subsription code like that;

function makeEditable(el) {
  var editor = new MediumEditor(el, {
    "autolink": true
  });

  editor.subscribe('editableInput', function (event, editable) {
    var $this = $(editable);
    var $form = $this.closest(".component-wrapper");
    var $textarea = $form.find(".editor-body");
    var serialized = editor.serialize();
    $textarea.val(serialized["element-0"].value);
  });

  // insert plugin initialization part...
}

Editable contents markup something like that:

  <div class="component-wrapper">
    <textarea class="editor-body"></textarea >
    <div class="editable"></div>
  </div>

when finished editing user push a button to save content and I select and loop with $.each all of ".editor-body" textareas. If you want to combine them you can do your concatanation logic in that point.

I hope it will help :)