此示例仅包含非高级插件。这些插件也在全功能演示：包含高级插件中使用。
HTML
<textarea id="open-source-plugins"> <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" style="color: #2c3e50;"><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 提供了您否则需要花费数月时间构建的功能。</li> <li><strong>为您的扩展而构建。</strong>TinyMCE 为拥有数百万用户的应用程序提供支持。其性能、可靠性和架构都是为了扩展而构建的，从早期的 MVP 到全球平台。</li> <li><strong>在您构建的地方工作。</strong>无论您使用的是 React、Vue、Angular 还是原生 JavaScript—或嵌入到 SaaS 平台或内部工具中——TinyMCE 可无缝集成到您的技术栈中。</li> <li><strong>此领域无人拥有更悠久的历史。</strong>您可受益于 20 多年来在稳定性、安全性、功能、可访问性、文档改进和企业支持服务等方面的持续完善。</li> </ol> <p style="text-align: center;">❤️ <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs" title="立即开始构建">立即开始构建</a></p> </textarea>
CSS
/* 其他样板样式请参见：https://www.tiny.cloud/docs/tinymce/8/editor-content-css/ */
/*
* 用于渲染通过 image 插件插入的图像。
* 包含使用 HTML5 figure 元素的图像说明。
*/
figure.image {
display: inline-block;
border: 1px solid gray;
margin: 0 2px 0 1px;
background: #f5f2f0;
}
figure.align-left {
float: left;
}
figure.align-right {
float: right;
}
figure.image img {
margin: 8px 8px 0 8px;
}
figure.image figcaption {
margin: 6px 8px 6px 8px;
text-align: center;
}
/*
使用类而非内联样式进行对齐
查看 "formats" 选项
*/
img.align-left {
float: left;
}
img.align-right {
float: right;
}
/* 目录插件（tableofcontents）的基本样式 */
.mce-toc {
border: 1px solid gray;
}
.mce-toc h2 {
margin: 4px;
}
.mce-toc li {
list-style-type: none;
}JS
const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
tinymce.init({
selector: 'textarea#open-source-plugins',
plugins: [
'accordion', 'advlist', 'anchor', 'autolink', 'autoresize', 'autosave', 'charmap', 'code',
'codesample', 'directionality', 'emoticons', 'fullscreen', 'help', 'image',
'importcss', 'insertdatetime', 'link', 'lists', 'media',
'nonbreaking', 'pagebreak', 'preview', 'quickbars', 'save', 'searchreplace',
'table', 'visualblocks', 'visualchars', 'wordcount',
/* 仅供演示使用的 Premium 插件 */
'mediaembed',
],
editimage_cors_hosts: ['picsum.photos'],
menubar: 'file edit view insert format tools table help',
toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '2m',
image_advtab: true,
link_list: [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_list: [
{ title: 'My page 1', value: 'https://www.tiny.cloud' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' }
],
importcss_append: true,
file_picker_callback: (callback, value, meta) => {
/* 为链接对话框提供文件和文本 */
if (meta.filetype === 'file') {
callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
}
/* 为图像对话框提供图像和替代文本 */
if (meta.filetype === 'image') {
callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
}
/* 为媒体对话框提供替代源和海报 */
if (meta.filetype === 'media') {
callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
}
},
height: 600,
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding',
contextmenu: 'link image table',
skin: useDarkMode ? 'oxide-dark' : 'oxide',
content_css: useDarkMode ? 'dark' : 'default',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});此示例中已排除以下插件：
| 已排除的插件 | 说明 |
|---|---|
调整编辑器大小以适应内容。 |