我正在使用带有自动调整大小插件的 Tinymce 编辑器。我的问题是，当 tinymce 实例初始化时，它没有正确调整大小以包裹内容的高度。

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

这是一个 javascript autoresize 插件:

/**
 * 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 毫秒后 tinymce 内容区域会正确自动调整大小。 是否存在替代解决方案或我该如何解决？

最佳答案

您可以稍微改进计时器解决方案。如果您使用的是一台速度较慢的计算机并且它实际上没有在 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()

关于javascript - tinymce 无法在初始化时正确调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10797135/