第 3 步

返回富文本编辑器的基本原理与实践
    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     /**
   29      * 预填充 iframe 的内容
   30      *
   31      */
   32     YAHOO.realazy.RTE.htmlContent =  ['<!DOCTYPE HTML PUBLIC "-/','/W3C/','/DTD HTML 4.01/','/EN" "http:/','/www.w3.org/TR/html4/strict.dtd"><html><head><title>编辑页面</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body>{CONTENT}</body></html>'].join('');
   33 
   34     /** @scope YAHOO.realazy.RTE.prototype */
   35     YAHOO.realazy.RTE.prototype = {
   36         
   37         /**
   38          * 生成编辑器
   39          */
   40         render: function(){
   41             // step 1: 生成 iframe 并隐藏 textarea
   42             this._createIframeAndHideTextarea();
   43             // step 2: 开启 iframe 的 designMode
   44             this._turnOnDesignMode();
   45         },
   46         /**
   47          * 生成 iframe 并隐藏 textarea
   48          * @private
   49          */
   50         _createIframeAndHideTextarea: function(){
   51             var iframe = document.createElement('iframe');
   52             $D.addClass(iframe, 'rte-iframe');
   53             this.textarea.style.display = 'none';
   54             $D.insertBefore(iframe, this.textarea);
   55             this.iframe = iframe;
   56         },
   57         /**
   58          * 获取 iframe 的 contentWindow
   59          * @private
   60          */
   61         _getWin: function(){
   62             return this.iframe.contentWindow;
   63         },
   64 
   65         /**
   66          * 获取 iframe 的 document
   67          * @private
   68          */
   69         _getDoc: function(){
   70             return this._getWin().document;
   71         },
   72 
   73         /**
   74          * 开启 iframe 的 design mode
   75          * @private
   76          */
   77         _turnOnDesignMode: function(){
   78             try {
   79                 this._getDoc().open();
   80                 this._getDoc().write(YAHOO.realazy.RTE.htmlContent.replace(/{CONTENT}/, this.textarea.value));
   81                 this._getDoc().close();
   82                 this._getDoc().designMode = 'on';
   83             } catch(ex) {
   84                 setTimeout(arguments.callee, 0);
   85                 return;
   86             }
   87         }
   88     }
   89 })();