TinyMCE多输入框手动激活解决方案

昨晚弄那个TinyMCE编辑器，对于单输入框的时候还是比较好处理的，直接自动生成实例就激活了，但是当一个页面有多个输入框的时候就变得很复杂了。比如有三个四个的输入框，默认生成实例激活的话会很难看很乱，我们的目标是当一个输入框onfocus状态的时候激活TinyMCE编辑器，激活另一个输入框onfocus状态的时候，已激活的TinyMCE编辑器关闭，并在新的输入框中显示编辑器。

对于已经初始化好的textarea我们可以通过如下调用textarea id的方法进行显示和关闭：

tinyMCE.get('nenew').show(); 
tinyMCE.get('nenew').hide(); 

但是如果直接在tinymce的tinymce.init()之后调用会发生error，因为tinymce的实例可能还并没有初始化完成，所以我们需要一个回调，TinyMCE的API还是很全面的，虽然昨晚用的那个API有点儿小麻烦，不过已经折腾成功，经验分享下。

This option should contain a function name to be executed each time a editor instance is initialized. The format of this function is: initInstance(inst) where inst is the editor instance object reference.

Example of usage of the init_instance_callback option:

function myCustomInitInstance(inst) { 
        alert("Editor: " + inst.editorId + " is now initialized."); 
} 
tinyMCE.init({ 
        ... 
        init_instance_callback : "myCustomInitInstance" 
}); 

上面是init_instance_callback的回调接口，但是还是得仔细读读那段说明：“这个选项在每个编辑器实例初始化完成后都要执行一次，这个function的格式是function callback(inst)，而这个inst就是刚刚初始化完成的实例。”

可能看到上面的话你会觉得有些绕，对于后半句的那个功能是针对实例初始化完成后调用的，这是我们所需要的，但是请注意，这个回调是在每个实例初始化完成后都执行的，换句话说，你有4个textarea这个callback就要执行四次，但是如果你在这个callback中执行了针对未初始化的实例的操作，就会发生错误导致js无法继续进行初始化。

针对我们上面所说的，我们的目的是在所有textarea实例初始化完成后执行对于实例的隐藏，所以如果我们有三个实例的话，我们只要在第三个实例初始化完成后执行一次就可以了。直接上代码：

<form> 
<textarea id="1"  
onfocus="tinyMCE.get('1').show();tinyMCE.get('1').focus();tinyMCE.get('2').hide();tinyMCE.get('3').hide();"> 
</textarea> 
<textarea id="2"  
onfocus="tinyMCE.get('2').show();tinyMCE.get('2').focus();tinyMCE.get('1').hide();tinyMCE.get('3').hide();"> 
</textarea> 
<textarea id="3"  
onfocus="tinyMCE.get('3').show();tinyMCE.get('3').focus();tinyMCE.get('1').hide();tinyMCE.get('2').hide();"> 
</textarea> 
</from> 

这个是表单的形式，也就是在每次onfocus状态的时候tinymce的激活关闭与选中，下面是javascript的初始化

<script src="editor/tinymce.min.js"></script> 
<script type="text/javascript"> 
    tinymce 
            .init({ 
                selector : "textarea", 
                plugins : [ 
                        "advlist autolink lists link image charmap print preview anchor", 
                        "searchreplace visualblocks code fullscreen", 
                        "insertdatetime media table contextmenu paste" ], 
                toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
                autosave_ask_before_unload : false, 
                max_height : 200, 
                min_height : 160, 
                height : 180, 
                init_instance_callback : "hidetinymce" 
 
            }); 
    var i = 3; 
    function hidetinymce(inst) { 
        if (--i == 0) { 
            try { 
                tinyMCE.get('1').hide(); 
                tinyMCE.get('2').hide(); 
                tinyMCE.get('3').hide(); 
            } catch (error) { 
 
            } 
        } 
    } 
</script> 

我们用一个变量i来做计数器，当实例3初始化完成后执行try内的内容，然后即可完成实例初始化完成后执行隐藏。

PS：tinymce的新版本还是蛮好看的，跟bootstrap的白色主题很搭，让人很喜欢。