FCKeditorの背景色とフォントカラー等を動的に変える
最近FCKeditorに触れる機会があり色々と試しているのですが、動的にFCKeditorの背景色とフォント色を変えられないかなー？
とか思ってしまい。
はまりました。。。orz
ポイントはすごく深いところにありましたです。
iframeの中にあるiframeにアクセスする必要がありました。
contentWindowでFrame（iframe）内のHTMLにアクセスできるようですね。
以下のような感じで背景色とフォントカラーを変更できました。
document.getElementById('area___Frame').contentWindow.document.getElementById('xEditingArea').getElementsByTagName("IFRAME")[0].contentWindow.document.body.style.background="red"; document.getElementById('area___Frame').contentWindow.document.getElementById('xEditingArea').getElementsByTagName("IFRAME")[0].contentWindow.document.body.style.color="white";
これが
このように
全体のソース
<html>
<head>
<title>FCKeditor test</title>
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
<!--
window.onload = function () {
var fck = new FCKeditor( 'area' );
fck.BasePath = '/FCKeditor/';
fck.Width = '800';
fck.Height = '300';
fck.ToolbarSet = 'Default';
fck.ReplaceTextarea();
}
// -->
</script>
</head>
<body>
<textarea name="area"></textarea>
<br>
<script type="text/javascript">
<!--
function set_color(){
document.getElementById('area___Frame').contentWindow.document.getElementById('xEditingArea').getElementsByTagName("IFRAME")[0].contentWindow.document.body.style.background="red";
document.getElementById('area___Frame').contentWindow.document.getElementById('xEditingArea').getElementsByTagName("IFRAME")[0].contentWindow.document.body.style.color="white";
}
//-->
</script>
<input type="button" value="Change" onclick="set_color()">
</body>
</html>
やりたかったこと
カラーピッカーとか使って背景色やフォントカラーを動的に変更したかった
