Javascript 在TinyMCE中的元素旁边显示按钮

我想在指定元素的每个实例旁边显示一个按钮，例如span.mybutton，例如TinyMCE中的一个表，然后，当单击该按钮时，获取该特定元素的html，处理它，并在编辑器中更新它

我可以处理这个过程，但我不知道如何显示按钮并传入抓取特定元素的html。例如，如果我这样做，它会将span.mybutton的html添加到TinyMCE，就像它是常规内容一样，我不希望：

jQuery('iframe#content').contents().find('table').append('<span class="mybutton">My button</span>');

因此，我的两个问题是：

---

如何在不影响TinyMCE中保存的html的情况下在正确的位置显示按钮？而且，当单击按钮时，如何从TinyMCE获取/设置该元素？

如果我理解正确，您希望获取所有表DOM元素，并在其旁边放置一个按钮，该按钮执行一些操作

下面是我的第一个想法。我将做一些方便的假设，使之更容易，但如果我在某个地方做了一些错误的假设，请告诉我。我也不知道您已经知道多少javascript/jquery，所以如果我没有解释清楚，请告诉我

jQuery('iframe#content').contents().find('table').each(function(index, element) {
    // create a new button.
    var $btn = $('<input type="button" class="mybutton"></input>');

    function action() {
        // This is using the `processElement` function you defined in your question,
        // I am applying it to the specific table just grabbed.
        processElement(element);
    }
    $btn.click(action);

    // This should append the button. See http://api.jquery.com/after/
    $(element).after($btn[0]);
});

---

让我知道这是否适用于您。

这看起来像是创建了一个按钮变量，但我没有看到任何显示它的代码。这是我需要弄清楚的关键部分。如果有多个表，也许我们可以使用each函数中的索引来获取正在处理的表的数量。同样，请注意，“h3”在我的问题中是一个拼写错误。应该是查找“表”。哎呀。我确实忘记实际添加按钮了，不是吗：。查看我的编辑。我还假设My按钮应该是一个输入元素。但是如果这就是你想要插入的按钮，那么就把代码放在我的位置。问题是，这会将它插入到内容中，所以按钮是可编辑的，可删除的，并保存在帖子中。问题是如何将按钮放置在那里，但将其放置在DOM中的其他位置。恐怕我不明白。用户不能以任何方式编辑=按钮类型的字段。用户也不能以任何方式删除该按钮。您所说的可编辑/可删除是什么意思？由用户提供？我的这个问题和你的主要问题有关吗？

jQuery('iframe#content').contents().find('table').each(function(index, element) {
    // create a new button.
    var $btn = $('<input type="button" class="mybutton"></input>');

    function action() {
        // This is using the `processElement` function you defined in your question,
        // I am applying it to the specific table just grabbed.
        processElement(element);
    }
    $btn.click(action);

    // This should append the button. See http://api.jquery.com/after/
    $(element).after($btn[0]);
});