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

 

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

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

  1. tinyMCE.get('nenew').show(); 
  2. 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:

  1. function myCustomInitInstance(inst) { 
  2.         alert("Editor: " + inst.editorId + " is now initialized."); 
  3. tinyMCE.init({ 
  4.         ... 
  5.         init_instance_callback : "myCustomInitInstance" 
  6. }); 

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

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

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

  1. <form> 
  2. <textarea id="1"  
  3. onfocus="tinyMCE.get('1').show();tinyMCE.get('1').focus();tinyMCE.get('2').hide();tinyMCE.get('3').hide();"> 
  4. </textarea> 
  5. <textarea id="2"  
  6. onfocus="tinyMCE.get('2').show();tinyMCE.get('2').focus();tinyMCE.get('1').hide();tinyMCE.get('3').hide();"> 
  7. </textarea> 
  8. <textarea id="3"  
  9. onfocus="tinyMCE.get('3').show();tinyMCE.get('3').focus();tinyMCE.get('1').hide();tinyMCE.get('2').hide();"> 
  10. </textarea> 
  11. </from> 

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

  1. <script src="editor/tinymce.min.js"></script> 
  2. <script type="text/javascript"> 
  3.     tinymce 
  4.             .init({ 
  5.                 selector : "textarea", 
  6.                 plugins : [ 
  7.                         "advlist autolink lists link image charmap print preview anchor", 
  8.                         "searchreplace visualblocks code fullscreen", 
  9.                         "insertdatetime media table contextmenu paste" ], 
  10.                 toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
  11.                 autosave_ask_before_unload : false, 
  12.                 max_height : 200, 
  13.                 min_height : 160, 
  14.                 height : 180, 
  15.                 init_instance_callback : "hidetinymce" 
  16.  
  17.             }); 
  18.     var i = 3
  19.     function hidetinymce(inst) { 
  20.         if (--i == 0) { 
  21.             try { 
  22.                 tinyMCE.get('1').hide(); 
  23.                 tinyMCE.get('2').hide(); 
  24.                 tinyMCE.get('3').hide(); 
  25.             } catch (error) { 
  26.  
  27.             } 
  28.         } 
  29.     } 
  30. </script> 

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

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

奶牛 | 2013年04月21日