TinyMCE多输入框手动激活解决方案(init()初始化后回调)
来源:互联网 发布:数据传输线 编辑:程序博客网 时间:2024/06/06 14:25
原文地址: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的白色主题很搭,让人很喜欢
- TinyMCE多输入框手动激活解决方案 (init()初始化 回调)
- TinyMCE多输入框手动激活解决方案(init()初始化后回调)
- Android的init过程:初始化语言(init.rc)解析
- Android初始化语言(Android Init Language)
- Linux 初始化 init 系统(UpStart)
- Linux 初始化 init 系统(Systemd)
- TinyMCE
- 一个不错的文本输入框TinyMCE + 我写的辅助控件(修改版)
- 初始化列表+init()
- busybox init初始化过程
- 025.init 初始化方法
- 025.init 初始化方法
- Objective-C:init初始化
- Linux初始化init系统
- 初始化的init
- Linux 初始化 init 系统
- nodejs初始化init
- mui.init 初始化参数
- virtualbox使用记录
- Cmap的使用方法
- poj-2492- A Bug's Life
- Linux workqueue工作原理
- Spring MVC + AJAX + Jquery ajax callback to success function is not working
- TinyMCE多输入框手动激活解决方案(init()初始化后回调)
- C++文件流操作
- Apache Commons项目介绍
- JS用法(一)
- [2014-09-02]JAVA笔记_增强的for循环、自动拆箱装箱、可变参数
- 六 (6.7)C/C++运行库注意事项 6.8 了解自己的身份
- 我遇到的java笔试题->Swing组件JList的列表数据修改了,如何通知JList改变显示?
- BZOJ 3670 NOI 2014 动物园 变形KMP
- DLNA android关于Platinum库的dmr底层c++代码实现