npm install tinymce -S
npm install @tinymce/tinymce-vue -S
资源下载后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目,就放到 public 目录下,文中所有 static 目录相关都这样处理)tinymce 默认是英文界面,所以还需要下载一个中文语言包然后将这个语言包放到 static 目录下
<template>
<div class='tinymce-container'>
<editor id="tinymce" v-model="value" :init="init"></editor>
</div>
</template>
<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import { uploadImg } from "@/api/common";
export default {
name: "MyTinymce",
props: {
tinymceHtml: '',
tinymceHeight: {
type: Number,
default: 500
}
},
components: {
Editor
},
data() {
return {
value: this.tinymceHtml,
init: {
selector: "#tinymce",
language_url: "/tinymce/langs/zh_CN.js",
language: "zh_CN",
skin_url: "/tinymce/skins/ui/oxide",
height: this.tinymceHeight,
plugins: "image link code table lists wordcount",
toolbar:
"fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen",
browser_spellcheck: true,
branding: false,
elementpath: false,
statusbar: false,
paste_data_images: true,
menubar: false,
file_picker_types: 'image',
images_upload_credentials: true,
fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px",
font_formats:
"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times",
images_upload_handler: function(blobInfo, success, failure) {
let formdata = new FormData();
formdata.append("image", blobInfo.blob());
uploadImg(formdata)
.then(res => {
console.log(res);
success("https://qnsjk.huabeisky.com/" + res.data);
})
.catch(res => {
failure("error");
});
}
}
};
},
watch: {
tinymceHtml(newV,oldV) {
this.value = newV
}
},
computed: {},
created() {},
mounted() {
tinymce.init({});
},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="">
<myTinymce ref="myTinymce" :tinymceHtml="content"></myTinymce>
</div>
</template>
<script>
import myTinymce from "@/components/MyTinymce";
export default {
name: "",
components: {myTinymce},
}
</script>