4

我有一个标题输入字段和一个 tinymce4 文本区域。

在 tinymce init 中,我定义了模糊焦点事件侦听器(咖啡脚本)。

  tinymce.init(
    $.extend {}, tinyMceDefaultConfig,
      editor_selector:"tinymce-question"
      setup: (editor) ->
        editor
          .on 'init', (e).....
          .on 'focus', ->
            console.log('focus')
          .on 'blur', ->
            console.log('blur')

当我进入 tinymce textarea 字段时,它只会触发焦点事件。工作正常。

但是当我从标题输入字段转到tinymce(带有鼠标事件)时,它会触发焦点模糊事件。

为什么?或者我该如何避免这种情况?

更新

这里举个例子。它是一个错误吗?

当我单击文本区域时,仅触发焦点。当我在输入字段中然后单击文本区域时,焦点和模糊会触发。

  <html>
  <head><!-- CDN hosted by Cachefly -->
    <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script>
      tinymce.init({
        selector:"textarea",
        setup: function(editor) {
          editor.on('focus', function() {
            console.log('focus');
          });
          editor.on('blur', function(){
            console.log('blur');
          })
        }
      });
    </script>
  </head>
  <body>
    <input type="text" name="fname">
    <textarea>Your content here.</textarea>
  </body>
  </html>

JSFIDDLE

更新:

更新了 JSFIDDLE

焦点现在发射了一次,但模糊不再发射。

更新2:

我明白了,这个问题只存在于 Chrome 中。在 Firefox 和 Safari 中,它运行良好。

更新3:

它与实际的 Nightly 构建一起修复。我不知道它将在哪个版本中合并。

4

2 回答 2

2
 <style type="text/css">
   .editor_active { border:#f00 2px solid!important; }
   .editor_inactive { border:#00f 2px dashed!important; }
</style>


<script type="text/javascript">

tinymce.init({
    selector:"textarea",
    setup: function(editor) {
        editor.on('focus', function(e) {
            if(!catching)
            {
                bounceProtect('focus');
            formatMce('focus');
            }
        });
        editor.on('blur', function(e){
            if(!catching){
                bounceProtect('blur');
            formatMce('blur');
            }
        })
    }
});

function formatMce(state)
{
    if (state=='focus') {
       $('#mceControl').addClass('editor_active').removeClass('editor_inactive');
    }
    else {
       $('#mceControl').addClass('editor_inactive').removeClass('editor_active');
    }
}

function bounceProtect(src)
{
    catching = true;
    console.log(src);
    setTimeout(function(){ catching = false;}, 250);
}

var catching = false;

$(document).ready(function(){
$("INPUT,TEXTAREA,BUTTON").focus(function(){ formatMce('blur'); });
});

</script>


</head>
<body style="">

  <input type="text" id="fname" name="fname">
  <div id="mceControl">
    <textarea>Your content here.</textarea>
  </div>

更新:1 看起来有分层控件在你身上杂耍 - 这是我们在 VB 应用程序中用来防止焦点战争和避免键反弹的技术 - 250 毫秒的延迟应该过滤掉无意的焦点转移,但可以玩用它。

更新:2 我已经将 tinyMCE 控件包装在一个 div 中,并向编辑器焦点/模糊处理程序添加了一些代码来设置样式,您不会对 IFrame 中加载的内容产生任何影响。

更新: 文档之间的 3 焦点/模糊有效,但是当您从 tinyMCE 转到输入控件时,焦点事件没有触发,一个肮脏的黑客是捕获 INPUT 焦点事件并在编辑器上模拟模糊。

于 2013-10-29T23:22:53.713 回答
0

它与实际的 Nightly 构建一起修复。我不知道它将在哪个版本中合并。

于 2014-02-11T16:54:25.897 回答