交互示例
此示例包含了最常见使用场景所需的插件。
HTML
<textarea id="basic-example"> <h1 style="text-align: left;">欢迎使用 TinyMCE 编辑器演示！</h1> <p>认识<strong>TinyMCE, </strong>互联网上经过 <span style="background-color: #eccafa;">最严格测试的富文本编辑器</span>，具有 60 多种功能，包括：<em>高级格式设置, </em><span style="color: #ba372a;"><strong><em>可与 Word 和 PDF 互相导出, </em></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">无障碍访问和拼写检查器</span>, 提及和评论，以及<strong><span style="color: #169179;">AI 助手</span></strong>。</p> <p><span style="font-family: terminal, monaco, monospace;">TinyMCE 易于实现和配置</span>。<a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">立即亲自试用</a>。</p> <h2>⭐️ 常用功能（包括付费订阅插件）</h2> <ul> <li>使用<a href="https://www.tiny.cloud/docs/tinymce/latest/mentions/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">@提及</a>进行协作，使用<a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">评论</a>进行讨论，使用<a href="https://www.tiny.cloud/docs/tinymce/latest/suggestededits/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">建议编辑</a>审查更改，并通过<a href="https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">修订历史</a>保留审计轨迹。</li> <li><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">从 MS Word 粘贴</a>并保留格式。您甚至可以<a href="https://www.tiny.cloud/docs/tinymce/latest/importword/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">导入 Word 文档</a>！ </li> <li>通过<a href="https://www.tiny.cloud/docs/tinymce/latest/mergetags/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">合并标签</a>和<a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">内联 CSS 输出</a>为您的电子邮件编辑器提供动力。</li> <li>通过<a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">拼写检查器</a>、<a href="https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">无障碍检查器</a>、<a href="https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">高级排版</a>和<a href="https://www.tiny.cloud/docs/tinymce/latest/linkchecker/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">链接检查器</a>达到最高标准。</li> </ul> <p><iframe src="https://www.youtube.com/embed/YpcfDYYWmK0" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p> <h2>🖖 获取 TinyMCE</h2> <table style="border-collapse: collapse; width: 100%; height: 143.125px;" border="1"><colgroup><col style="width: 33.306581%;"><col style="width: 33.306581%;"><col style="width: 33.306581%;"></colgroup> <thead> <tr style="height: 35.78125px; background-color: #ecf0f1; text-align: center;"> <td colspan="3"><strong>TinyMCE 满足您的所有架构要求。</strong></td> </tr> </thead> <tbody> <tr style="height: 35.78125px;"> <td><strong>云端</strong></td> <td><a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">免费注册</a></td> <td>始终保持最新状态，易于维护</td> </tr> <tr style="height: 35.78125px;"> <td><strong>自托管</strong></td> <td><a href="https://www.tiny.cloud/pricing/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">联系我们</a></td> <td>提供企业级支持</td> </tr> <tr style="height: 35.78125px;"> <td><strong>开源</strong></td> <td><a href="https://github.com/tinymce/tinymce?utm_campaign=tiny_docs&utm_source=site&keyword=docs">立即下载</a></td> <td>基于 GPLv2+ 许可证提供</td> </tr> </tbody> </table> <h2>为什么选择 TinyMCE 👀</h2> <ol> <li><strong>开箱即用的功能节省开发时间。</strong>从表格和拼写检查到完全协作和无障碍合规，TinyMCE 提供了您 otherwise 需要花费数月才能构建的功能。</li> <li><strong>专为您的扩展而构建。</strong>TinyMCE 支持数百万用户的应用程序。其性能、可靠性和架构专为扩展而设计，从早期的 MVP 到全球平台。</li> <li><strong>在您构建的地方工作。</strong>无论您使用的是 React、Vue、Angular 还是 vanilla JavaScript—或者将其嵌入到 SaaS 平台或 int<p>❤️ <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">立即开始构建</a></p></li> </ol> </textarea>
JS
tinymce.init({
selector: 'textarea#basic-example',
height: 500,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'help', 'wordcount',
/* Premium plugins for demo purposes only */
'mediaembed',
],
toolbar: 'undo redo | blocks | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});