tinymce没有正确地在init上自动调整大小

我正在使用Tinymce编辑器和autoresize插件。我的问题是，当tinymce实例初始化时，它无法正确调整高度包装内容的大小。tinymce没有正确地在init上自动调整大小

如果我在编辑器中有一个长文本（例如15行），则显示tinymce时，只对5行自动调整调整大小编辑器区域的大小，其他10行不显示。只有当我在编辑器区域输入内容时，所有15行的自动调整大小才会增长。

这是一个JavaScript自动调整大小的插件：

/** 
* 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; 
       } 

       // 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', 50) + '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); 
       ed.onLoadContent.add(function(ed, l) { 
        resize(); 

         // Because the content area resizes when its content CSS loads, 
         // and we can't easily add a listener to its onload event, 
         // we'll just trigger a resize after a short loading period 
         setTimeout(function() { 
          resize(); 
         }, 400); 

       }); 
      } 

      // 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); 
})();

它存在一种解决方法：

     // Because the content area resizes when its content CSS loads, 
        // and we can't easily add a listener to its onload event, 
        // we'll just trigger a resize after a short loading period 
        setTimeout(function() { 
         resize(); 
        }, 400);

，而是因为它的高度就小，这样的话后，计时器的解决方案是不是一个美丽的400 ms tinymce内容区域正确自动调整大小。替代解决方案是否存在或我该如何解决？

来源

2012-05-29 paganotti

您可以细化一下定时器解决方案。如果你使用的是慢速计算机，并且实际上并没有在400毫秒内加载，该怎么办？或者一台400毫秒的快速计算机？我在自己的代码中使用这个插件。它应该尽量减少小盒子显示的延迟。

// assuming mytextarea is a jquery element instance containing your tinymce. 

f = function(){ 
    if(mytextarea.tinymce()){ 
    mytextarea.tinymce().execCommand('mceAutoResize') 
    }else{ 
    setTimeout(f, 10) 
    } 
} 
f()

来源

2012-06-17 18:16:13

init_instance_callback: function (ed) 
{ 
     setTimeout(function() 
     { 
      ed.execCommand('mceAutoResize', false, undefined, {skip_focus: true, skip_undo: true}); 
     }, 1); 
},

来源

2014-05-06 18:53:42 Bald

tinymce没有正确地在init上自动调整大小

回答

相关问题