Question

我需要能够做到以下几点：

点击iframe中包含的<span class="editable">元素。
出现了一个带有TinyMCE wysiwyg的弹出窗口。来自iframe“editable”元素的内容被加载到TinyMCE中。我编辑内容然后点击保存按钮。
新编辑的内容会在iframe上更新。

到目前为止，我有这个（有效）

$(document).ready(function () {

    $("#template").contents().find(".editable").bind("click", function () {
        // get content of clicked item and insert it into wysiwyg
        $('#wysiwyg').html($(this).html());

        // give this element myedit id (this is so that I know which element i'm editing)
        $(this).attr('id', 'myedit');
    });

    // Wysiwyg
    $('#save').click(function () {
        // find element that i'm editing and update it's content with new content from wysiwyg
        $("#template").contents().find("#myedit").html($('#wysiwyg').html());

        // remove editid
        $("#template").contents().find("#myedit").attr('id', '');
        return false;
    });


});

问题：如果不来回分配myedit id，我该怎么做？只是简单地使用$（this）？所以我知道，当完成编辑时，$（this）将使用新内容进行更新。

感谢

Answer 1

关于$(this)问题，您可以执行$(this).data('calledFrom',$(this));，然后在第二个.click()函数中引用它：$('#wysiwyg').data('calledFrom').html($('#wysiwyg').html());

选项1的代码：

$(document).ready(function () {

  $("#template").contents().find(".editable").bind("click", function (e) {
    e.preventDefault();
    // get content of clicked item and insert it into wysiwyg
    $('#wysiwyg').html($(this).html());

    // give this element myedit id (this is so that I know which element i'm editing)
    $(this).data('calledFrom', $(this));
  });

  // Wysiwyg
  $('#save').click(function (e) {
    // find element that i'm editing and update it's content with new content from wysiwyg
    e.preventDefault();
    $('#wysiwyg').data('calledFrom').html($('#wysiwyg').html());

    return false;
  });

});

选项2（将其全部放在一个函数中）：

$(document).ready(function () {
  $("#template").contents().find(".editable").bind("click", function (e) {
    e.preventDefault();
    $this = $(this);
    // get content of clicked item and insert it into wysiwyg
    $('#wysiwyg').html( $this.html() );
    $('#save').bind('click',function(e) {
      e.preventDefault();
      $(this).unbind('click');
      $this.html($('#wysiwyg').html());
    });
  });
});

更短，但不太可读。

不确定这是否有帮助，但我希望它会！

P.S。在您的功能中使用e.preventDefault()总是使用{{1}}，因为它受到更新，更流行的浏览器的支持

Jquery编辑从wysiwyg到iframe元素的内容

1 个答案: