Comment cacher la barre d'outils TinyMCE onBlur sans désactiver complètement l'éditeur de texte enrichi?

Je tente de cacher la barre d'outils TinyMCE lorsqu'un utilisateur clique sur un autre élément de page et quitte la zone de texte (donc essentiellement surBlur). J'ai trouvé des solutions qui désactiveront la fonctionnalité Rich Text Editor onBlur, mais je dois uniquement masquer la barre d'outils et laisser l'affichage RTF (plutôt que du texte brut avec des balises html).Comment cacher la barre d'outils TinyMCE onBlur sans désactiver complètement l'éditeur de texte enrichi?

Toutes les suggestions seraient grandement appréciées ... merci!

C'est ce que j'ai maintenant: (il utilise la barre d'outils externe)

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

Source

2010-12-09 Rodney Blythe

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

Source

2010-12-09 22:23:02

Ceci n'explique pas comment détecter le flou? – andyzinsser

Cela devrait faire le travail

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

Sinon, vous pouvez utiliser une escale (un div) avec la classe suivante

.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%; 
}

Source

2010-12-10 08:23:58 Thariama

Le code suivant affiche la barre d'outils au focus et la masque lorsque l'utilisateur clique quelque part en dehors de l'éditeur. Cette solution a été testée pour Safari et Firefox, mais devrait également fonctionner pour 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'; 
     } 
    } 
    }, 
    ... 
});

Ma fonction bindEvent est la suivante:

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

Hope this vous aide (ou quelqu'un).

Source

2011-08-20 10:46:37

Comment cacher la barre d'outils TinyMCE onBlur sans désactiver complètement l'éditeur de texte enrichi?

Répondre

Questions connexes