焦点/模糊了tinyMCE V3或V4显示/隐藏工具栏 [英] TINYMCE V3 or V4 Show/Hide ToolBar on focus/blur

查看：1477
本文介绍了焦点/模糊了tinyMCE V3或V4显示/隐藏工具栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用，版本V3或V4 TinyMCE的工作，我想做下一个动作：

1焦点显示工具栏。
2 - 在模糊隐藏工具栏。

我在看这个例子： http://sourceforge.net/p/tinymce/plugins / 185 / ，不坏，但我试图与事件的事，但我以前不工作。

有人知道一个很好的例子？

 ＆LT;！ -  TinyMCE的 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =tiny_mce / tiny_mce.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =脚本/ jQuery的-1.10.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;    $（文件）。就绪（函数（）{
        警报（cargado ......）;
    }）;    tinyMCE.init（{        //常规选项
        模式：文字区域
        主题：高级，
        插件：toggletoolbars，PDW， safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,$p$pview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount\",
        toggletoolbars_status：关，
        //主题选项
        theme_advanced_buttons1：pdw_toggle， save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect\",
        theme_advanced_buttons2： \"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,$c$c,|,insertdate,inserttime,$p$pview,|,forecolor,backcolor\",
        theme_advanced_buttons3： \"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen\",
        theme_advanced_buttons4： \"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak\",
        theme_advanced_toolbar_location：顶，
        theme_advanced_toolbar_align：左，
        theme_advanced_statusbar_location：底，
        theme_advanced_resizing：真实，        // PDW切换工具栏设置
        pdw_toggle_on：0，
        pdw_toggle_toolbars：2,3,4，        //例内容的CSS（应该是您的网站的CSS）
        content_css：CSS / content.css        //跌落列出的链接/图像/媒体/模板对话框
        template_external_list_url：名单/ template_list.js
        external_link_list_url：名单/ link_list.js
        external_image_list_url：名单/ image_list.js
        media_external_list_url：名单/ media_list.js        //为模板插件替换值
        template_replace_values​​：{
            用户名：一些用户，
            STAFFID是：991234
        }，        设置：功能（ED）{
            ed.onBlur.add（函数（ED，L）{
                tinyMCE.getInstanceById（editorID）.toolbarElement.style.display =无;
            }）;
        }
    }）;
    ＆LT; / SCRIPT＆GT;
＆LT;！ -  / TinyMCE的 - ＆GT;


解决方案

非常感谢afzalulh您的帮助，现在的作品，我已经粘贴了code ....如果是有用的另一个人。

但是..我有这个解决方案的一个问题，我用在文本框中ASP.net组件此编辑为文本负载从数据库中，当我加载文本，文本没有出现，但是当我选择一个很小的编辑器焦点和我插入文本内部的空间出现，我不是一个错误，我不知道我是否需要添加其他配置参数..？

 ＆LT;头=服务器＆GT;
＆LT;标题＆gt;在对焦/模糊事件显示/隐藏工具栏 -  TinyMCE的jQuery的4.0.16包＆LT; /标题＆GT;
＆LT;！ - 加载jQuery库 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =使用Javascript / TinyMCE的/ JS / TinyMCE的/ jQuery的-1.11.0.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =stylesheet.css中/＆GT;
＆LT;！ - 装载jQuery的TinyMCE的 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =使用Javascript / TinyMCE的/ JS / TinyMCE的/ jquery.tinymce.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 加载TinyMCE的 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =使用Javascript / TinyMCE的/ JS / TinyMCE的/ tinymce.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
tinymce.init（{
    选择：.editorTextarea
    主题：现代，
    插件：分页符表保存字符映射媒体的ContextMenu粘贴方向性不可编辑visualchars不间断拼写检查模板
    toolbar1：粗体斜体下划线删除线| alignleft aligncenter alignright alignjustify fontselect fontsizeselect | bullist numlist |撤消和重做|前景色背景色|字符映射不间断    文本菜单：剪​​切复制粘贴
    菜单栏：假的，
    状态栏：假的，
    toolbar_item_size：小，    设置：功能（theEditor）{
        theEditor.on（'专注'，函数（）{
            $（this.contentAreaContainer.parentElement）.find（div.mce  - 工具栏 -  GRP）显示（）;
        }）;
        theEditor.on（'模糊'，函数（）{
            $（this.contentAreaContainer.parentElement）.find（div.mce  - 工具栏 -  GRP），隐藏（）。
        }）;
        theEditor.on（初始化功能（）{
            $（this.contentAreaContainer.parentElement）.find（div.mce  - 工具栏 -  GRP），隐藏（）。
        }）;
    }
}）;
 


 ＆LT; ASP：文本框ID =Block1_Text2_D=服务器行=3的TextMode =多行WIDTH =400像素的CssClass =editorTextarea＆GT;＆LT ; / ASP：文本框＆GT;

I'm working with , the version V3 or v4 of Tinymce, I want to do the next actions:

1- On focus Show the toolbar. 2- On blur Hide the toolbar.

I was watching this example: http://sourceforge.net/p/tinymce/plugins/185/, is not bad, but I'm trying to do with events, but did't work.

Somebody knows a good example?

    <!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        alert("cargado...");
    });

    tinyMCE.init({

        // General options
        mode: "textareas",
        theme: "advanced",
        plugins: "toggletoolbars, pdw, safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
        toggletoolbars_status: "off",
        // Theme options
        theme_advanced_buttons1: "pdw_toggle, save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,

        // PDW Toggle Toolbars settings
        pdw_toggle_on: 0,
        pdw_toggle_toolbars: "2,3,4",

        // Example content CSS (should be your site CSS)
        content_css: "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url: "lists/template_list.js",
        external_link_list_url: "lists/link_list.js",
        external_image_list_url: "lists/image_list.js",
        media_external_list_url: "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values: {
            username: "Some User",
            staffid: "991234"
        },

        setup: function (ed) {
            ed.onBlur.add(function (ed, l) {
                tinyMCE.getInstanceById(editorID).toolbarElement.style.display = 'none';
            });
        }
    });
    </script>
<!-- /TinyMCE -->

解决方案

Thanks a lot afzalulh for your help, now works, I have pasted the code....if is usefull for another person.

But.. I have a problem with this solution, I use this editor for load text from the database in the textbox ASP.net component, when I load the text, the text not appear, but when I select one Tiny editor on focus and I insert a space inside the text appear, I have not a errors, I don't know if I need to add another configuration parameter..?

<head runat="server">
<title>Show/Hide ToolBar on Focus/Blur Event - TinyMCE 4.0.16 jQuery package </title>
<!-- Loading the jQuery Library -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- Loading jQuery TinyMCE -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<!-- Loading TinyMCE -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/tinymce.min.js"></script>


<script type="text/javascript">
tinymce.init({
    selector: ".editorTextarea",
    theme: "modern",
    plugins: "pagebreak table save charmap media contextmenu paste directionality noneditable visualchars nonbreaking spellchecker template",
    toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify fontselect fontsizeselect | bullist numlist | undo redo | forecolor backcolor | charmap nonbreaking",

    contextmenu: "cut copy paste",
    menubar: false,
    statusbar: false,
    toolbar_item_size: "small",

    setup: function (theEditor) {
        theEditor.on('focus', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").show();
        });
        theEditor.on('blur', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
        theEditor.on("init", function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
    }
});


<asp:TextBox ID="Block1_Text2_D" runat="server" Rows="3" TextMode="MultiLine" Width="400px" CssClass="editorTextarea"></asp:TextBox>

这篇关于焦点/模糊了tinyMCE V3或V4显示/隐藏工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆