wiss inc

WISS inc.

Blog Image

有限会社 ウィス

WEBアプリケーション・システム開発

- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。

リッチテキストエディタ

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

RSSフィードを表示する (XmlStore)

dojox. RSS2.0のフィード(XML)をXmlStoreを使い取得して表示します。

dojoのcoreのみでサンプルを作った際にDOMの操作性の悪さやIE7で表示されないなど問題があったので、今回、dojoxのdojox.data.XmlStoreを使ってRSS2.0のフィードをリスト表示します。
XmlStoreのメソッドfetchを使えば、フィルタリングや件数指定なども可能なので拡張性もあり、またRead APIを実装した他のデータストアと同様の操作性を持つのでデータの場所や形式を変更しても修正が楽だと思います。

<input type="button" value="GET"
  onclick="rsslist({url:'/rss.xml'})"/>
<script>
function rsslist(opts) {
  var settings = { url:'', entryclass:'target',
    rootItem: "item", count: 5 };
  //option target:'_blank' count:5
  if (opts) for (var k in opts) settings[k] = opts[k];

  dojo.require("dojox.data.XmlStore");
  var store = new dojox.data.XmlStore(
    {url: settings.url, rootItem: settings.rootItem}
  );
  var gotFeeds = function(items, request){
    var target = '';
    if (settings.target) 
      target = ' target="' + settings.target + '"';
    var buffer = ["<ul>"];
    for (var i = 0; i < items.length; i++){
      var item = items[i];
      buffer.push('<li><a href="' +
      store.getValue(item, "link") + 
      '"' + target + '>' +
      store.getValue(item, "title") + '</a></li>'
      );
    }
    buffer.push("</ul>");
    dojo.byId(settings.entryclass).innerHTML = 
      buffer.join("");
  }
  var request = 
    store.fetch({onComplete: gotFeeds, 
      count:settings.count});
}
</script>
<div id="target" style="border:1px solid #333"></div>


サンプル:


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

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>

サンプル:


ですが、エディタに不具合が多いです。 エディタ内のダイアログで文字入力ができないなど。

≪前へ 1 2 3 4 5 6 7 8
TITLE