9-2-1 CKEditor 整合 elfinder 檔案管理
9-3 所見即所得編輯器 elRTE 用法
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 多了表格功能
