帝国建站教程,个人网站建设如何赚钱,免费数据查询网站,开发一个跑腿app需要多少钱tinymce扩展功能#xff1a;1、行高、段落间距、格式刷#xff1b;2、视频上传进度条#xff1b;3、对复制的图片设置尺寸 一、需求描述二、行高、段落间距、格式刷插件三、实现视频上传的进度条、对复制的图片设置尺寸 一、需求描述
使用技术#xff1a; vue2 tinymce5.… tinymce扩展功能1、行高、段落间距、格式刷2、视频上传进度条3、对复制的图片设置尺寸 一、需求描述二、行高、段落间距、格式刷插件三、实现视频上传的进度条、对复制的图片设置尺寸 一、需求描述
使用技术 vue2 tinymce5.4.1 实现效果图 一、扩展插件 二、视频上传进度条
二、行高、段落间距、格式刷插件
下载引入相关扩展插件可以放在components目录下
import /components/tinymcePlugins/importword// 导入Word
import /components/tinymcePlugins/paragraphspacing //段落间距
import /components/tinymcePlugins/formatpainter //格式刷
import /components/tinymcePlugins/lineheight //行高在plugins和toolbar中引入
plugins: importword formatpainter paragraphspacing lineheight
toolbar: importword formatpainter paragraphspacing lineheight三、实现视频上传的进度条、对复制的图片设置尺寸
1、DOM
editor v-if!reloading v-modelmyValue :initinit :disableddisabled onClickonClick /editor
a-modal v-modelprogressShow title上传进度 :zIndex1500 :closablefalse :footernull :maskfalsea-progress :percentuploadProgress statusactive/a-progress
/a-modal2、data:
progressShow: false,
uploadProgress: 0,3、computed: computed: {init() {let that thisreturn {// ......// 省略了其他的基础配置file_picker_types: file image media, //分别对应三个类型文件的上传link插件image和axupimgs插件media插件。file_picker_callback: function (callback, value, meta) {that.uploadProgress 0let filetype;// 上传视频if (meta.filetype media) {filetype.mp4, .avi, .mpg, .mpeg, .wmv, .mov, .flv, .swf, .rm, .ram, .mkv; //限制文件的上传类型}// 上传图片else if (meta.filetype image) {filetype.jpg, .jpeg, .png, .svg, .webp, .tif, .tiff, .gif, .raw;}// 上传文件else if (meta.filetype file) {filetype.pdf, .txt, .zip, .rar, .doc, .docx, .xls, .xlsx, .ppt, .pptx; //限制文件的上传类型}let input document.createElement(input);input.setAttribute(type, file);input.setAttribute(accept, filetype);input.onchange function () {let file this.files[0];let fd new FormData();fd.append(file, file);fd.append(biz, jeditor);fd.append(jeditor,1);// 视频、文件上传显示进度条if (meta.filetype media || meta.filetype file) {axios.post(/minio/upload, fd, {// 主要是这里获取实时的上传进度onUploadProgress: progressEvent {that.progressShow true;that.uploadProgress parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));},}).then(res {that.progressShow false;if (meta.filetype file) {callback(res.url, {text: file.name});} else {callback(res.url);}}).catch(err {that.progressShow false;})}// 图片上传else {uploadAction(/minio/upload, fd).then((res) {callback(res.url, {alt: file.name});});}};input.click();},setup: function (editor) {// 给复制粘贴而来的图片设置尺寸editor.on(paste, function (e) {setTimeout(() {// 遍历所有粘贴的图片元素const imageDoms editor.getBody().getElementsByTagName(img)for (let i 0; i imageDoms.length; i) {imageDoms[i].width imageDoms[i].naturalWidthimageDoms[i].height imageDoms[i].naturalHeight}}, 100)});}}},},
