中文文档

此页更新时间：2019-05-23 21:30

此页英文文档：https://www.tiny.cloud/docs/advanced/creating-custom-notifications/

使用TinyMCE内置API创建自定义通知：editor.notificationManager.open()

text 文本

该属性用于显示通知文本，是通知的最重要设置。

示例：

这是一个demo。

上面示例源码如下，为免冗余，以后只写关键部分：

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',
    toolbar:false,
    init_instance_callback : function(editor){
        editor.notificationManager.open({
            text: '这是一条提示信息。',
        });
    }
});

type 通知类型

内置了四种不同的通知样式，对应四种通知类型。

• success 成功
• info 普通信息
• warning 警告信息
• error 错误信息

editor.notificationManager.open({
    text: '这是一条提示信息。',
    type: 'info',
});

当编辑器首次获得焦点时，提示框出现。

timeout 关闭时间

设定通知显示多长时间后自动消失。单位毫秒，Number，不要用String。

editor.notificationManager.open({
    text: '这是一条提示信息。',
    type: 'info',
    timeout: 5000,
});

closeButton 关闭按钮

默认在通知右侧有个关闭按钮（x），设为false可隐藏。

editor.notificationManager.open({
    text: '这是一条提示信息。',
    type: 'info',
    closeButton: false,
});

icon 图标

自定义通知最前面的小图标，值为自带图标名（差不多与工具栏同名）。

editor.notificationManager.open({
    text: '这是一条提示信息。',
    type: 'info',
    icon: 'bold',
});

自带图标为svg，存放在tinymce.min.js中

在文件中搜索"accessibility-check":即为图标内容开始部分。

progressBar 显示进度

当其值设为true时，使用百分比数字表示进度，默认0。

var aaa = editor.notificationManager.open({
    text: '这是一条提示信息。',
    type: 'info',
    progressBar: true,
});
//用此设置进度条显示的数字0-100。
aaa.progressBar.value(77);

当编辑器首次获得焦点时，提示框出现。

这里多说两句，可以将aaa定义在外部，在内部给aaa赋值，这样可实现在外部设置进度数值。

关闭当前TinyMCE显示的通知，可使用：

top.tinymce.activeEditor.notificationManager.close();

这句直接扔外面就能执行，整个语句就是字面意思：在最外层调用当前正在使用的编辑器调用通知管理。