<template>
|
<!-- 富文本 -->
|
<div>
|
<editor v-model="content" :init="init" :disabled="disabled"></editor>
|
</div>
|
</template>
|
|
|
<script>
|
import axios from "@/api/request";
|
import tinymce from "tinymce/tinymce";
|
import Editor from "@tinymce/tinymce-vue";
|
// import "tinymce/icons/default/icons";
|
import "tinymce/themes/silver";
|
import "tinymce/plugins/image";
|
import "tinymce/plugins/media";
|
import "tinymce/plugins/table";
|
import "tinymce/plugins/lists";
|
import "tinymce/plugins/contextmenu";
|
import "tinymce/plugins/wordcount";
|
import "tinymce/plugins/colorpicker";
|
import "tinymce/plugins/textcolor";
|
import "tinymce/plugins/preview";
|
import "tinymce/plugins/code";
|
import "tinymce/plugins/link";
|
import "tinymce/plugins/advlist";
|
import "tinymce/plugins/codesample";
|
import "tinymce/plugins/hr";
|
import "tinymce/plugins/fullscreen";
|
import "tinymce/plugins/textpattern";
|
import "tinymce/plugins/searchreplace";
|
import "tinymce/plugins/autolink";
|
import "tinymce/plugins/directionality";
|
import "tinymce/plugins/visualblocks";
|
import "tinymce/plugins/visualchars";
|
import "tinymce/plugins/template";
|
import "tinymce/plugins/charmap";
|
import "tinymce/plugins/nonbreaking";
|
import "tinymce/plugins/insertdatetime";
|
import "tinymce/plugins/imagetools";
|
import "tinymce/plugins/autosave";
|
import "tinymce/plugins/autoresize";
|
|
export default {
|
name: "TinymceEditor",
|
components: {
|
Editor,
|
},
|
props: {
|
value: {
|
type: String,
|
default: "",
|
},
|
minHeight: {
|
type: Number,
|
default: 250,
|
},
|
maxHeight: {
|
type: Number,
|
default: 500,
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
plugins: {
|
type: [String, Array],
|
default:
|
"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize",
|
},
|
toolbar: {
|
type: [String, Array],
|
default:
|
"code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
|
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
|
table image media charmap hr pagebreak insertdatetime | fullscreen preview",
|
// 图片和视频 image media
|
},
|
},
|
data() {
|
return {
|
//初始化配置
|
init: {
|
menubar: true, // 菜单栏显隐
|
language_url: "/tinymce/langs/zh_CN.js",
|
language: "zh_CN",
|
skin_url: "/tinymce/skins/ui/oxide",
|
content_css: "/tinymce/skins/ui/oxide/content.min.css",
|
min_height: this.minHeight,
|
max_height: this.maxHeight,
|
// toolbar_mode: "floating",
|
plugins: this.plugins,
|
toolbar: this.toolbar,
|
content_style: "p {margin: 5px 0;}",
|
fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
|
font_formats:
|
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
|
branding: false,
|
// 图片上传
|
images_upload_handler: (blobInfo, success, failure) => {
|
const formData = new FormData();
|
formData.append("file", blobInfo.blob());
|
axios.post(
|
`/file/upload/no/expire`,formData,
|
{
|
headers: {
|
Accept: "*/*",
|
"Content-Type": "multipart/form-data",
|
},
|
}
|
).then((res) => {
|
console.log(res.data.data.url,11111);
|
success(res.data.data.url);
|
return;
|
})
|
.catch(() => {
|
failure("上传出错");
|
});
|
},
|
},
|
content: this.value,
|
};
|
},
|
mounted() {
|
tinymce.init({});
|
},
|
methods: {},
|
watch: {
|
value(newValue) {
|
this.content = newValue;
|
},
|
content(newValue) {
|
this.$emit("input", newValue);
|
},
|
},
|
};
|
</script>
|
<style>
|
.tox-tinymce-aux {
|
z-index: 9999 !important;
|
}
|
</style>
|
