Как скрыть панель инструментов TinyMCE onBlur, не отключая полностью текстовый редактор? - PullRequest
Новая
       13

Как скрыть панель инструментов TinyMCE onBlur, не отключая полностью текстовый редактор?

4 голосов
/ 09 декабря 2010

Я пытаюсь скрыть панель инструментов TinyMCE, когда пользователь нажимает на другой элемент страницы и покидает текстовую область (так, по сути, onBlur).Я нашел решения, которые будут деактивировать функциональность Rich Text Editor на Blur, но мне нужно только скрыть панель инструментов и оставить отображение Rich Text (а не простой текст с HTML-тегами).... спасибо!

Это то, что у меня сейчас есть: (используется внешняя панель инструментов) 

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

Ответы [ 3 ]

5 голосов
/ 20 августа 2011

Следующий код высвечивает панель инструментов в фокусе и скрывает ее, когда пользователь щелкает где-то за пределами редактора.Это решение было протестировано для 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); });
    }
 }

Надеюсь, это поможет вам (или кому-то).

1 голос
/ 10 декабря 2010

Это должно сделать работу 

$('#' + 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%;
}
0 голосов
/ 10 декабря 2010 
tinyMCE.getInstanceById(editorID).toolbarElement.style.display = 'none'
...