模板创建示例

最后更新：2026-11-04 10:10:15

多根编辑和文档模板创建

此交互式示例演示了 TinyMCE 作为可重用模板创建器和编辑器的基本工作示例。

它包含许多插件和配置设置，但特别突出了以下 TinyMCE 插件和配置选项：

合并标签

允许插入合并标签（也称为个性化标记或邮件合并字段）。

此演示在演示文档中包含合并标签占位符示例，并提供可用于添加到文档可编辑部分的等效合并标签占位符字符串。

在此演示中，这些占位符未连接到任何将其与特定数据集合并的逻辑。

newdocument_content

设置调用文件 → 新建文档菜单项时新编辑器包含的内容。

此处用于展示 TinyMCE 实例加载几乎可发送的标准文档。

editable_root

设置 TinyMCE 实例根的初始可编辑状态。

此处用于展示 TinyMCE 用于呈现几乎可发送的标准文档，该文档主要不能由最终用户更改。

editable_class

指定 TinyMCE 将用于确定哪些内容区域可编辑的类名。

此处用于设置最终用户可以（且应该）编辑的几乎可发送的标准文档的部分。

有关更详细的 noneditable 配置信息，请参阅不可编辑内容选项。

HTML

<textarea id="template-creation">
<div id="template">
<section class="cover">
  <header>
    <img src="../_images/ie-template-creation/template-document-logo_2x.png" alt="带有三角形图案的示例文档徽标" width="160" height="106">
  </header>
  <main class="editable">
  <h1>项目提案模板</h1>

  <p>*{client.givenname}* *{client.familyname}*</p>
  <p>*{client.company}*</p>
  </main>

  <footer>
  <p><small>机密</small></p>
  </footer>
</section>

<section>
  <main class="editable">
  <h1>执行摘要</h1>
    <p>*{client.company}* 请求协助进行 X 的断言、构建和实施，其中可能包括</p>

    <ul>
      <li>可交付成果 1</li>
      <li>可交付成果 2</li>
      <li>可交付成果 3</li>
    </ul>

<p>我们的团队在您的行业中拥有丰富的经验，并且在类似客户和项目中拥有成功的业绩记录。我们以仅为客户提供最佳结果而自豪，以便他们看到生产力的提高，从而为他们的业务带来持久的成果。</p>

<p>*{submission.date}*</p>
  </main>
</section>

<section>
  <main class="editable">
  <h1>流程</h1>

    <p>我们将与您密切合作，在 *{completion.date}* 之前构建并满足项目的需求。</p>

    <p>我们通过根据 *{client.company}* 的需求建立明确的目标和全面的解决方案来实现这一点。</p>

    <p>我们的流程如下。</p>
    
    <h2>阶段 1：初步咨询</h2>

    <p>我们的专家团队审查所有与项目相关的系统并确定：<p>
    
    <ul>
    <li>现有痛点；以及</li>
    <li>现有可利用的机会。</li>
    </ul>

    <p>基于此次初步咨询，我们制定解决方案清单。</p>

    <h2>阶段 2：解决方案模型</h2>

    <p>我们与您的团队合作实施选定的解决方案。</p>

    <p>这使我们能够专门针对 *{client.company}* 的需求定制解决方案，确保解决方案不包含您不需要且不应付费的服务。</p>

    <h2>阶段 3：实施</h2>

    <p>一旦我们就解决方案达成一致，我们的团队将实施项目计划。</p>

    <p>我们将首先提供计划的详细大纲以及包含所有相关截止日期和可交付成果的时间表。</p>
  </main>
</section>

<section class="end">
  <main class="editable">

  <p><span style="font-size: 20px;">Acme Projects 二十多年来一直致力于为客户提供帮助。自成立伊始，公司就一直专注于质量和交付。Acme 拥有分布在 4 大洲的 6000 多家客户，在您需要时，Acme 随时为您服务。</span></p>
  <p>&nbsp;</p>
  <p><span style="font-size: 20px;">如有任何疑问，请联系我们的区域专员</span></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src="../_images/ie-template-creation/template-document-fredrik_2x.png" alt="一名员工的个人资料图片" width="84" height="84"></p>
  <p>Fredrik Danielsson <br>+46 70 1740605 <br><a href="mailto:fredrik.danielsson@example.com">fredrik.danielsson@example.com</a></p>
  <p>&nbsp;</p>
  <p><img src="../_images/ie-template-creation/template-document-viola_2x.png" alt="另一名员工的个人资料图片" width="84" height="84"></p>
  <p>Viola From <br>+46 70 1740699 <br><a href="mailto:viola.from@example.com">viola.from@example.com</a></p>
  </main>
</section>

<!--
添加了空白以在视觉上将演示模板材料与示例模板分开
如果从演示的菜单栏中选择 *File → New document*，此材料（包括此注释）都不会出现在新文档中。
然而，演示模板会出现。
-->
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<h2>有问题或需要帮助？</h2>

  <ul>
    <li>我们的 <a href="*{site-url}*/tinymce/8/">文档</a> 是了解如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？请尝试 Stack Overflow 上的 <a href="*{communitysupporturl}*" target="_blank" rel="noopener"><code>*{prodnamecode}*</code> 标签。</li>
    <li>作为 <a href="*{pricingpage}*">TinyMCE 高级计划</a> 的一部分，我们还提供企业级支持。</li>
  </ul>

  <h2>发现 bug？</h2>

  <p>如果您认为自己发现了 bug，请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 上创建一个问题以向开发人员报告。</p>

  <h2>最后……</h2>

  <p>需要在您的应用中进行文件上传？考虑将 <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> 与 TinyMCE 结合使用，以获得快速、现代的上传体验。</p>
  <p>感谢您支持 TinyMCE！我们希望它能帮助您和您的用户创建出色的内容。<br>来自 TinyMCE 团队的最诚挚的问候。</p>
</div>
</textarea>

const content_style = `

// In a more typical environment this constant would be a file, style.css,
// referenced in the tinymce.init configuration with the content_css option.

body {
  background-color: #f0eeee;
  padding: 1rem;
}

section {
  padding: 4rem 4rem 1rem;
  box-sizing: border-box;
  max-width: 1050px;
  min-width: 820px;
  min-height: 600px;
  margin: 2rem auto;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  background-image: url("images/template-document-body-landscape_2x.png");
  background-size: 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: auto 220px;
  grid-template-rows: auto 60px;
  column-gap: 2rem;
  row-gap: 1rem;
}

section header,
section aside {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

section main {
  position: relative;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

section footer {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

section main:empty::before,
section main:has(> br[data-mce-bogus]:first-child)::before {
  content: "Write something...";
  position: absolute;
  top: 0;
  left: 0;
  color: #999;
}

section main > * {
  margin: 0;
}

section main > * + * {
  margin-top: .5rem;
}

section.cover {
  background-color: #fed330;
  background-image: url("images/template-document-cover-landscape_2x.png");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

section.cover main {
  align-self: center;
}

section.cover h1 {
  font-weight: 900;
  font-size: 5rem;
  letter-spacing: -1px;
  line-height: 1em;
  margin-bottom: 2.5rem;
}

section.end {
  background-color: #2C3A47;
  background-image: url("images/template-document-end-landscape_2x.png");
  background-size: 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  color: #C0C4C8;
}

section.end  a {
  color: #fff;
}

.editable:hover:not(:focus) {
  outline: 3px solid #b4d7ff;
  outline-offset: 8px;
}

.editable:focus {
  outline: none;
}
`;

tinymce.init({
  selector: 'textarea#template-creation',
  plugins: 'anchor autolink link lists image code advcode mergetags wordcount',
  toolbar: 'undo redo | blocks | bold italic strikethrough backcolor | mergetags | link image | align bullist numlist | code ',
  height: 900,
  editable_root: false,
  editable_class: 'editable',
  content_style,
  elementpath: false,
  newdocument_content: '<section class="cover"><header><img src="../_images/ie-template-creation/template-document-logo_2x.png" alt="demo document logo with triangle shapes" width="160" height="106"></header><main class="editable"><h1>Project proposal template</h1><p>*{client.givenname}* *{client.familyname}*</p><p>*{client.company}*</p></main><footer><p><small>Confidential</small></p></footer></section><section><main class="editable"><h1>Executive summary</h1><p>*{client.company}* has requested assistance with asserting, building and implementing X which may include</p><ul><li>Deliverable 1</li><li>Deliverable 2</li><li>Deliverable 3</li></ul><p>Our team has significant experience in your industry and has a successful track record with similar clients and projects. We pride ourselves on delivering only the best results for our clients so that they see an increase in productivity that has lasting results for their business.</p><p>*{submission.date}*</p></main></section><section><main class="editable"><h1>Process</h1><p>We work closely with you to build and fulfill the project’s needs by *{completion.date}*.</p><p>We do this by establishing clear goals and a comprehensive solution based on *{client.company}*’s needs.</p><p>Our process is as follows.</p><h2>Phase 1: initial consultation</h2><p>Our expert team reviews any and all project-related systems and determines:<p><ul><li>existing pain points; and</li><li>existing leverage opportunities.</li></ul><p>Based on this initial consultation we develop a solutions list.</p><h2>Phase 2: solution model</h2><p>Working with your team we implement the selected solution.</p><p>This allows us to tailor the solution specifically for *{client.company}*’s needs, ensuring the solution does not include services you do not need and should not pay for.</p><h2>Phase 3: implementation</h2><p>Once we have agreed on a solution, our team implements the project plan.</p><p>We will first deliver a detailed outline of the plan with a timeline that includes all relevant due dates and deliverables.</p></main></section><section class="end"><main class="editable"><p><span style="font-size: 20px;">Acme Projects have been helping customers for over 20 years. Since the beginning the focus has always been quality and delivery. Over six thousand customers over 4 continents, Acme is there for you, when you need it.</span></p><p>&nbsp;</p><p><span style="font-size: 20px;">Please reach out to our region associates for any inquiries</span></p><p>&nbsp;</p><p>&nbsp;</p><p><img src="../_images/ie-template-creation/template-document-fredrik_2x.png" alt="profile picture of one staff member" width="84" height="84"></p><p>Fredrik Danielsson <br>+46 70 1740605 <br><a href="mailto:fredrik.danielsson@example.com">fredrik.danielsson@example.com</a></p><p>&nbsp;</p><p><img src="../_images/ie-template-creation/template-document-viola_2x.png" alt="profile pict<p>员工指引 - 需含第二位员工的出现</p><p>Viola From<br>+46 70 1740699<br><a href="mailto:viola.from@example.com">viola.from@example.com</a></p></main></section>',
  mergetags_prefix: '*{',
  mergetags_suffix: '}*',
  mergetags_list: [
    {
      title: '客户',
      menu: [
            {
              value: 'client.givenname',
              title: '名'
            },
            {
              value: 'client.familyname',
              title: '姓'
            },
            {
              value: 'client.company',
              title: '公司'
            }
            ]
    },
    {
      title: '日程安排',
      menu: [
            {
              value: 'submission.date',
              title: '提交日期'
            },
            {
              value: 'completion.date',
              title: '完成日期'
            }
            ]
    },
  ],
});