リッチテキストエディタ
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ソースを表示します。