TinyMCE v3 插件使用 jQuery 进行对话框行为答案

【问题标题】：TinyMCE v3 plugin using jQuery for dialog behaviourTinyMCE v3 插件使用 jQuery 进行对话框行为
【发布时间】：2018-05-11 11:58:39
【问题描述】：

我正在尝试创建一个具有以下功能的简单 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 元素，以生成我的对话框内容和行为，并保存新内容。但似乎我走错了路。不能让它工作。这种情况有什么提示或解决方案吗？

【问题讨论】：

标签： jquery tinymce

【解决方案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

我只是在保存时将旧部分替换为新部分。

【讨论】：