有限会社 ウィス
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
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から削除されるようです。
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>