wiss inc

WISS inc.

リッチテキストエディタ

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ソースを表示します。

TITLE