自动调整大小

Autoresize 插件可自动调整编辑器高度，使其与内容相匹配。这创造了一种更直观的编辑体验，编辑器会随内容自然地增大或缩小。设置 max_height 选项可让您继续控制内容何时变为可滚动状态。

交互式演示

HTML

<div id="container">
    <textarea id="autoresize">
    <h1>Autoresize 插件演示</h1>
    <p>此演示展示了 autoresize 插件的实际效果。编辑器会根据内容自动调整高度。请尝试添加或删除内容以查看动态调整大小的行为。</p>
    <div>
        <div><strong>工作原理：</strong></div>
        <ul>
          <li>输入或粘贴内容，编辑器将自动扩展</li>
          <li>删除内容，编辑器将自动收缩</li>
          <li>编辑器会遵循设置的 min/max 高度限制</li>
        </ul>
    </div>
    </textarea>
</div>

JS

tinymce.init({
    selector: 'textarea#autoresize',
    plugins: "autoresize lists code",
    toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
    // Autoresize 选项
    min_height: 100,
    max_height: 400,
    autoresize_bottom_margin: 20,
    autoresize_overflow_padding: 10,
  });

基本设置

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'autoresize'
});

有关使用模块打包器打包此插件的信息，请参阅 Bundling TinyMCE - 概述。

工作原理

Autoresize 插件会监控内容变化并自动调整编辑器高度以适应内容。启用时：

• 编辑器根据 min_height 选项指定的最小高度进行初始化和渲染。

• 添加内容时，编辑器会垂直扩展

• 当达到 max_height 限制时，编辑器停止扩展

• 编辑器的 resize 手柄将被移除。

选项

这些设置控制 autoresize 行为，包括高度限制、内边距和外边距。

autoresize_bottom_margin

此选项允许您指定编辑器 body 底部的 padding 大小，该值在初始化时设置。

类型： Number

默认值： 50

示例：添加底部外边距以获得更好的内容间距

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'autoresize',
  autoresize_bottom_margin: 60 // 50px 是默认值
});

示例：将底部外边距设置为零

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'autoresize',
  autoresize_bottom_margin: 0
});

autoresize_overflow_padding

此选项允许您指定编辑器 body 两侧的 padding 大小，该值在初始化时设置。

类型： Number

默认值： 1

示例：添加水平内边距以获得更好的内容间距

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'autoresize',
  autoresize_overflow_padding: 50
});

示例：将水平内边距设置为零

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'autoresize',
  autoresize_overflow_padding: 0
});

max_height

max_height 选项的行为取决于是否启用 autoresize 插件：

• 未启用 autoresize 插件时：设置用户可以通过拖动右下角的 resize 手柄手动调整整个 TinyMCE 界面的最大高度。

• 启用 autoresize 插件时：设置编辑器在添加内容时可自动扩展的最大高度。

类型： Number

示例：使用 max_height

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'autoresize',
  max_height: 600
});

• 如果 resize 选项设置为 false，则调整大小的手柄将被禁用，用户无法手动调整编辑器大小。

• 启用 autoresize 插件时，resize 选项默认为 false。

• 值以像素为单位指定，不带单位。

• 如果在使用 autoresize 插件时未设置 max_height，编辑器将默认采用标准的 max_height 行为（无限扩展高度）。

min_height

min_height 选项的行为取决于是否启用 autoresize 插件：

• 未启用 autoresize 插件时：设置用户可以通过拖动右下角的 resize 手柄手动缩小整个 TinyMCE 界面的最小高度。

类型： Number

默认值： 100

示例：使用 min_height

tinymce.init({
  selector: 'textarea',  // 根据你的HTML更改此值
  plugins: 'autoresize',
  min_height: 100
});

• 如果 resize 选项设置为 false，则调整大小的句柄将被禁用，用户将无法手动调整编辑器大小。

• 当启用 autoresize 插件时，resize 选项默认为 false。

• 值以像素为单位指定，不带单位。

• 将 min_height 设置得过低可能会导致移动设备上的可用性问题。

• 如果在使用 autoresize 插件时未设置 min_height，编辑器将默认使用标准的 min_height 值，即 100 像素。

命令

Autoresize 插件提供了以下 TinyMCE 命令。

手动触发 autoresize

可以使用 mceAutoResize 命令手动触发 autoresize 功能。这在以下情况下很有用：

• 内容被动态添加或删除时

• 外部更改后需要重新调整编辑器大小

• 你想确保编辑器大小在特定时刻与其内容匹配

// 调整活动编辑器的大小
tinymce.activeEditor.execCommand('mceAutoResize');

// 通过ID调整特定编辑器的大小
tinymce.get('my-editor-id').execCommand('mceAutoResize');