dijit/Editor
簡介
dijit/Editor 是 dojo 提供的一個 rich-text editor，意思就是編輯器具備很多功能，可以編排格式，改變字體、字型等等，比起 HTML 中提供的 textarea 功能強大多了。dijit/Editor 具有一個工具列，工具列的內容可以根據實務需要，透過插件 (plugin) 的方式增減圖像按鈕。編輯後的文字內容以 HTML 的格式儲存。
所有的 extraPlugins 都放在 dijit/_editor/plugins 和 dojox/editor/plugins 兩個目錄下，可以直接到目錄去看看有多少插件可供運用。唯 dojox/editor/plugins 下的插件，有些有自已的樣式表，放在 dojox/editor/plugins/resources/css 目錄下，在使用這些有樣式表的插件時，要記得把插件的樣式表也納入網頁之中。
所有的插件元件名稱都是第一個字母大寫，但在設定 plugins 及 extraPlugins 的陣列時，用的都是所謂的 short name, 拼法和元件的名稱一致，唯所有的字母都是小寫。
dijit/Editor 實作時採用了 iframe 來容納這個編輯器，如此一來，可以避免編輯器的內容影響到網頁，但同時也造成了一些困擾。像是宣告時要用 <div> 標記，而不是 <textarea>；無法受到 form 或 form manager 的管轄，因此在讀取輸入值時，得另做處理等等。
範例
範例中用宣告法建立了一個 dijit/Editor 的編輯器，並稍為改變了一下工具列的內容，以展示如何用插件變更工具列。以及兩個按鈕，一個用來設定編輯器的起始內容，一個用來讀取編輯過後的內容。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin:0 auto;
width:1000px;
height:100%;
padding-top: 20px;
}
#myEditor {
width:400px;
min-height:200px;
}
</style>
用 #myEditor 定義編輯器的樣式，將寬度設為 400px 寛，另設定了 min-height 為 200px 高。dijit/Editor 似乎會佔據固定約 350px 高的畫面區域，只要高度的定義小於 350px 時，底框線就會失踪。當內容超過視窗大小時，會自行出現捲動軸。
HTML
<body class="claro">
</body>
第 2~7 行用宣告法定義一個 dijit/Editor。
lang:'zh-TW' 設定提示用的文字為正體字，預設是簡體，dijit/Editor 似乎不能正確的使用網頁所設定的語言。
name 設定要儲存編輯內容的變數名稱，但 form manager 無法主動讀取編輯後的內容，必須手動設定。
plugins 設定要顯示在工具列的圖像按鈕。
extraPlugins 則設定另一組可以顯示在工具列的圖像按鈕。
如果不設定 plugins ，則工具列會顯示預設的所有圖像按鈕，加上 extraPlugins 所設定的按鈕。若兩個都不設定，則工具列會顯示所有預設的圖像按鈕。
第 8~9 行，建立兩個 dijit/form/Button ，一個用來設定編輯的內容，一個用來讀取編輯後的內容。
Script
第 8~12 行載入所要用到的插件，因為這些額外的插件並非介面的 dijit，所以，既便是用宣告法， dojo 的剖析器也不會自行載入這些插件，因此要明確的用 require 去下載。
第 23~26 行是讀取編輯內容的函式。
第 27~30 行是設定預設編輯內容的函式。單純的輸入文字，dijit/Editor 並不一定會產生 <div> 的標記將整個內容包起來，編輯後的內容可能會和預測的內容的有很大的出入，實務上要多測試才行。
沒有留言:
張貼留言