elRTE使用方法,代码

发布时间:2014-10-23 23:30:38
来源:分享查询网

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 為: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  選項 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); this.active  = true; this.command = function() { alert('test'); } this.update = function() { }         }     } )(jQuery);     4.添加图标:     .el-rte .toolbar ul li.myAdd  {background-position:-829px -5px;}

返回顶部
查看电脑版