如何隐藏TinyMCE工具栏onBlur而不完全禁用富文本编辑器？

我试图隐藏TinyMCE工具栏，当用户点击另一个页面元素并离开文本区域（所以本质上onBlur）。我已经找到解决方案，它将禁用Blur上的富文本编辑器功能，但我只需要隐藏工具栏并保留富文本显示（而不是纯文本和html标记）。如何隐藏TinyMCE工具栏onBlur而不完全禁用富文本编辑器？

任何建议将不胜感激...谢谢！

这是我现在有：（它使用外部工具栏）

<html> 
<head> 
<!-- TinyMCE --> 
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 
    theme_advanced_buttons1 : "fontselect,fontsizeselect,|,bullist,numlist,|,outdent,indent,|,blockquote,image,code,|,fullscreen", 
    theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,hr,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink", 
    theme_advanced_buttons3 : "tablecontrols,|,charmap", 
    theme_advanced_toolbar_location : "external", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true 
}); 
</script> 

</head> 
<body> 

<form method="post" action="somepage"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <textarea name="content1" id="content1" style="width: 500px;"> 
     This is some sample <b><u>content</u></b>. 
    </textarea> 
    <br /> 
    <br /> 
    <a href="javascript: void(0);" onclick="tinyMCE.getInstanceById('content1').toolbarElement.style.display = 'none'">Hide Toolbar</a> 
</form> 

</body> 
</html>

来源

2010-12-09 Rodney Blythe

tinyMCE.getInstanceById(editorID).toolbarElement.style.display = 'none'

来源

2010-12-09 22:23:02

这不解释如何检测模糊？ – andyzinsser 2012-08-09 20:10:48

这应该做的工作

$('#' + ed.id + '_tbl '+'.mceToolbar').hide();

或者，你可以使用一个中途停留（一个div ）与以下类别

.layover { 
    background: none repeat scroll 0 0 #FFFFFF; 
    display: block; 
    /*you will need to set this (and the following) parameters so that the tinymce instance will be fully covered*/ 
    height: 100%; 
    left: 0; 
    opacity: 0.6; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

来源

2010-12-10 08:23:58 Thariama

以下代码弹出焦点处的工具栏，并在用户在编辑器外部的某处单击时隐藏它。该解决方案已针对Safari和Firefox进行了测试，但也适用于Internet Explorer。

tinyMCE.init({ 
    ... 
    oninit : function() {//fires after editor is created 
     // make toolbar draggable (not essential for this anwer) 
     $(tinyMCE.getInstanceById('content1').toolbarElement).draggable(); 

     //hide toolbar when loosing focus 
     var frame = ...//get hold of iframe element which contains editable region 
     if(frame.contentDocument) { 
      bindEvent(frame.contentDocument.body,"blur",function() { 
       tinyMCE.getInstanceById('content1').toolbarElement.style.display = 'none'; 
      }); 
     } else { 
      bindEvent(frame,"blur",function() { 
       tinyMCE.getInstanceById('content1').toolbarElement.style.display = 'none'; 
     } 
    } 
    }, 
    ... 
});

我bindEvent功能如下：

function bindEvent(target, eventName, fun) { 
    if (target.addEventListener) { 
     target.removeEventListener(eventName, fun, false); 
     target.addEventListener(eventName, fun, false); 
    } else { 
     var name = "on"+eventName; 
     target.detachEvent(name); 
     target.attachEvent(name, function(){ fun(eventName); }); 
    } 
}

希望这有助于您（或其他）。

来源

2011-08-20 10:46:37

如何隐藏TinyMCE工具栏onBlur而不完全禁用富文本编辑器？

回答

相关问题