Плагин TinyMCE v3, использующий jQuery для диалогового поведения

Question

Я пытаюсь создать простой плагин TinyMCE со следующими функциями:

• при нажатии div.my-todo-list-container появится диалоговое окно
• div будет выбран в качестве объекта jQuery
• Добавить, Удалить кнопки для каждого элемента списка
• вкл. Удалить элемент будет удален
• вкл. Появится новый элемент с таким же поведением (Добавить, Удалить параметры)
• при сохранении списка элементов будет обновлено содержимое div.my-todo-list-container.

(Это только пример. В моем случае элементы более сложные.)

Я в порядке с частью JQuery.У меня уже есть реализация моего поведения.Также я решил основную структуру для моего плагина.Пользовательская кнопка появляется в меню, при нажатии появляется диалоговое окно, также при выборе пользовательского div в редакторе выбирается кнопка.

Но я не уверен, как интегрировать мой код jQuery здесь.Теперь в моем шаблоне dialog.html:

<form onsubmit="tinymce.activeEditor.plugins.my_plugin._onSave();" action="#">
...

и

<script>
  tinymce.activeEditor.plugins.my_plugin._onEdit();
</script>

используется для вызова моих методов, определенных таким образом

_onSave: function() {
  alert("Saved");
},

_onEdit: function() {
  $(document).ready(function() {
    var $content = $("#" + tinyMCE.activeEditor.editorId);
  });
},

The $content кажется действительно странным:

$content.length
1
typeof $content
"object"
$content instanceof jQuery
true
$content.html()
returns the html code as expected

НО:

$content.find('div').length
0 - when I have a lot of divs...

Я ожидаю получить элемент jquery dom, сгенерировать содержимое и поведение моего диалогового окна и просто сохранить новый контент.Но похоже, что я на неправильном пути.Не может быть, это работает.Любой намек или решение для такого типа ситуации?

Answer 1

Запутанная часть была связана с тем, что мой редактор загружен в iframe. С помощью контекстного поиска основная проблема была решена. Пример: $content = $("iframe").contents().find('div.my-todo-list-container').first();

Также я нашел простые решения для обновления или добавления нового контента:

$old_section.replaceWith(html_content); // update

tinyMCE.activeEditor.selection.setContent(html_content); // in case section is missing I use this to create a section in given selection

Я просто заменяю свой старый раздел новым, при сохранении.