jEditable：将 TinyMCE 内容传回 textarea

Question

您好，我在 textarea 上混合了 tinyMCE jquery 插件和 jeditable。单击可编辑元素时，它会变成 tinymce iframe。现在我需要在表单被 ajaxed 之前使用 tinymce.triggerSave() 将 iframe 内容传递回 textarea。

有人知道吗？

    function editNote(){
    $('.edit').editable('<?php echo base_url(); ?>index.php/notes/edit', {
         type      : 'textarea',
         onblur    : 'ignore',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='<?php echo base_url(); ?>css/images/indicator.gif'>",
         tooltip   : 'Click to edit...'

     });
 }

 $('.edit').live('click', function(){
    editNote();
    $('textarea').tinymce({
                    // Location of TinyMCE script
                    script_url : '<?php echo base_url(); ?>js/tiny_mce/tiny_mce.js',

                    // General options
                    theme : "simple"
});
});

上面的代码调用了editNote函数，然后调用了tinymce js。

我正在寻找一种方法来运行 tinyMCE.triggerSave();在提交可编辑表单之前。所以类似于回调的反面。

谢谢，

比利

Answer 1

改为添加这段代码。您基本上创建了一个名为 mce 的新类型。

$.fn.tinymce = function(options){
   return this.each(function(){
      tinyMCE.execCommand("mceAddControl", true, this.id);
   });
}

function initMCE(){
   tinyMCE.init({
        mode : "textarea",
        theme : "advanced",
        ... // YOUR CUSTOMIZATION
      });
}

initMCE();

$.editable.addInputType('mce', {
   element : function(settings, original) {
      var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
      if (settings.rows) {
         textarea.attr('rows', settings.rows);
      } else {
         textarea.height(settings.height);
      }
      if (settings.cols) {
         textarea.attr('cols', settings.cols);
      } else {
         textarea.width(settings.width);
      }
      $(this).append(textarea);
         return(textarea);
      },
   plugin : function(settings, original) {
      tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
      },
   submit : function(settings, original) {
      tinyMCE.triggerSave();
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      },
   reset : function(settings, original) {
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      original.reset(this);
   }
});

在您的 JEditable 启动中将其设为 mce 类型。所以：

    $(".edit").editable('ajax/save.php?editnotetext', {
        type : 'mce',
        ... // etc
    });