elRTE使用方法，代码

最新推荐文章于 2017-11-07 14:56:22 发布

解忧草1012

最新推荐文章于 2017-11-07 14:56:22 发布

阅读量1.2k

点赞数

分类专栏：收藏文章

收藏文章专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.貼上以下語法，自行修改正確路徑。

<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">

    
    <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">

    
    <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" ，如：

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);