WISS inc.

リッチテキストエディタダイアログ

dijit. ダイアログでリッチテキストエディタを表示。
テキストエリアでソース編集を相互に切り替えます。

単にダイアログとエディタの組み合わせですが、リッチテキストエディタの機能が十分発揮できない場合が多いので、こういったダイアログで編集するというパターンも考えられます。
また、既存システムの機能追加としても使えます。

<script type="text/javascript">
  //bodyにテーマクラスを指定
  dojo.query("body").addClass("tundra");
  dojo.require("dijit.form.Button");
  dojo.require("dijit.Dialog");
  dojo.require("dijit.Editor");
  dojo.require("dijit._editor.plugins.TextColor");
  dojo.require("dijit._editor.plugins.LinkDialog");
  dojo.require("dijit._editor.plugins.FontChoice");
</script>
<style>
  @import "/js/dojoroot/dijit/themes/tundra/tundra.css";
</style>

<br/>
サンプル：<br/>
<div class="tundra">
<textarea rows="15" cols="45" id="editor">
テキストエディター</textarea><br/>
<button dojoType="dijit.form.Button" id="btn"
  onClick="dijit.byId('editor2').setValue(dojo.byId('editor').value);
       dijit.byId('dialog1').show()">
  <span>エディタ表示</span>
</button>
</div>

<!-- DIALOG -->
<div dojoType="dijit.Dialog" id="dialog1"  title="エディタ" 
      execute="dojo.byId('editor').value=
          dijit.byId('editor2').getValue(true)">
  <div>
  <textarea dojoType="dijit.Editor" id="editor2"
    plugins="['undo','redo','|','bold','italic','underline','|',
        'justifyLeft','justifyRight','justifyCenter','|','foreColor',
        'hiliteColor','createLink','insertImage','|','fontSize']"
    styleSheets="/js/dojoroot/dojo/resources/dojo.css">
  </textarea>
  <button dojoType="dijit.form.Button" type="submit">
     O K</button>
  </div>
</div>