Изменить цвета границ TinyMCE на фокус и размытие - PullRequest
Новая
       23

Изменить цвета границ TinyMCE на фокус и размытие

5 голосов
/ 17 декабря 2010

Я использую jQuery с TinyMCE. Я пытаюсь заставить цвета границ измениться, когда редактор TinyMCE находится в фокусе, а затем на размытии изменить обратно.

В ui.css я добавил / изменил это: 

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

Мне удалось получить это для сценария инициализации: 

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

           }



    });    


});

... но это (щелчок, изменение, цвет рамки) - единственное, что мне удалось получить. Все остальные мои попытки либо мешали загрузке TinyMCE, либо просто ничего не делали. Я просмотрел вики-страницы TinyMCE и их форумы, но не смог собрать полную картину из маленьких кусочков информации, разбросанных по всему.

Есть ли на самом деле способ сделать это? Это что-то простое, что я просто упускаю из виду, или это действительно что-то действительно сложное для реализации?

Ответы [ 4 ]

3 голосов
/ 27 мая 2012

Я вновь обратился к этой проблеме и в итоге получил решение jQuery, которое поддерживает больше браузеров, поскольку использование функции addEventListener () в ed.getDoc () было хитом или промахом, а функция AddEvent () не работала навсе на ed.getDoc () (ошибка «функция не поддерживается на объекте»).

Подтверждено, что в IE8, Safari 5.1.7, Chrome 19, Firefox 3.6 и 12 подтверждается следующее. Не отображаетсяработать в Опере 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();});                   
            });
        }
1 голос
/ 12 октября 2011

Я думал, что ответил на это некоторое время назад, но я думаю, нет. Я закончил с этим в конфиге 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);
                }

            });
        }
1 голос
/ 14 ноября 2011 
setup:function(ed){
  ed.onClick.add(function(ed){
    tinymce_blur();
  });

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

Для фокусировки вы можете использовать de event "onClick" TinyMCE. Для размытия предварительный просмотр в порядке.

1 голос
/ 17 декабря 2010

Вы можете сделать в одном из своих собственных плагинов что-то вроде 

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

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