2011-05-09 53 views
1

您好我有一個tinyMCE jquery插件和jeditable的textarea組合。點擊可編輯元素後,它會變成一個tinymce iframe。現在我需要通過使用tinymce.triggerSave()在表單被ajaxed之前將iframe內容傳遞迴textarea。jEditable:將TinyMCE內容傳回給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();在提交可接受的表單之前。所以就像回調的對立面。

感謝,

比利

回答

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 
    }); 
+0

這看起來不錯,我稍後再試一試,讓你知道。乾杯 – iamjonesy 2011-05-12 08:56:06

+0

工作過,謝謝! – iamjonesy 2011-05-12 12:53:12

+0

我的榮幸。我知道這是多麼令人沮喪。隨意檢查我的其他帖子,以獲得更多TinyMCE + JEditable戲劇。 – ksindi 2011-05-12 12:54:44

相關問題