2014-02-09 64 views
3

我用,版本V3或V4 TinyMCE的工作V4顯示/隱藏工具欄,我想要做的下一步行動:TinyMCE的V3還是在焦點/模糊

1-焦點顯示工具欄。 2-模糊隱藏工具欄。

我在看這個例子:http://sourceforge.net/p/tinymce/plugins/185/,不壞,但我想用事件的事,但我以前不工作。

有人知道一個很好的例子嗎?

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

Stack Overflow是針對具體問題和存在的問題,不是如何做一般性問題。查看一個教程,然後問我們某個特定的東西是否無效。 – Vitruvius

+1

@Saposhiente - 我不同意downvote。問題很明顯.OP發佈了他嘗試的代碼。 – afzalulh

+0

@afzalulh每當有人說「沒有工作」,而沒有解釋他們究竟做了什麼或發生了什麼,然後要求完整的代碼,那些對我來說都是大紅旗。也許它畢竟已經足夠清晰了,但是當我在審查隊列中彈出時,這似乎是一個標準的模糊問題。 – Vitruvius

回答

6

非常感謝afzalulh您的幫助,現在的作品,我已經將代碼粘貼....如果是有用的另一個人。

但是..我有這個解決方案的問題,我用這個編輯器從文本框中加載文本的文本框中的ASP.net組件,當我加載文本時,文本沒有出現,但是當我選擇一個Tiny編輯器上的重點和我在文本里面插入空格出現,我沒有錯誤,我不知道是否需要添加另一個配置參數..?

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

這裏或多或少我的問題似乎是一個普遍的問題的解決方案..:http://forums.mozillazine.org/viewtopic.php?f=9&t= 2482661 –

+0

我可以檢查這個問題只在IE8 –

+0

指的這裏給出的答案http://stackoverflow.com/a/21453442/561429 不應該jquery.tinymce.min.js的tinymce.min後加載.js文件? – Rohan210

2

應該是這樣的:

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

至於建議here

+0

謝謝,現在我有Explorer 8的問題,只有在這個瀏覽器,我沒有一個錯誤,只有我有文字奇怪的行爲,我需要添加文本框內部的空間,使這個工作,你有一些想法發生了什麼我整天都在試圖找到一些嘗試 –