富文本 - TinymceEditor

5.45.1.快速使用
富文本编辑器组件 TinymceEditor 基于 tinymce 封装(精简版无此组件)，详细使用说明请查看 TinyMCE中文文档 ，使用示例：

运行代码 新窗口打开
5.45.2.属性列表
编辑器配置 init 属性的默认值：
const DEFAULT_CONFIG = {
height: 300,
branding: false,
skin_url: '/tinymce/skins/ui/oxide',
content_css: '/tinymce/skins/content/default/content.min.css',
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
plugins: 'code preview fullscreen searchreplace link autolink image media table codesample lists advlist charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
draggable_modal: true,
toolbar_drawer: 'sliding',
// 图片上传处理，默认转为 base64 格式
images_upload_handler: (blobInfo, success, error) => {
if (blobInfo.blob().size / 1024 > 400) {
error('大小不能超过 400KB');
return;
}
success('data:image/jpeg;base64,' + blobInfo.base64());
},
file_picker_types: 'media',
file_picker_callback: () => { }
}
5.45.3.实例方法
提供了一个实例方法 alert 弹出提示框，可用于实现文件上传做校验提示，编辑器层级较高，若使用 EleMessage 会被遮挡：

运行代码 新窗口打开
5.45.4.图片上传
自定义图片上传需要重写 images_upload_handler 方法，使用示例：

运行代码 新窗口打开
5.45.5.文件上传
自定义文件上传需要重写 file_picker_callback 方法，使用示例：

文件上传与图片不一样，需要准备一个 input 触发文件选择，这里也可以不用 input，比如弹窗选择服务器文件库的文件。
运行代码 新窗口打开