Javascript TINYMCE V3或V4显示/隐藏聚焦/模糊工具栏

Javascript TINYMCE V3或V4显示/隐藏聚焦/模糊工具栏,javascript,html,asp.net,visual-studio-2012,tinymce,Javascript,Html,Asp.net,Visual Studio 2012,Tinymce,我正在使用Tinymce的V3或v4版本,我想执行以下操作: 1-聚焦显示工具栏。 2-在“模糊”上隐藏工具栏 我在看这个例子:,不错,但我尝试处理事件,但没有成功 有人知道一个好例子吗 <!-- TinyMCE --> <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="Script

我正在使用Tinymce的V3或v4版本,我想执行以下操作:

1-聚焦显示工具栏。 2-在“模糊”上隐藏工具栏

我在看这个例子:,不错,但我尝试处理事件,但没有成功

有人知道一个好例子吗

    <!-- 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 -->

$(文档).ready(函数(){
警惕(“卡加多…”);
});
tinyMCE.init({
//一般选择
模式:“文本区域”,
主题:“高级”,
插件:“切换工具栏、pdw、safari、分页符、样式、图层、表格、保存、advhr、advimage、advlink、情感、iSpell、inlinepopups、insertdatetime、预览、媒体、搜索替换、打印、上下文菜单、粘贴、方向性、全屏、不可编辑、可视光标、不可中断、xhtmlxtras、模板、字数”,
切换工具栏状态:“关闭”,
//主题选项
主题_高级_按钮1:“pdw_切换、保存、新建文档、|、粗体、斜体、下划线、删除线、|、左对齐、居中对齐、右对齐、完全对齐、样式选择、格式选择、字体选择、字体选择、字体大小选择”,
主题高级按钮2:“剪切、复制、粘贴、粘贴文本、粘贴文字、搜索、替换、布利斯特、numlist、outdent、indent、blockquote、|、撤消、重做、链接、取消链接、锚定、图像、清理、帮助、代码、插入日期、插入时间、预览、前景色、后景色”,
主题|高级|按钮3:“表格控件,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,情感,易趣,媒体,advhr,|,打印,|,ltr,rtl,|,全屏”,
theme_advanced_按钮4:“插入层、向前移动、向后移动、绝对、|、styleprops、|、引用、缩写、首字母缩写、del、ins、attribs、|、可视光标、非中断、模板、分页符”,
主题\高级\工具栏\位置:“顶部”,
主题\高级\工具栏\对齐:“左”,
主题\高级\状态栏\位置:“底部”,
主题\u高级\u大小调整:正确,
//PDW切换工具栏设置
pdw_切换_开启:0,
pdw_切换_工具栏:“2,3,4”,
//示例内容CSS(应该是您的网站CSS)
content\u css:“css/content.css”,
//链接/图像/媒体/模板对话框的下拉列表
template\u external\u list\u url:“lists/template\u list.js”,
外部链接列表url:“lists/link\u list.js”,
外部图片列表url:“lists/image\u list.js”,
媒体\u外部\u列表\u url:“lists/media\u list.js”,
//替换模板插件的值
模板替换值:{
用户名:“某个用户”,
标记:“991234”
},
设置:功能(ed){
ed.onBlur.add(函数(ed,l){
tinyMCE.getInstanceById(editorID).toolbarElement.style.display='none';
});
}
});

应该是这样的:

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

正如建议的那样。

非常感谢Afzalugh的帮助,现在可以了,我已经粘贴了代码……如果对其他人有用的话

但是。。我对此解决方案有一个问题,我使用此编辑器从textbox ASP.net组件中的数据库加载文本,当我加载文本时,文本不会显示,但当我在焦点上选择一个小编辑器并在文本中插入一个空格时,我没有错误,我不知道是否需要添加另一个配置参数

<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();
        });
    }
});

焦点/模糊事件上显示/隐藏工具栏-TinyMCE 4.0.16 jQuery包
tinymce.init({
选择器:“.editorTextarea”,
主题:“现代”,
插件:“pagebreak表保存charmap媒体上下文菜单粘贴方向性不可编辑visualchars不可中断拼写检查器模板”,
工具栏1:“粗体斜体下划线删除线|对齐左对齐中对齐右对齐对齐对齐对齐对齐字体选择字体大小选择|粗体数字列表|撤消重做|前景色背景|字符映射不中断”,
上下文菜单:“剪切复制粘贴”,
梅努巴:错,
状态栏:false,
工具栏\项目\大小:“小”,
设置:功能(编辑器){
编辑器打开('focus',函数(){
$(this.contentAreaContainer.parentElement).find(“div.mce-toolbar-grp”).show();
});
编辑器on('blur',函数(){
$(this.contentAreaContainer.parentElement).find(“div.mce-toolbar-grp”).hide();
});
theEditor.on(“init”,函数(){
$(this.contentAreaContainer.parentElement).find(“div.mce-toolbar-grp”).hide();
});
}
});



Stack Overflow针对的是特定的问题,而不是关于如何做某事的一般问题。查阅一篇教程,然后问我们某件事是否无效。@Saposhiente-我不同意否决票。问题很清楚。OP已经发布了他尝试过的代码。@afzalulh每当有人说“不起作用”,但没有解释他们到底做了什么或发生了什么,然后要求完整的代码,这对我来说都是重大的危险信号。也许这已经足够清楚了,但当我在审查队列中突然出现时,这似乎是一个标准的模棱两可的问题。代码足以“准确地”显示他“做了什么”。我不知道你所说的“完整代码”是什么意思,我也看不到OP在任何地方问它。向新手建议一个更好的提问方式不会有什么坏处。我可能会这样做。这里或多或少我的问题似乎是一个普遍的问题。我可以检查这个问题只有在IE8中。参考这里给出的答案。jquery.tinymce.min.js不应该在tinymce.min.js之后加载吗?谢谢,现在我对Explorer 8有问题,只有在这个浏览器中,我没有错误,只有我对文本有奇怪的行为,我需要在文本框中添加一个空格,以使其有效。你知道发生了什么吗?我花了一整天的时间试图通过多次尝试找到解决方案
<asp:TextBox ID="Block1_Text2_D" runat="server" Rows="3" TextMode="MultiLine" Width="400px" CssClass="editorTextarea"></asp:TextBox>