内联编辑器

本示例展示了 TinyMCE 的内联编辑功能。

HTML

<div class="demo-inline">
  <div class="container">
    <p><img src="../_images/tiny-banner.png" style="width: 100%;"/></p>
    <h1 class="tinymce-heading">全球首个云端富文本编辑器</h1>
    <p><img src="https://www.tiny.cloud/images/image-two.jpg" /></p>
    <div class="tinymce-body">
      <p>您听说过 Tiny Cloud 吗？这是我们致力于提供卓越内容创作体验的第一步，无论您的专业水平如何。已有 50,000 名开发人员加入我们。他们可免费使用全球 CDN、图片代理服务以及 TinyMCE 编辑器的自动更新功能。同时，他们也将准备好迎接即将到来的精彩更新。</p>
      <p>其中一项增强功能是 <strong>Tiny Drive</strong>：想象一下，为 TinyMCE 提供的、极为简便的云端文件管理。了解更多信息请访问 <a href="https://www.tiny.cloud/drive/">tiny.cloud/drive/</a>，您将找到可运行的演示版本，并有机会向产品团队提供反馈。</p>
    </div>
  </div>
  <h2 class="tinymce-heading">适用于所有项目的编辑器</h2>
  <div class="tinymce-body">
    <p>以下是我们的客户最常见的 TinyMCE 使用场景：</p>
    <ul>
    <li>内容管理系统 (<em>例如 WordPress、Umbraco</em>)</li>
    <li>学习管理系统 (<em>例如 Blackboard</em>)</li>
    <li>客户关系管理和营销自动化 (<em>例如 Marketo</em>)</li>
    <li>电子邮件营销 (<em>例如 Constant Contact</em>)</li>
    <li>在 SaaS 系统中创建内容 (<em>例如 Eventbrite、Evernote、GoFundMe、Zendesk</em>)</li>
    </ul>
    <p>这些用例仅仅是开始。TinyMCE 极其灵活，拥有数百个 API，很可能为您的编辑器项目提供解决方案。如果您尚未体验 Tiny Cloud，请立即开始。您甚至可以免费试用我们的高级插件——无需信用卡！</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);