Change border colors of TinyMCE on focus and blur

Question

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?

Oriental

Answer 1

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

Oriental

Answer 2

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

Scalade

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – Heavyduty

Answer 3

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

Kiyokokiyoshi

There were a few errors (missing a closing brace and missing the "false" on the click listener), but I eventually worked it out. However, this only works in firefox. Is there something which works in other browsers? – Oriental

yes, there should be. you could use jquery: $(ed.getDoc()).bind('click', function(){......}); – Kiyokokiyoshi

Answer 4

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

            });
        }

Oriental

This works in Firefox, but not in Chrome (17). adEventListener exists, but the events are never triggered. – Cockaleekie

Answer 5

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.

Devastation

Answer 6

In straight 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;
            }

Particularize

Answer 7

for tinymce 7 version

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

Narcose