Ricordati che seppur in designmode attivato è pur sempre un IFRAME, quindi una finestra esterna, con un proprio oggetto document distinto da quello della pagina che lo ospita.
Quindi dovresti indicargli il suo stile esattamente come fai ad una pagina qualsiasi (indipendente).
Puoi farlo dinamicamente tramite javascript indicando il contenuto del document.
Incuriosito dall'argomento (implementare direttamente il wysiwyg a basso livello), che non ho mai affrontato direttamente (uso l'ottimo fckeditor) mi sono scritto questo codice in locale e funziona sia su IE che Mozilla:
Codice HTML:
<html>
<head>
<script language="javascript" type="text/javascript">
function initEditFrame(){
var cssurl = "http://www.wrestlingforum.altervista.org/style.css";
var initcontent = '<span class="right">bla bla</span> <p>Ciao</p>';
var cont = window.frames['contentDocument'];
window.focus();
cont.focus();
cont.document.designMode="on";
cont.document.open();
cont.document.write('<html><head> <link rel="stylesheet" type="text/css" href="');
cont.document.write(cssurl+'"></head><body>'+initcontent+'</body></html>');
cont.document.close();
}
</script>
</head>
<body onload="initEditFrame();">
<iframe width="200" height="200" name="contentDocument" id="contentDocument"></iframe>
</body>
</html>
In questo esempio vado a pescare direttamente il TUO css che hai in home
Puoi ovviamente cambiarlo e impostare il testo iniziale del frame modificando il valore delle apposite variabili all'inizio della funzione di inizializzazione.