я могу построить класс CSS на лету в крошечном МСЭ? - PullRequest
Новая
       4

я могу построить класс CSS на лету в крошечном МСЭ?

2 голосов
/ 09 июля 2010

Я использую крошечный mce, но я обнаружил, что он добавляет несколько содержаний со встроенными стилями к содержимому для любого применяемого стиля.Встроенные стили не совместимы с W3c, поэтому следует избегать встроенных CSS.Можно ли создать класс css на лету и применить его к выделению при редактировании содержимого в крошечном mce?

Ответы [ 2 ]

1 голос
/ 15 декабря 2011

Тариама ответил идеально.Я использую JMuery соединитель tinyMCE для некоторых из моих страниц, и у меня есть несколько экземпляров tinyMCE на странице.Я сделал некоторые изменения, но по сути это то же самое.Я создал текстовое поле на странице, чтобы люди могли предоставить свой собственный CSS.Кроме того, мне нужно было изменить некоторые правила CSS на лету ... 

// function to change tinyMCE css on the fly
function checkCustomCSS() {
   var $css = $('#page_css'),
      newcss;
   if ($css.val().length > 0) {
      // since front end, we are wrapping their HTML in a wrapper and
      // the tinyMCE edit iFrame is just using <body>, we need to change
      // some rules so they can see the changes
      newcss = $css.val().replace('#content_wrapper', 'body');
      // loop through each tinyMCE editor and apply the code changes
      // You could check the editor.id to make sure that the correct
      // editor gets the appropriate changes.
      $.each(tinyMCE.editors, function() {
         var $this = $(this),
             editorID = $this[0].id,
             $ifrm = $('#' + editorID+ '_ifr'),
             cwin, head, sheet;
         if ($ifrm.length > 0 /* && editorID === 'OUR_EDITOR_ID_NAME' */) {
             cwin = $ifrm[0].contentWindow;
             head = cwin.document.getElementsByTagName("head");
             if (!head.length) {
                return;
             }
             sheet = cwin.document.createElement("style");
             sheet.type = "text/css";
             head[0].appendChild(sheet);
             try {
                 if (typeof sheet.styleSheet !== "undefined") {
                    sheet.styleSheet.cssText = newcss;
                 } else {
                    sheet.appendChild(cwin.document.createTextNode(newcss));
                    sheet.innerHTML = newcss;
                 }
             } catch (e) {}
         }
     });
  }
}

Затем в вызове tinyMCE init, который я добавил, и вызов onInit для изменения настроек #page_css, например: 

oninit: function() {
   $('#page_css').on('change', function() {
      checkCustomCSS();
   });
}

Работает как шарм.

1 голос
/ 09 июля 2010

Да, это возможно, но мне потребовалось некоторое усилие.Что нужно сделать, это написать класс в голову редактора iframe.Вот пример кода, который должен работать для IE, FF, Safari и указывать правильное направление: 

fonturl = "http://myfonts.com/arial.ttf"
csstext_to_add = '@font-face {font-family: "ownfont";src: url("'+fonturl+'");}'; // example
iframe_id = ed.id;
with(document.getElementById(iframe_id).contentWindow){
  var h=document.getElementsByTagName("head");
  if (!h.length) {
    return;
  }
  var newStyleSheet=document.createElement("style");
  newStyleSheet.type="text/css";
  h[0].appendChild(newStyleSheet);
  try{
    if (typeof newStyleSheet.styleSheet !== "undefined") {
      newStyleSheet.styleSheet.cssText = csstext_to_add;
    }
    else {
      newStyleSheet.appendChild(document.createTextNode(csstext_to_add));
      newStyleSheet.innerHTML=csstext_to_add;
    }
  }
  catch(e){}
}

Также возможно добавить этот класс в качестве опции в выпадающий список (что требует определенных усилий).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...