Ändern Sie die Randfarben von TinyMCE auf Fokus und Unschärfe

Question

Ich benutze jQuery mit TinyMCE. Ich versuche, die Rahmenfarben zu ändern, wenn der TinyMCE-Editor scharf ist, und dann auf eine Unschärfe zurück zu wechseln.

Im ui.css, ich habe hinzugefügt/geändert diese:

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

ich dies für den Init-Skript zu gelangen verwaltet:

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

      } 



    });  


}); 

... aber diese (Onclick , Wechsel, Randfarbe) ist das Einzige, was ich geschafft habe zu arbeiten. Alle meine anderen Versuche verhinderten entweder das Laden von TinyMCE oder taten einfach nichts. Ich habe die TinyMCE-Wiki-Seiten und ihre Foren durchgelesen, konnte aber kein vollständiges Bild aus den verstreuten kleinen Informationsbrocken zusammensetzen.

Gibt es tatsächlich eine Möglichkeit, dies zu tun? Ist es etwas Einfaches, das ich einfach übersehe, oder ist es wirklich etwas wirklich Komplexes zu implementieren?

Answer 1

Ich habe dieses Problem erneut untersucht und eine jQuery-Lösung gefunden, die mehr Browser unterstützt, da die Verwendung der Funktion addEventListener() auf ed.getDoc() fehlgeschlagen war und die AddEvent() -Funktion nicht funktionierte überhaupt auf ed.getDoc() ("Funktion nicht für Objekt unterstützt" -Fehler).

Folgendes wird bestätigt, um in IE8, Safari 5.1.7, Chrome 19, Firefox 3.6 & zu arbeiten 12. Es scheint nicht in Opera 11.64 zu funktionieren.

Answer 2

Sie könnten wie

in einem Ihrer eigenen Plugins etwas tun

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

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

Answer 3

ich dachte ich diese eine Weile zurück geantwortet, aber ich denke nicht. Ich landete mit diesem in der tinymce Config up:

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

Für den Fokus können Sie de Ereignis "onClick" des TinyMCE verwenden. Für die Unschärfe sind die entsprechenden Vorschaubilder OK.