TinyMCE多输入框手动激活解决方案 (init()初始化 回调)

原文地址：http://www.nenew.net/tinymce-multi-textarea-manual-enable-and-disable.html#commentbox

昨晚弄那个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的白色主题很搭，让人很喜欢。