<template>
|
<div>
|
<Editor v-model="myValue"
|
:init="init"
|
:disabled="disabled"
|
@onClick="onClick">
|
</Editor>
|
</div>
|
</template>
|
|
<script >
|
import tinymce from "tinymce/tinymce";
|
import Editor from "@tinymce/tinymce-vue";
|
import { upload } from "@/api/backManage/notice";
|
import 'tinymce-paragraphspacing'
|
import "tinymce/themes/silver";
|
import "tinymce/themes/silver/theme";
|
import "tinymce/icons/default/icons";
|
import "tinymce/plugins/image";
|
import "tinymce/plugins/media";
|
import "tinymce/plugins/table";
|
import "tinymce/plugins/lists";
|
import "tinymce/plugins/link";
|
import "tinymce/plugins/wordcount";
|
import "tinymce/plugins/fullscreen";
|
import "../../../public/tinymce/plugins/upfile/index";
|
import {getToken} from "@/utils/auth";
|
// import "tinymce/plugins/upfile";
|
// import "tinymce/plugins/attachment";
|
export default {
|
components: {
|
Editor
|
},
|
props: {
|
// 传入一个value，使组件支持v-model绑定
|
value: {
|
type: String,
|
default: ""
|
},
|
height: {
|
type: Number,
|
default: 500
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
plugins: {
|
type: [String, Array],
|
default: " paragraphspacing upfile lists image table wordcount fullscreen "
|
},
|
toolbar: {
|
type: [String, Array],
|
default: " styleselect fontsizeselect paragraphspacing | upfile image bold italic | fontselect |alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | lists insertfile table | removeformat fullscreen "
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
// 初始化配置
|
init: {
|
language_url: "/tinymce/langs/zh_CN.js",
|
language: "zh_CN",
|
skin_url: "/tinymce/skins/ui/oxide", // skin路径
|
content_css: '/tinymce/skins/content/default/content.css',
|
height: this.height? this.height : 500, // 编辑器高度
|
branding: false, // 是否禁用“Powered by TinyMCE”
|
menubar: true, // 顶部菜单栏显示
|
plugins: this.plugins,
|
toolbar: this.toolbar,
|
relative_urls: false,
|
remove_script_host: true,
|
statusbar: false,
|
font_formats: '默认字体=default;' +
|
'Arial=arial,helvetica,sans-serif;' +
|
'楷体=KaiTi, "Kai", serif;' +
|
'圆体=Microsoft YaHei UI, sans-serif;' +
|
'思源宋体=Source Han Serif SC, serif;' +
|
'宋体=SimSun, NSimSun, "Songti SC", serif;' + // Windows宋体
|
'新宋体=NSimSun, serif;' +
|
'黑体=SimHei, "Microsoft YaHei", "PingFang SC", sans-serif;' + // Windows黑体
|
'微软雅黑=Microsoft YaHei, sans-serif;' +
|
'仿宋=FangSong, "Fang", serif;',
|
|
// 字体样式应用到文本时使用 <span> 而非 <font>
|
inline_styles: true,
|
images_upload_handler: async (blobInfo, success, failure) => {
|
const formData = new FormData(); // 和后端协商后用formData格式进行传参
|
formData.append("file", blobInfo.blob());// 传递的参数
|
formData.append("Authorization", getToken());// token值
|
let res = await upload(formData); // 调取 接口
|
console.log(res);
|
if (res.code == 200) {
|
|
// const path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
|
let path = "";
|
if(import.meta.env.VITE_APP_ENV == 'development') {
|
path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
|
}else {
|
path = 'http://106.15.95.149:8088/api/' + res.data.path
|
}
|
|
success(path);
|
} else {
|
failure("上传失败");
|
}
|
},
|
file_callback: async (file, success) => {
|
const formData = new FormData(); // 和后端协商后用formData格式进行传参
|
formData.append("file", file);// 传递的参数
|
formData.append("Authorization", getToken());// token值
|
await upload(formData).then(res => {
|
console.log(res);
|
if (res.code == 200) {
|
// const path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
|
let path = "";
|
if(import.meta.env.VITE_APP_ENV == 'development') {
|
path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
|
}else {
|
path = 'http://106.15.95.149:8088/api/' + res.data.path
|
}
|
|
success(path,res.data);
|
} else {
|
console.log("上传失败");
|
}
|
}).catch(err => {
|
success('失败');
|
console.log('err',err)
|
})
|
}
|
},
|
myValue: this.value,
|
|
|
|
};
|
},
|
mounted() {
|
tinymce.init({
|
});
|
},
|
methods: {
|
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
|
// 需要什么事件可以自己增加
|
onClick(e) {
|
this.$emit("onClick", e, tinymce);
|
},
|
// 可以添加一些自己的自定义事件，如清空内容
|
clear() {
|
|
this.myValue = "";
|
},
|
},
|
watch: {
|
value(newValue) {
|
this.myValue = newValue;
|
},
|
myValue(newValue) {
|
this.$emit("input", newValue);
|
}
|
}
|
};
|
</script>
|
