第 2 步

返回富文本编辑器的基本原理与实践

    1 if (!YAHOO.realazy)
    2     YAHOO.realazy = {};
    3 
    4 if (!YAHOO.realazy.RTE)
    5     YAHOO.realazy.RTE = {};
    6 
    7 (function(){
    8     var $D = YAHOO.util.Dom,
    9         $E = YAHOO.util.Event;
   10 
   11     var ua = YAHOO.env.ua,
   12         isIE = ua.ie,
   13         isGecko = ua.gecko,
   14         isOpera = ua.opera,
   15         isWebkit = ua.webkit;
   16 
   17     /**
   18      * 替换 textarea, 实现 user-editable 的内容区域
   19      * @param {string | HTMLElement} elTextarea 需替换的 textarea 元素的 id 或者引用
   20      * @class
   21      */
   22     YAHOO.realazy.RTE = function(elTextarea){
   23         if ('string' == typeof elTextarea) elTextarea = $D.get(elTextarea);
   24         this.textarea = elTextarea;
   25         this.toolbarItems = {};
   26     }
   27 
   28     /** @scope YAHOO.realazy.RTE.prototype */
   29     YAHOO.realazy.RTE.prototype = {
   30         
   31         /**
   32          * 生成编辑器
   33          */
   34         render: function(){
   35             // step 1: 生成 iframe 并隐藏 textarea
   36             this._createIframeAndHideTextarea();
   37         },
   38         /**
   39          * 生成 iframe 并隐藏 textarea
   40          * @private
   41          */
   42         _createIframeAndHideTextarea: function(){
   43             var iframe = document.createElement('iframe');
   44             $D.addClass(iframe, 'rte-iframe');
   45             this.textarea.style.display = 'none';
   46             $D.insertBefore(iframe, this.textarea);
   47             this.iframe = iframe;
   48         }
   49     }
   50 })();