Posts Tagged ‘Dojo’

Dojo rich text editor works with Ruby on Rails

Friday, April 25th, 2008

dojo_rich_editor

最近在公司暫時想不好什麼好的Idea,所以乾脆先用Ruby寫一個Open Source的KM系統當作練習
因為我一直覺得我們的KM系統很難用,也不能怪當初寫的工程師啦,畢竟他也是第一次寫
Any way, 最近寫到了文字Editor的部份
我以前本來在寫Client程式時,都是用GWT在寫,開發環境是用Eclipse + Java + GWT
現在開發Ruby App,IDE則是用Netbeans,我不想在Eclipse和Netbeans之前切來切去的
而且如果用GWT Client來跟Ruby Server溝通,就必須用JSON來傳資料,想到就很麻煩
前天去參加了Sun舉辦的開發者技術日,裡面有提到Dojo,它是純Javascript的Client Framework
剛好蠻適合我的需求,於是便去Dojo官網survey了一下
以下是我的心得:

1. Download Dojo V1.1.0

http://dojotoolkit.org/downloads

2. 參考 Rich Editor 教學

http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text
裡面有提到內建的plug-in有哪些:

Plugin Description
AlwaysShowToolbar Set to true to always display toolbar. No corresponding button.
EnterKeyHandling Make enter key handling consistent across browsers. The blockNodeForEnter property decides the behavior of Enter key. It can be either P, DIV, BR, or empty (which means disable this feature). Anything else will trigger errors. No corresponding button.
FontChoice Adds font drop down.
LinkDialog Provides a dialog for inserting URLs
TextColor Adds text color button

以及可用的properties:

Character Formatting bold, italic, underline, strikethrough, subscript, superscript, removeFormat, foreColor, hiliteColor
(這裡應該是foreColor及hiliteColor才對,C要大寫,官方教學網站寫錯了!)
Paragraph Formatting indent, outdent, justifyCenter, justifyFull, justifyLeft, justifyRight, delete, selectall
nserting Objects insertOrderedList, insertUnorderedList, createlink, inserthtml
Misc. undo, redo, cut, copy, paste

某些properties要用時,必須先require該plug-in才能用
例如要用foreColor或hiliteColor,就必須做dojo.require(“dijit._editor.plugins.TextColor”);
不過不知為何selectall和inserthtml這兩個試不出來

3. 將Dojo library解壓至你的Ruby App底下的 public/javascripts/dojo-release-1.1.0

把javascript library統一放這裡會比較好

4. 將下面這段code加入<head>…</head> tag裡
<style type="text/css">
@import "/javascripts/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
@import "/javascripts/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/javascripts/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
<span class="comment">// dojo.require("dijit._editor.plugins.FontChoice");</span>
<span class="comment">// dojo.require("dijit._editor.plugins.EnterKeyHandling");</span>
<span class="comment">// dojo.require("dijit._editor.plugins.AlwaysShowToolbar");</span>
</script>

可以看到我使用了TextColor和LinkDialog這兩個plug-in

5. 將下面這段code加入<body>…</body> tag裡
<p id="post_editor_body" class="tundra">
<b>Body</b>
<textarea id="post_body_dojo_editor" dojoType="dijit.Editor" height="200px"
plugins="[ 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'removeFormat', 'foreColor', 'hiliteColor', '|',
'indent', 'outdent','justifyCenter', 'justifyFull', 'justifyLeft', 'justifyRight', 'delete', 'selectall', '|',
'insertOrderedList', 'insertUnorderedList', 'createLink', '|',
'undo', 'redo' ]">
<%=h @post.body %>
</textarea>
<input type="hidden" id="post_body" name="post[body]" value="">
</p>

仔細看的話會發現,我沒用cut, copy, paste這三個properties,原因是FireFox不支援
在FireFox只能用Ctrl+X, Ctrl+C, Ctrl+V,其實我也覺得這三個properties有點多餘
另外,我加了一個隱藏的input element,id為post_body,name為post[body]
這是為了在form submit時,讓ruby server端可以抓到post的body資料
如果把id跟name直接設在TextArea上並沒辦法work
原因可能是該TextArea實際的文字資料並不是存在value attribute裡,所以會抓不到

6. 加上需要的javascript function
<script type="text/javascript">
function trim(str) {
if( str != null )  {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
return null;
}

function doSubmit() {
<span class="comment">// 將dojo editor的文字資料抓出</span>
var bodyText = dijit.byId('post_body_dojo_editor').getValue();
bodyText = trim(bodyText);
// alert("["+bodyText+"]");
<span class="comment">// 將隱藏的input element值,設為dojo editor的輸入文字</span>
var ghostBodyField = document.getElementById("post_body");
ghostBodyField.value = bodyText;
<span class="comment">// 抓出form element,submit it</span>
var frm = document.getElementById("post_form");
frm.submit();
}
</script>

trim function是將字串的前後空白移除,在doSubmit裡會用到
doSubmit function是當form裡的submit button按下時會去call
加好所有的程式碼後,便可以開始編輯了,可以試著從網路上copy一段有圖有文的內容試試
另外,也可試著貼一段javascript code到編輯區裡,發現Dojo Rich Editor並不會被XSS攻擊
非常好~~~ This is what I want! ^_^