TinyMCE 有三种主要集成模式：classic 完整编辑器模式、inline 内联编辑模式以及无干扰模式。

内联编辑模式用于合并页面的编辑视图和阅读视图，以实现无缝编辑体验和真正的 WYSIWYG（所见即所得）行为。

内联编辑模式不会用 iframe 替换所选元素，而是直接在原地编辑元素内容。内联编辑器的设计特点如下：

  • 在选中可编辑内容之前保持“隐藏”状态，

  • 使用其初始化所在页面的 CSS 样式表，并且

  • 内容区域周围的 UI 极简，以最小化编辑器占用的区域。

评论仅在 TinyMCE 以 classic 模式运行时受支持。评论功能需要 侧边栏，而侧边栏在 inline 或 无干扰 模式下不受支持。有关编辑模式之间差异的更多信息，请参阅内联编辑模式。

启用内联编辑模式

内联模式仅适用于块级元素（如：div 或 h1）内的内容。要启用内联模式，请将 inline 选项设置为 true。例如：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditablediv',
    inline: true
  });
  </script>
</head>

<body>
  <h1>TinyMCE Inline Editing Mode Guide</h1>
  <form method="post">
    <div id="myeditablediv">Click here to edit!</div>
  </form>
</body>
</html>

以下演示使用四个 TinyMCE 内联模式编辑器，其中两个用于标题，另外两个用于正文文本。

HTML

<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>

CSS

.demo-inline {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  color: #626262;
  line-height: 1.3;
  font-size: 14px;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
  padding: 20px 20px 20px 20px;
}
.demo-inline .container {
  background-color: #fafafa;
  margin: -20px -20px 0 -20px;
  padding: 20px;
}
.demo-inline p {
  margin: 0 0;
}
.demo-inline h1 {
  color: #1976D2;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  margin: 0 0;
}
.demo-inline h2 {
  color: #1976D2;
  font-size: 2em;
  margin-bottom: 0;
  margin-top: 0;
  line-height: 40px;
}
.demo-inline h3 {
  font-size: 1.5em;
  color: #403f42;
  margin-bottom: 0;
  margin-top: 0;
  line-height: 40px;
}
.demo-inline ul,
.demo-inline ol {
  padding-left: 20px;
}
.demo-inline ul {
  list-style: disc;
}
.demo-inline ol {
  list-style: decimal;
}
.demo-inline a {
  text-decoration: underline;
}
.demo-inline img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px 10px 10px;
}
.demo-inline textarea {
  display: none;
}
.demo-inline *[contentEditable="true"]:focus,
.demo-inline *[contentEditable="true"]:hover {
  outline: 2px solid #1976D2;
}

JS

const emailHeaderConfig = {
  selector: '.tinymce-heading',
  menubar: false,
  inline: true,
  plugins: [
    'lists',
    'powerpaste',
    'autolink'
  ],
  toolbar: 'undo redo | bold italic underline',
  valid_elements: 'strong,em,span[style],a[href]',
  valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
  },
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
};

const emailBodyConfig = {
  selector: '.tinymce-body',
  menubar: false,
  inline: true,
  plugins: [
    'link', 'lists', 'powerpaste',
    'autolink', 'tinymcespellchecker'
  ],
  toolbar: [
    'undo redo | bold italic underline | fontfamily fontsize',
    'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
  ],
  valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
  valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
  },
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
};

tinymce.init(emailHeaderConfig);
tinymce.init(emailBodyConfig);

有关 inline 模式和 inline 设置的信息，请参阅：用户界面选项 - inline。

在 inline 模式下对内容进行样式设置

在 inline 模式下，TinyMCE 的编辑器内容区域不像经典编辑器模式那样包含在 iframe 沙盒中。

当使用以下选项时：
* content_css
* content_style

样式会被加载并应用到宿主页面中。在 inline 模式下，这意味着根据 CSS 选择器和作用域的不同，这些样式可能会影响页面上的其他元素。

在 inline 模式下对内容进行样式设置的推荐方法

首选：将内容样式直接添加到宿主页面的样式表中，并将其作用域限定在可编辑元素（例如，在可编辑元素上使用 CSS 类）。

备选方案：使用 body_class 将编辑器样式作用域限定为特定类，防止其全局应用。

避免：在 inline 模式下使用 content_css 或 content_style 进行内容样式设置——仅在需要调整编辑器 UI 组件时才保留使用它们。