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 plex to implement?
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 plex to implement?
Share Improve this question edited Nov 4, 2015 at 19:59 Anders 8,57710 gold badges59 silver badges99 bronze badges asked Dec 17, 2010 at 1:16 Force FlowForce Flow 7242 gold badges14 silver badges34 bronze badges7 Answers
Reset to default 4I 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();});
});
}
.tox:not([dir=rtl]) {
border-color: #a4286a;
}
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);
});
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.
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);
}
});
}
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;
}for tinymce 7 version
.tox-edit-area::before{
border:2px solid orange !important;
}