通知

TinyMCE 可以显示自定义通知。

交互式示例

HTML

<textarea id="notifications">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" 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 style="text-align: center;">欢迎使用 TinyMCE 编辑器演示！</h2>

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

  <ul>
    <li>我们的<a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a>是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？试试 Stack Overflow 上的<a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code>标签</a>。</li>
    <li>作为<a href="https://www.tiny.cloud/pricing">TinyMCE 高级计划</a>的一部分，我们还提供企业级支持。</li>
  </ul>

  <h2>一个简单的表格供你使用</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>产品</th>
        <th>成本</th>
        <th>真的吗？</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align: center;">TinyMCE</td>
        <td style="text-align: center;">免费</td>
        <td style="text-align: center;">是的！</td>
      </tr>
    </tbody>
  </table>

  <h2>发现了错误？</h2>

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

  <h2>最后……</h2>

  <p>
    感谢支持 TinyMCE！希望它能帮助 你和用户创建优质内容。<br>来自 TinyMCE 团队的问候。
  </p>
</textarea>

JS

const createSuccessNotification = () => {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is an success notification.<br/>TinyMCE loaded Successfully!',
    type: 'success'
  });
};

const createInformationNotification = () => {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is an informational notification.',
    type: 'info'
  });
};

const createWarningNotification = () => {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is a warning notification.',
    type: 'warning'
  });
};

const createErrorNotification = () => {
  tinymce.activeEditor.notificationManager.open({
    text: 'This is an error... notification.',
    type: 'error'
  });
};

tinymce.init({
  selector: 'textarea#notifications',
  height: 500,
  menubar: false,
  plugins: 'lists link image fullscreen table help',
  toolbar: 'undo redo | blocks | ' +
  'bold italic backcolor | alignleft aligncenter ' +
  'alignright alignjustify | bullist numlist outdent indent | ' +
  'removeformat | help',
  setup: (editor) => {
    editor.on('SkinLoaded', (e) => {
      createSuccessNotification();
      createInformationNotification();
      createWarningNotification();
      createErrorNotification();
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

文本

text属性用于设置显示在通知中心位置的文本。这是打开通知时最重要的设置。

editor.notificationManager.open({
  text: 'A test informational notification.'
});

类型

以下通知类型在颜色和用途上有所不同：

• success

• info

• warning

• error

打开通知时设置type属性。如果未设置此属性，则使用默认样式。

editor.notificationManager.open({
  text: 'A test informational notification.',
  type: 'info'
});

超时

通知会在timeout属性中设置的毫秒值经过后自动关闭。

editor.notificationManager.open({
  text: 'A test notification that will close automatically after 5 seconds.',
  timeout: 5000
});

图标

设置icon属性以在文本左侧显示图标。

editor.notificationManager.open({
  text: 'A test notification that contains a bold icon.',
  icon: 'bold'
});

有关图标标识符列表，请参阅：可用图标。

进度条

将progressBar属性类型设置为True，以在关闭按钮左侧和文本右侧显示进度条。

const notification = editor.notificationManager.open({
  text: 'A test notification that contains a progress bar.',
  progressBar: true
});

将progressBar属性设置在0到100之间，以设置进度条的进度。

notification.progressBar.value(50);

要关闭最后显示的通知，调用以下方法：

// 关闭最后显示的通知。
editor.notificationManager.close();