可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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>

回答2:

It should be something like this:

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

As suggested here.

文章来源: TINYMCE V3 or V4 Show/Hide ToolBar on focus/blur

标签

toolbar

javascript

tinymce

脚本