リッチテキストエディタ
dijit. 通常のTEXTAREAから動的に切り替えます。
つまりJavascriptでリッチテキストエディタを生成します。
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
<style>
@import "/js/dojoroot/dijit/themes/tundra/tundra.css";
</style>
<div class="tundra">
<button dojoType="dijit.form.Button"
onClick="chgEditor();" id="btn">
<span>エディタ</span>
</button>
<br/>
<textarea rows="5" cols="30" id="editor">
リッチテキストエディター
</textarea>
</div>
<script type="text/javascript">
var rEditor;
function chgEditor() {
if (rEditor) { //view html
alert(rEditor.getValue()); return;
}
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dijit._editor.plugins.FontChoice");
rEditor = new dijit.Editor(
{id:"richeditor",
plugins:["undo","redo","|",
"bold","italic","underline","|",
"justifyLeft","justifyRight","justifyCenter","|",
"foreColor","hiliteColor","createLink",
"insertImage","|","fontSize"],
styleSheets:"/js/dojoroot/dojo/resources/dojo.css"},
dojo.byId("editor"));
}
</script>
切り替わった後、textareaはDOMから削除されるようです。また、iFrameに編集エリアを入れていて、指定したスタイルシートをstyleSheetsプロパティで適用していますが、dojo.cssには背景、文字色のデフォルト指定がないので、このブログのような黒地だと、編集エリアも黒地になってしまいます。
そのためここではdojo.cssに手を加えてあります。(";"で複数指定できるので外部CSS作るのがベスト)
それとフォントサイズ指定のプラグインに不具合が多い?
サンプル:
※再度ボタンクリックでHTMLソースを表示します。
