Change the colors of the TinyMCE borders to focus and blur

Question

I am using jQuery with TinyMCE. I try to change the colors of the borders when the TinyMCE editor is in focus, and then on the blur, change it.

In ui.css, I added / changed them:

.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 get this for an 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 managed to get. All my other attempts either did not allow TinyMCE to boot, or simply did nothing. I also looked at the TinyMCE wiki pages on my forums, but I couldn’t put together a complete picture of the small nuggets of information scattered around.

Is there any way to do this? Is this something simple that I just don’t notice, or is it really hard to implement?

Answer 1

I looked at this problem again and ended up in a jQuery solution that supports more browsers because the addEventListener () function in ed.getDoc () was deleted or skipped and the AddEvent () function did not work all on ed.getDoc () (error "function not supported on object ").

It is confirmed that you are working in IE8, Safari 5.1.7, Chrome 19, firefox 3.6 and 12. It does not 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();}); }); } 

Answer 2

You can do something like one of your own plugins

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

Answer 3

I thought I answered this a while ago, but I think not. I ended up with this in tinymce configuration:

 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 4

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

In focus, you can use the "onClick" event for TinyMCE. For blur, reponsese previews are fine.