Change border colors of TinyMCE on focus and blur

5
votes

I'm using jQuery with TinyMCE. I am trying to get the border colors to change when the TinyMCE editor is in focus, and then on a blur, change back.

In the ui.css, I've added/changed these:

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

I managed to arrive at this for the init script:

$().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(); 
              });

           }



    });    


});

...but this (onclick, change, border color) is the only thing I have managed to get working. All my other attempts either prevented TinyMCE from loading or simply did nothing. I've browsed through the TinyMCE wiki pages and on their forums, but haven't been able to piece together a full picture from the small nuggets of information scattered around.

Is there actually a way to do this? Is it something simple that I'm just overlooking, or is it actually something really complex to implement?

5
javascriptjquerytinymcefocusonblur

5 Answers

4
votes

I revisited this problem, and ended up with a jQuery solution that supports more browsers, since using addEventListener() function on ed.getDoc() was hit-or-miss, and the AddEvent() function didn't work at all on ed.getDoc() ("function not supported on object" error).

The following is confirmed to work in IE8, Safari 5.1.7, Chrome 19, firefox 3.6 & 12. It does not appear to work in 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();});                   
            });
        }
1
votes

You could do in one of your own plugins something like

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

    ed.getDoc().addEventListener("blur", function(){
      tinymce_blur();
    }, false);
});
1
votes
setup:function(ed){
  ed.onClick.add(function(ed){
    tinymce_blur();
  });

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

For the focus you can use de event "onClick" of the TinyMCE. For the blur, the reponsese previews are OK.

1
votes

I thought I responded to this a while back, but I guess not. I ended up with this in the tinymce config:

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

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