更改 TinyMCE 焦点和模糊的边框颜色

Question

我正在使用 jQuery 和 TinyMCE。我试图在 TinyMCE 编辑器聚焦时改变边框颜色，然后在模糊时改变回来。

在 ui.css 中，我添加/更改了这些：

.defaultSkin table.mceLayout {border:0; border-left:1px solid #93a6e1; border-right:1px solid #93a6e1;}
.defaultSkin table.mceLayout tr.mceFirst td {border-top:1px solid #93a6e1;}
.defaultSkin table.mceLayout tr.mceLast td {border-bottom:1px solid #93a6e1;}

我设法为 init 脚本实现这一点：

$().ready(function() {

    function tinymce_focus(){
        $('.defaultSkin table.mceLayout').css({'border-color' : '#6478D7'});
        $('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#6478D7'});
        $('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#6478D7'});
    }

    function tinymce_blur(){
        $('.defaultSkin table.mceLayout').css({'border-color' : '#93a6e1'});
        $('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#93a6e1'});
        $('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#93a6e1'});
    }

    $('textarea.tinymce').tinymce({
        script_url : 'JS/tinymce/tiny_mce.js',
        theme : "advanced",
        mode : "exact",
          theme : "advanced",
          invalid_elements : "b,i,iframe,font,input,textarea,select,button,form,fieldset,legend,script,noscript,object,embed,table,img,a,h1,h2,h3,h4,h5,h6",

          //theme options 
          theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,|,undo,redo,|,cleanup,removeformat,|", 
          theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,forecolor,backcolor,|", 
          theme_advanced_buttons3 : "", 
          theme_advanced_buttons4 : "", 
          theme_advanced_toolbar_location : "top", 
          theme_advanced_toolbar_align : "left", 
          theme_advanced_statusbar_location : "none", 
          theme_advanced_resizing : false,

          //plugins
          plugins : "inlinepopups,paste",
          dialog_type : "modal",
        paste_auto_cleanup_on_paste : true,


        setup : function(ed) {
              ed.onClick.add(function(ed, evt) {
                  tinymce_focus(); 
              });

           }



    });    


});

...但这（onclick、更改、边框颜色）是我唯一能完成的工作。我的所有其他尝试要么阻止 TinyMCE 加载，要么什么也没做。我浏览过 TinyMCE wiki 页面及其论坛，但无法从分散的小块信息中拼凑出完整的图片。

实际上有办法做到这一点吗？是我忽略了一些简单的事情，还是实际上实现起来非常复杂的事情？

Answer 1

我重新审视了这个问题，最终得到了一个支持更多浏览器的 jQuery 解决方案，因为在 ed.getDoc() 上使用 addEventListener() 函数是偶然的，并且 AddEvent() 函数在 ed 上根本不起作用.getDoc()（“对象不支持函数”错误）。

以下内容已确认可在 IE8、Safari 5.1.7、Chrome 19、firefox 3.6 和 IE8 中运行。 12. 它似乎不适用于 Opera 11.64。

setup: function(ed){
            ed.onInit.add(function(ed){
                $(ed.getDoc()).contents().find('body').focus(function(){tinymce_focus();});
                $(ed.getDoc()).contents().find('body').blur(function(){tinymce_blur();});                   
            });
        }

Answer 2

.tox:not([dir=rtl]) {
    border-color: #a4286a;
}

Answer 3

你可以在你自己的插件之一中做类似的事情

ed.onInit.add(function(ed){    
    ed.getDoc().addEventListener("click", function(){
         tinymce_focus();
       }
    );

    ed.getDoc().addEventListener("blur", function(){
      tinymce_blur();
    }, false);
});

Answer 4

setup:function(ed){
  ed.onClick.add(function(ed){
    tinymce_blur();
  });

  ed.onInit.add(function(ed){    
    ed.getDoc().addEventListener("blur", function(){
      tinymce_blur();
    }, false);
  });
}

对于焦点，您可以使用 TinyMCE 的事件“onClick”。对于模糊，响应预览还可以。

Answer 5

我以为我不久前对此做出了回应，但我想没有。我最终在tinymce配置中得到了这个：

setup: function(ed){
            ed.onInit.add(function(ed){

                //check for addEventListener -- primarily supported by firefox only
                var edDoc = ed.getDoc();
                if ("addEventListener" in edDoc){
                    edDoc.addEventListener("focus", function(){
                        tinymce_focus();
                    }, false);

                    edDoc.addEventListener("blur", function(){
                        tinymce_blur();
                    }, false);
                }

            });
        }

Answer 6

直接用JS..

        setup: (editor) => {
            editor.on('focus', (e) => {
                e.target.editorContainer.classList.toggle('focused');
            });

            editor.on('blur', (e) => {
                e.target.editorContainer.classList.toggle('focused');
            });
        },

            .tox.tox-tinymce.focused {
                border: 1px solid red;
            }

Answer 7

适用于tinymce 7版本

.tox-edit-area::before{
  border:2px solid orange !important;
}