TinyMCE Autoresize

时间:2012-11-14 作者:INT

正在寻找一种方法,使TinyMCE编辑器始终相对于其内容,以便编辑器的高度根据其包含的文本/图像的数量而变化。

TinyMCE似乎已经有了用于此的插件,但我不确定如何将其应用于Wordpress版本:http://www.tinymce.com/wiki.php/Plugin:autoresize

function init_tinymce_autoresize($initArray){
   $initArray[\'plugins\'] = "autoresize";
   return $initArray;
}
add_filter(\'tiny_mce_before_init\', \'init_tinymce_autoresize\');
不起作用。

想法?

2 个回复
最合适的回答,由SO网友:INT 整理而成

这里有一个解决方案。有一个小问题,因为它无法识别何时将图像添加到编辑器中。

1: 在plugins文件夹中创建一个名为tinymce autoresize的文件夹
2。在tinymce autoresize中创建名为tinymce_autoresize.php 使用此内容:

function intialize_autoresize_plugin() {
    // Check user permission
    if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') )
        return;

    // Add only in Rich Editor mode
    if ( get_user_option(\'rich_editing\') == \'true\') {
        add_filter("mce_external_plugins", "autoresize_plugin_load");
    }
}

function autoresize_plugin_load($plugin_array) {
    $plug = WP_PLUGIN_URL . \'/tinymce-autoresize/editor_plugin.js\'; 
    $plugin_array[\'autoresize\'] = $plug;
    return $plugin_array;
    }

add_action(\'init\', \'intialize_autoresize_plugin\');

3。在tinymce autoresize中创建名为editor_plugin.js 使用此内容:

/**
 * 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\', 25) + \'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);
})();
激活它,你就完成了!

SO网友:Philipp

自动调整大小插件已经内置在WordPress中,名为;wpautoresize"E;。

wpautoresize插件添加了以下TinyMCE编辑器命令:

  1. editor.execCommand(\'wpAutoResizeOn\') .. 启用自动调整大小editor.execCommand(\'wpAutoResizeOff\') .. 禁用自动调整大小editor.execCommand(\'wpAutoResize\') .. 调整编辑器大小以适应内容(例如,在以编程方式更改内容后)
    1. 如何使用它

      使用wp_editor(). 此功能将生成完整的tinyMCE编辑器(顶部有“添加媒体”和“视觉/文本”按钮)。此函数还加载;wpautoresize“;你的插件。

      加载页面后,只需激活自动调整大小模式。此JS代码将为您执行以下操作:editor.execCommand("wpAutoResizeOn").

      Full code sample

      下面是一个PHP钩子示例,它生成了一个TinyMCE编辑器,还添加了JS代码,以便在初始化时立即启用自动调整大小模式:

      <?php
      // Generate the WordPress-TinyMCE editor:
      wp_editor(\'\', \'my_editor\');
      
      // Output the JS code which enabled the autoresize-plugin on page load:
      ?>
      <script>
      tinymce.on(\'AddEditor\', function (inst) {
          inst.editor.on(\'init\', function () {
              inst.editor.execCommand(\'wpAutoResizeOn\');
          });
      });
      </script>
      <?php
      

      特殊情况:自动调整大小;“微小”;模式;teeny"E;模式不会加载wpautoresize插件,因此在调用之前需要手动将TinyMCE插件排队wp_editor().

      您可以使用过滤器来完成此操作teeny_mce_plugins - 筛选器值是要加载的所有插件的数组。只需添加插件;wpautoresize“;到那个列表。

      Full code sample

      <?php
      // Add this filter BEFORE calling wp_editor():
      add_filter( \'teeny_mce_plugins\', \'my_add_autoresize_pugin\' );
      
      // Generate the Teeny-TinyMCE editor:
      wp_editor(\'\', \'my_teeny_editor\', [ \'teeny\' => true ]);
      
      // Output the JS code which enabled the autoresize-plugin on page load:
      ?>
      <script>
      tinymce.on(\'AddEditor\', function (inst) {
          inst.editor.on(\'init\', function () {
              inst.editor.execCommand(\'wpAutoResizeOn\');
          });
      });
      </script>
      
      // ...
      
      // This filter handler enqueues the wpautoresize plugin in teeny mode:
      function my_add_autoresize_pugin( $plugins ) {
          $plugins[] = \'wpautoresize\';
          return $plugins;
      }
      

结束

相关推荐

WP-ADMIN不重定向到仪表板

我有一个奇怪的问题,我还不能解决。我安装了wordpress 3.4.1并制作了自己的模板。我使用一个插件-qTranslate。在我的本地副本和dev copy dev.mysite上,一切都很好。捷克。当我复制wordpress并登录主站点时,http://www.mysite.cz, 仪表板不显示。取而代之的是,我只在主页的顶部有一个管理面板。到目前为止,我唯一能说的区别是wp配置。php文件。在生产模式中,我还有另外两条指令:/** debugging mode */ define(\'W