TinyMCE의 테두리 색을 초점을 맞추고 흐리게 변경합니다.

Question

TinyMCE에서 jQuery를 사용하고 있습니다. TinyMCE 편집기가 초점을 맞출 때 테두리 색을 변경하려고 시도하고 흐림 효과를 다시 변경하려고합니다. 온 클릭 (

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

      } 



    });  


}); 

...하지만이 :

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

내가 init 스크립트이 도착 관리 다음 ui.css에서

, 내가 추가 한 /이 변경 , 변경, 경계선 색)은 내가 일할 수있는 유일한 방법입니다. 다른 모든 시도는 TinyMCE가 로딩되는 것을 방해하거나 단순히 아무것도하지 않았습니다. 나는 TinyMCE wiki 페이지와 그들의 포럼을 탐색했지만 작은 덩어리의 정보를 전체적으로 흩어 놓지 못했습니다.

실제로이 작업을 수행 할 수있는 방법이 있습니까? 내가 간과하고있는 것이 단순한가요? 아니면 구현하기가 실제로 실제로 복잡한가요?

Answer 1

ed.getDoc()에서 addEventListener() 함수를 사용하면 hit-or-miss가 발생하고 AddEvent() 함수가 작동하지 않으므로이 문제를 다시 조사하여 더 많은 브라우저를 지원하는 jQuery 솔루션으로 끝났습니다. 전혀 ed.getDoc() ("함수는 객체에서 지원되지 않습니다"오류).

다음은 IE8, Safari 5.1.7, Chrome 19, firefox 3.6 & 12에서 작동하는 것으로 확인되었습니다. 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

당신은 내가 한참이 응답 생각

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

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

Answer 3

처럼 자신의 플러그인 뭔가 중 하나에서 할 수 있지만, 그럴 것 같아요. 내가 TinyMCE에의 설정이 함께 결국 :

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

을 당신이 TinyMCE에의 드 이벤트 "onclick을"를 사용할 수 있습니다 초점하십시오. 흐리게하기 위해 reponsese 미리보기는 정상입니다.