可滚动容器中的编辑器

ui_mode

此选项配置所有应随编辑器滚动的 UI 元素（如弹出窗口、菜单和内联对话框）的位置。

默认情况下，这些 UI 元素渲染在一个附加到文档主体的容器中，这意味着它们不与编辑器所在的任何可滚动容器相关联。

当编辑器渲染在可滚动容器中时，滚动编辑器容器会导致这些 UI 元素与锚点分离。

如果 toolbar_sticky 设置为 true，则在滚动编辑器容器时，固定工具栏和菜单对停靠没有影响；它们仅在滚动页面时触发。

但是，将此选项设置为 'split' 可支持可滚动容器中的编辑器，并调整行为如下：

  • 弹出窗口、菜单和内联对话框渲染在单独的容器中，并作为编辑器的同级元素插入。滚动编辑器容器时，这些 UI 元素会一起移动。

  • 如果 toolbar_sticky 设置为 true，则 UI 元素可在页面滚动和容器滚动时停靠。这意味着无论页面或容器本身滚动多少，UI 元素都会相对于容器保持在同一位置。

类型： String

默认值： 'combined'

可能的值： 'combined'、'split'

示例：使用 ui_mode

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  ui_mode: 'split',
  min_height: 500
});

交互式示例

HTML

<h3>Classic (iframe) editor in a scrollable container</h3>

<div class="scrollable-container">
  <textarea id="iframe">
    <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
    </p>
    <h2 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h2>
    <h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.<br>Visit the <a href="https://www.tiny.cloud/pricing">pricing page</a> to learn more about our premium plugins.</h5>
    <p>Please try out the features provided in this full featured example.</p>

    <h2>Got questions or need help?</h2>
    <ul>
      <li>Our <a href="https://www.tiny.cloud/docs/tinymce/8/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
      <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
      <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium subscriptions</a>.</li>
    </ul>

    <h2>A simple table to play with</h2>
    <table style="border-collapse: collapse; width: 100%;" border="1">
      <thead>
        <tr>
          <th>Product</th>
          <th>Cost</th>
          <th>Really?</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="text-align: center;">TinyMCE Cloud</td>
          <td style="text-align: center;">Get started for free</td>
          <td style="text-align: center;">YES!</td>
        </tr>
      </tbody>
    </table>

    <h2>Found a bug?</h2>
    <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

    <h2>Finally …</h2>
    <p>Need file uploads in your app? Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast, modern upload experience.</p>
    <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>
  </textarea>
</div> 

<h3>Inline editor in a scrollable container</h3>

<div class="scrollable-container">
  <div class="demo-inline">
    <div class="container">
      <p><img src="../_images/tiny-banner.png" style="width: 100%;"/></p>
      <h1 class="tinymce-heading">The world&rsquo;s first rich text editor in the cloud</h1>
      <p><img src="https://www.tiny.cloud/images/image-two.jpg"/></p>
      <div class="tinymce-body">
        <p>Have you heard about Tiny Cloud? It&rsquo;s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They&rsquo;re also ready for some exciting updates coming soon.</p>
        <p>One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at <a href="https://www.tiny.cloud/drive/">tiny.cloud/drive/</a>, where you&rsquo;ll find a working demo and an opportunity to provide feedback to the product team.</p>
      </div>
    </div>
    <h2 class="tinymce-heading">An editor for every project</h2>
    <div class="tinymce-body">
      <p>Here are some of our customer&rsquo;s most common use cases for TinyMCE:</p>
      <ul>
      <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
      <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
      <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
      <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
      <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
      </ul>
      <p>And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there&rsquo;s likely a solution for your editor project. If you haven&rsquo;t experienced Tiny Cloud, get started today. You&rsquo;ll even get a free trial of our premium plugins &ndash; no credit card required!</p>
    </div>
  </div>
</div>

CSS

.scrollable-container { 
    height: 300px;
    overflow: scroll;
}

.my-inline-editor {
    margin: 12px;
}

JS

const settings = {
  plugins: 'lists help',
  toolbar: 'undo redo | blocks | bold italic | bullist numlist',
  ui_mode: 'split',
  min_height: 500
};

tinymce.init({
  ...settings,
  selector: 'textarea#iframe'
});

tinymce.init({
  ...settings,
  inline: true,
  selector: '.tinymce-heading',
  inline: true,
  toolbar: 'undo redo | bold italic underline'
});

tinymce.init({
  ...settings,
  selector: '.tinymce-body',
  inline: true
});