我正在尝试创建一个简单的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);
});
},
$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元素，生成我的对话框内容和行为，并保存新内容。但似乎我走错了路。不能让它工作。对于这种情况有什么提示或解决方案吗？
令人困惑的部分与我的编辑器加载在 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
我只是在保存时用新部分替换我的旧部分。