1.貼上以下語法，自行修改正確路徑。
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8">
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8">
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.zh_TW.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
var opts = {
cssClass : 'el-rte',
lang : 'zh_TW',
width : 640,
height : 200,
toolbar : 'complete',
cssfiles : ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
</script>
2.在表單中的編輯框裡加上 id="editor" ，如：
<textarea id="editor"></textarea>
3.修改 doctype 為：
選項
| Option | Type | Description |
|---|---|---|
| doctype | String | DocType of editor window (iframe). Default - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| cssClass | String | CSS class for editor |
| cssfiles | Array | Array of css files which will be included in editor (iframe) |
| absoluteURLs | Boolean | Make image URLs absolute |
| allowSource | Boolean | Allow edit in HTML |
| lang | String | Interface language (requires inclusion of language file), default - English |
| styleWithCSS | Boolean | If true - text will be formated using span-tag with style attribute, else - semantic tags like strong, em and other |
| height | Number | Height of editor window in pixels |
| width | Number | Width of editor window in pixels |
| fmAllow | Boolean | Allow use of file manager |
| fmOpen | Function(callback) | Function which will be called to open file manager. Argument callback - function which editor passes to file manager on open. File manager must call this function with using URL of selected file as argument |
| toolbar | String | Toolbar to use |
工具列
- tiny: 最精簡的幾個基本功能
- compact: 比 tiny 多了儲存、復原、對齊、列表、連結、全螢幕等功能。
- normal: 比 compact 多了複製貼上、顏色選擇、邊距、區塊元件、圖片等功能。
- complete: 比 normal 多了文字大小、樣式及格式等功能。
- maxi: 比complete 多了表格功能
=======================================================================================================================
1.創建elrte 編輯器
$().ready(function() {
var opts = {
cssClass : 'el-rte',
// lang : 'ru',
height : 450,
toolbar : 'complete',
cssfiles : ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
});
2.獲得elrte 編輯器的值
jQuery("#editor").elrte('val');
3.給elrte 編輯器賦值
jQuery("#editor").elrte('val','<b>gu ding zhi</b>');
4.刪除about 功能鍵
打開elrte.full.js 就是 被引用的elrte.js
1.找到：elRTE.prototype.options的button屬性 刪除about
2.找到：panels 屬性 刪除 about
3.找到 buttons.about 方法 全部刪除
4.刪除about 圖標： 打開 elrte.full.css 找到 toolbar 對應的圖片，background:url('../images/elrte-toolbar.png')，也就是：elrte-toolbar.png ，用ps刪除 about的圖標，找到：.el-rte .toolbar ul li.about {background-position:-829px -5px;} 刪除
5.擴展開發
添加一個myAdd按鈕：和刪除一致
1.找到：elRTE.prototype.options的button屬性 添加：'myAdd': 'myAdd element'
2.找到：panels 屬性 在fullscreen 內添加 myAdd
3.添加myAdd 方法：
(
function($){
elRTE.prototype.ui.prototype.buttons.myAdd = function(rte, name) {
this.constructor.prototype.constructor.call(this, rte, name);
}
)(jQuery);
4.添加圖標：
.el-rte .toolbar ul li.myAdd {background-position:-829px -5px;}