tinyMCE的一个效果 tinymceCSSSafari

最近使用tinymce，需要做到根据textarea的样式自动使用fcke和mce。要求如果textarea有样式inst，该textarea有初始值并在点击的时候要删除该值。

下载mce的包，在mce包中加入文件init.js

    tinyMCE.init({
        // General options
        mode : "none",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",

        // Theme options
        theme_advanced_toolbar_location : "top", 
        theme_advanced_toolbar_align : "left", 
        theme_advanced_buttons1 : "bold,italic,|,sub,sup,bullist,numlist,|,link,unlink,charmap", 
        theme_advanced_buttons2 : "", 
        theme_advanced_buttons3 : "",

        // Example content CSS (should be your site CSS)
        content_css : "/tiny_mce/css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "/tiny_mce/lists/template_list.js",
        external_link_list_url : "/tiny_mce/lists/link_list.js",
        external_image_list_url : "/tiny_mce/lists/image_list.js",
        media_external_list_url : "/tiny_mce/lists/media_list.js",
        
        init_instance_callback: "myCustomInitInstance",
        
        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
    
    
function myCustomInitInstance(ed) {
    tinymce.dom.Event.add(ed.getWin(), 'focus', function(e) {
        var textarea = $('#' + ed.id);
        if(textarea.hasClass('inst')){
            textarea.removeClass('inst');
            ed.setContent('<p></p>');
        }
    });
}

注意这个时候mode：none。在页面的head中引入/tiny_mce/tiny_mce.js和/tiny_mce/init.js

当需要加载的时候只需要调用

tinyMCE.execCommand('mceAddControl', false, this.id);

就可以生成mce编辑器了。

如果需要动态的移除mce，只需要调用

if (tinyMCE.getInstanceById(this.id))
{
    tinyMCE.execCommand('mceFocus', false, this.id);                    
    tinyMCE.execCommand('mceRemoveControl', false, this.id);
}

 myCustomInitInstance是指在mce加载后调用的函数