tinymce使用原始高度的百分比自動調整插件

Question

如何修改自動調整大小插件以便可以將選項autoresize_max_height設置爲原始高度的百分比？

E.g

var defaults = { 
    height: 500, 
    autoresize_max_height: "150%", 
} 

$(selectTinyMce).tinymce(defaults); 

$(selectTinyMceSmall).tinymce($.extend(true, {}, defaults, { 
    height: 200 
})); 

$(selectTinyMceLarge).tinymce($.extend(true, {}, defaults, { 
    height: 1000 
})); 



/** 
* editor_plugin_src.js 
* 
* Copyright 2009, Moxiecode Systems AB 
* Released under LGPL License. 
* 
* License: http://tinymce.moxiecode.com/license 
* Contributing: http://tinymce.moxiecode.com/contributing 
*/ 

(function() { 
    /** 
    * Auto Resize 
    * 
    * This plugin automatically resizes the content area to fit its content height. 
    * It will retain a minimum height, which is the height of the content area when 
    * it's initialized. 
    */ 
    tinymce.create('tinymce.plugins.AutoResizePlugin', { 
     /** 
     * Initializes the plugin, this will be executed after the plugin has been created. 
     * This call is done before the editor instance has finished it's initialization so use the onInit event 
     * of the editor instance to intercept that event. 
     * 
     * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in. 
     * @param {string} url Absolute URL to where the plugin is located. 
     */ 
     init : function(ed, url) { 
      var t = this, oldSize = 0; 

      if (ed.getParam('fullscreen_is_enabled')) 
       return; 

      /** 
      * This method gets executed each time the editor needs to resize. 
      */ 
      function resize() { 
       var deltaSize, d = ed.getDoc(), body = d.body, de = d.documentElement, DOM = tinymce.DOM, resizeHeight = t.autoresize_min_height, myHeight; 

       // Get height differently depending on the browser used 
       myHeight = tinymce.isIE ? body.scrollHeight : (tinymce.isWebKit && body.clientHeight == 0 ? 0 : body.offsetHeight); 

       // Don't make it smaller than the minimum height 
       if (myHeight > t.autoresize_min_height) 
        resizeHeight = myHeight; 

       // If a maximum height has been defined don't exceed this height 
       if (t.autoresize_max_height && myHeight > t.autoresize_max_height) { 
        resizeHeight = t.autoresize_max_height; 
        body.style.overflowY = "auto"; 
        de.style.overflowY = "auto"; // Old IE 
       } else { 
        body.style.overflowY = "hidden"; 
        de.style.overflowY = "hidden"; // Old IE 
        body.scrollTop = 0; 
       } 

       // Don't make it smaller than the original height set in configuration 
       if (myHeight < ed.getParam("height")) 
        resizeHeight = t.myHeight; 

       // Resize content element 
       if (resizeHeight !== oldSize) { 
        deltaSize = resizeHeight - oldSize; 
        DOM.setStyle(DOM.get(ed.id + '_ifr'), 'height', resizeHeight + 'px'); 
        oldSize = resizeHeight; 

        // WebKit doesn't decrease the size of the body element until the iframe gets resized 
        // So we need to continue to resize the iframe down until the size gets fixed 
        if (tinymce.isWebKit && deltaSize < 0) 
         resize(); 
       } 
      }; 

      t.editor = ed; 

      // Define minimum height 
      t.autoresize_min_height = parseInt(ed.getParam('autoresize_min_height', ed.getElement().offsetHeight)); 

      // Define maximum height 
      t.autoresize_max_height = parseInt(ed.getParam('autoresize_max_height', 0)); 

      // Add padding at the bottom for better UX 
      ed.onInit.add(function(ed){ 
       ed.dom.setStyle(ed.getBody(), 'paddingBottom', ed.getParam('autoresize_bottom_margin', 10) + 'px'); 
      }); 

      // Add appropriate listeners for resizing content area 
      ed.onChange.add(resize); 
      ed.onSetContent.add(resize); 
      ed.onPaste.add(resize); 
      ed.onKeyUp.add(resize); 
      ed.onPostRender.add(resize); 

      if (ed.getParam('autoresize_on_init', true)) { 
       ed.onLoad.add(resize); 
       ed.onLoadContent.add(resize); 
      } 

      // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample'); 
      ed.addCommand('mceAutoResize', resize); 
     }, 

     /** 
     * Returns information about the plugin as a name/value array. 
     * The current keys are longname, author, authorurl, infourl and version. 
     * 
     * @return {Object} Name/value array containing information about the plugin. 
     */ 
     getInfo : function() { 
      return { 
       longname : 'Auto Resize', 
       author : 'Moxiecode Systems AB', 
       authorurl : 'http://tinymce.moxiecode.com', 
       infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/autoresize', 
       version : tinymce.majorVersion + "." + tinymce.minorVersion 
      }; 
     } 
    }); 

    // Register plugin 
    tinymce.PluginManager.add('autoresize', tinymce.plugins.AutoResizePlugin); 
})(); 

注：我已經加入if (myHeight < ed.getParam("height"))以確保高度不得低於原來的高度使之充分編輯器「點擊」默認情況下它有很多的填充。

Answer 1

您可以使用配置heigth信息在插件來計算autoresize_max_height值：

// Define maximum height 
var percentage = parseInt(ed.getParam('autoresize_max_height', 0)); // the value here is a percentage value without the "%" 

t.autoresize_max_height = ed.getParam('height') || 500; // 500 as default if height has not been set 
// apply the percentage 
t.autoresize_max_height = parseInt(t.autoresize_max_height * (percentage/100));