Question

我正在使用小型mce，但我发现它为内容添加了多个带有内联样式的跨度，适用于任何应用的样式。内联样式不符合W3c，因此必须避免内联css。是否可以动态创建css类并应用于选择，同时在微小的mce中编辑内容？

Answer 1

是的，这是可能的，但我花了一些力气。需要做的是将类编写到编辑器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){}
}

也可以将该类作为选项添加到下拉列表中（需要付出一些努力）。

Answer 2

Thariama的回答非常完美。我正在为我的一些页面使用tinyMCE jQuery连接器，我在页面上有多个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初始化调用中我添加了onInit调用以设置对#page_css的更改，如下所示：

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

像魅力一样。

我可以在小型mce中动态构建一个css类吗？

2 个答案: