最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

vue 集成富文本tinymce

XAMPP下载 admin 2512浏览 0评论

 

 开发环境
1. vscode
开发语言
1. vue
2. javaScript
插件安装
1. npm install tinymce -S
2. 可以使用里面的文件, 下载后可以在node_modules 里面查看如下未目录结构

QQ截图20181130152822

 },
//上传文件类型
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”
//   }
// };

         // param.append(“file”, blobInfo.blob());
// 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

您必须 登录 才能发表评论!