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