Question

I’m using tiny mce, but I found it adds multiple spans with inline styles to the content for any applied style. Inline styles are not W3c Compliant, so must avoid inline css. Is it possible to create css class on the fly and apply to the selection, while editing content in tiny mce ?

Answer 1

Yes that is possible, but it took me some effort. What needs to be done is to write the class into the head of the editors iframe. Here is some example code which should work for IE,FF, Safari and point you into the right direction:

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

It is also possible to add that class as option into a dropdown (what takes some effort).