1. vscode
开发语言
1. vue
2. javaScript
插件安装
1. npm install tinymce -S
2. 可以使用里面的文件， 下载后可以在node_modules 里面查看如下未目录结构
//上传文件类型
accept: {
default: “image/jpeg, image/png, image/jpg,”,
type: String
},
maxSize: {
default: 2097152,
type: Number
},
withCredentials: {
default: false,
type: Boolean
}
},
mounted() {
this.init();
},
beforeDestroy() {
// 销毁tinymce
// window.tinymce.remove(`$#{
this.Id
}`)
},
methods: {
init() {
const self = this;
this.Editor = window.tinymce.init({
// 默认配置
…this.tinymceConfig,
// 图片上传
images_upload_handler: function(blobInfo, success, failure, progress) {
if (blobInfo.blob().size > self.maxSize) {
failure(“文件体积过大”);
}
if (self.accept.indexOf(blobInfo.blob().type) > -1) {
uploadPic();
} else {
failure(“图片格式错误”);
}
function uploadPic() {
// 用axios 上传文件
// progress(0);
// let param = new FormData();
// let config = {
// headers: {
// “Content-Type”: “multipart/form-data”
// }
// };
// console.log(‘axios’, axios);
// axios
// .post(“
http://operate-dev.winchaingroup.com/api/upload
“, param, config)
// .then(response => {
// success(response.data.data);
// self.$emit(“on-upload-complete”, [json, success, failure]);
// progress(100);
// })
// .catch(error => {
// console.log(“err”, error);
// });
// 用ajax上传文件
const xhr = new XMLHttpRequest();
let createFrom = document.createElement(“form”);
let FromData = new FormData(createFrom);
xhr.withCredentials = self.withCredentials;
xhr.open(“POST”, self.url);
xhr.onload = function() {
if (xhr.status !== 200) {
// 抛出 ‘on-upload-fail’ 钩子
failure(“上传失败: ” + xhr.status);
return;
}
const json = JSON.parse(xhr.responseText);
// success函数中的参数就是你上传文件返回的url
success(json.data);
progress(100);
// 抛出 ‘on-upload-complete’ 钩子
};
FromData.append(“file”, blobInfo.blob());
xhr.send(FromData);
}
},
// prop内传入的的config
…this.config,
// 挂载的DOM对象
selector: `#${this.Id
}`,
setup: editor => {
// 抛出 ‘on-ready’ 事件钩子
editor.on(“init”, () => {
self.loading = false;
editor.setContent(self.value);
});
// 抛出 ‘input’ 事件钩子，同步value数据
editor.on(“input change undo redo”, () => {});
}
});
}
}
};
</script>
5. 在组件中导入即可使用
import tinymce from ‘./tinymce/index’
引用
https://www.bootcdn.cn/tinymce/
// tinymce地址
转载请注明：XAMPP中文组官网 » vue 集成富文本tinymce