TinyMCE 图片上传插件使用说明
本插件特色:
-
界面简洁,相较于官方插件,取消了多 tab 模式, 取消了宽高设置文本框
-
交互流畅,图片上传等待时间加了 loading
-
默认上传本地文件,减少选择
一、配置
下载本项目到本地,core/upload 函数修改,要修改的地方如下:
1、修改获取七牛接口
function getQiniuToken(fileExt, callback): any {
const url = "<获取 token 接口>";
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
callback(JSON.parse(xhr.response));
}
};
xhr.send(null);
}
2、修改七牛上传地址
function getUrl(formdata, callback) {
const xhr = new XMLHttpRequest();
xhr.open("POST", <七牛上传地址>, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
callback(JSON.parse(xhr.response));
}
};
xhr.send(formdata);
}
二、编译
1、预览
(1) 开启热更新: yarn start
(2) 预览插件: 浏览器打开 demo/html/index.html,即可看到插件效果
2、编译
(1) 执行 yarn build --force
,这里用了 force,因为有些 tslint 问题,懒得理了
(2) 编译完之后会看到生成了 dist/video-upload 目录,说明编译完成了
三、使用
1、拷贝插件
复制 video-upload 文件到 tinymce/plugins 目录下
2、配置插件
{
plugins: "video-upload",
toolbar: "video-upload",
}
完成以上配置即可愉快的使用这个插件啦