经典编辑器模式

交互示例

此示例展示了如何使用 TinyMCE Classic Editor。

HTML

<textarea id="classic">
  <p><img style="float: right;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>世界上首个云端富文本编辑器</h2>

  <p>
    您听说过 Tiny Cloud 吗？
    这是我们致力于为您提供出色内容创作体验的第一步，无论您的专业水平如何。
    50,000 名开发人员已经认可。
    他们可以免费访问我们的全球 CDN、图像代理服务以及 TinyMCE 编辑器的自动更新。
    他们也准备好迎接即将推出的一些激动人心的更新。
  </p>

  <p>
    其中一项增强功能是 <strong>Tiny Drive</strong>：想象一下，为 TinyMCE 提供的云端文件管理，变得超级简单。
    了解更多信息，请访问 <a href='https://www.tiny.cloud/drive/'>Tiny Cloud - Tiny Drive</a>，在那里您可以找到可运行的演示，并有机会向产品团队提供反馈。
  </p>

  <h3>适用于每个项目的编辑器</h3>

  <p>
    以下是我们客户最常见的 TinyMCE 使用案例：
    <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>

  <p>
    这些使用案例仅仅是个开始。
    TinyMCE 极其灵活，拥有数百个 API，很可能有适合您编辑器项目的解决方案。
    如果您尚未体验过 Tiny Cloud，请立即开始。
    您甚至可以免费试用我们的高级插件 – 无需信用卡！
  </p>

</textarea>

JS

const demoBaseConfig = {
  selector: 'textarea#classic',
  width: "100%",
  height: 500,
  resize: false,
  autosave_ask_before_unload: false,
  powerpaste_allow_local_images: true,
  plugins: [
    'a11ychecker', 'advcode', 'advlist', 'anchor', 'autolink', 'codesample', 'fullscreen', 'help',
    'image', 'editimage', 'tinydrive', 'lists', 'link', 'media', 'powerpaste', 'preview',
    'searchreplace', 'table', 'tinymcespellchecker', 'visualblocks', 'wordcount'
  ],
  toolbar: 'insertfile a11ycheck undo redo | bold italic | forecolor backcolor | codesample | alignleft aligncenter alignright alignjustify | bullist numlist | link image',
  spellchecker_dialog: true,
  spellchecker_ignore_list: ['Ephox', 'Moxiecode'],
  tinydrive_demo_files_url: '../_images/tiny-drive-demo/demo_files.json',
  tinydrive_token_provider: (success, failure) => {
    success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
};

tinymce.init(demoBaseConfig);