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

Posted 2023-03-07

【中文标题】在 TinyMCE 中的元素旁边显示一个按钮

【英文标题】：Show a button next to an element inside TinyMCE

【发布时间】：2012-02-11 04:20:27

【问题描述】：

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

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

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

这是我想要做的：

function processElement( element, values ) 
      // do stuff to the table html (I don't need help with this part)
      return element;



function appendButtonToTinyMCEElement ( button, element ) 

     // put button next to all instances of the specified element in TinyMCE
     // (in this case, put span.mybutton at the corner of all tables)




$('.myhelperbutton').click(function()

      var element = ??? // get content of the element whose button was clicked
      var element = processElement( element );
      // send element back to TinyMCE (not sure how)

);

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

【参考方案1】：

如果我理解正确，您希望获取所有表格 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]);
);

让我知道这是否适合你。

【讨论】：

看起来这会创建一个按钮变量，但我没有看到任何显示它的代码。这是我需要弄清楚的关键部分。对于多个表，也许我们可以使用每个函数中的索引来获取我们正在使用的表的编号。喜欢<input type="button" tableindex="'+index+'"></input>'

另外，请注意 - 'h3' 是我的问题中的错字。应该是find('table')。

哎呀。我确实忘记实际添加按钮了，不是吗:)。请参阅我的编辑。我还假设<span class="mybutton">My button</span> 应该是一个输入元素。但是，如果这就是您要作为按钮插入的意思，那么只需将该代码替换为我的 <input type="button" class="mybutton"></input>

问题在于这会将其插入到内容中——因此，该按钮是可编辑、可删除的，并且会保存在帖子中。问题是如何将按钮放在那里，但让它在 DOM 中的其他地方“活动”。

恐怕我听不懂。 type="button" 的 <input> 字段不能由用户以任何方式“编辑”。用户也不能以任何方式“删除”按钮。用户所说的“可编辑/可删除”是什么意思？并且是我的这个问题与您的主要问题有关吗？