使用Ts书写的vue2项目如何使用tinymce富文本编辑器,一起来看看吧
1.安装tinymce
npm install tinymce -S / yarn add tinymce
2.安装@tinymce/tinymce-vue
npm install @tinymce/tinymce-vue@3.2.8 -S / yarn add @tinymce/tinymce-vue@3.2.8
默认安装tinymce-vue最新版本是4.0,已经用的vue3.0的了,所以要使用之前版本
3.在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 public目录下
4.tinymce 默认是英文界面,所以还需要下载一个中文包,复制到 public/tinymce目录下
5.组件封装
<template>
<div>
<Editor :id="id" v-model="content" :init="init"></Editor>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import { uploadOssFile } from "@/api/public";
import { completeImg } from "@/utils/index";
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/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/media";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr";
import "tinymce/plugins/paste";
import "tinymce/plugins/codesample";
// import "tinymce/plugins/emoticons"
import "tinymce/icons/default/icons";
console.log(tinymce);
@Component({ name: "TinymceEditer", components: { Editor } })
export default class extends Vue {
//设置prop id
@Prop({ default: "vue-tinymce-" + +new Date() }) id!: string;
//默认高度
@Prop({ default: 300 }) height!: number;
@Prop({ default: "" })
private value!: string;
private content: string = "";
@Watch("value")
private onChangeValue(newVal: string) {
this.content = newVal;
}
@Watch("content")
private onChangeContent(newVal: string) {
this.$emit("input", newVal);
}
//富文本框init配置
init = {
selector: "#" + this.id, //富文本编辑器的id
language: "zh_CN", //语言
language_url: "/tinymce/zh_CN.js", //语言包
skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作,所以要设置一个skin_url指向之前复制出来的skin文件
menubar: "file edit insert view format table tools import", //菜单条
plugins:
"link lists image code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste codesample", //插件
toolbar:
"bold italic underline strikethrough | fontselect | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table hr pagebreak codesample | code fullscreen preview", //工具条
font_formats:
"Arial=arial,helvetica,sans-serif;宋体=SimSun;微软雅黑=Microsoft Yahei;Impact=impact,chicago;", //字体
fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", //文字大小
height: this.height, //高度
branding: false, //水印
elementpath: false, //底部元素路径
paste_data_images: true, //允许粘贴图片
file_picker_types: "media",
//初始化前执行
setup: (editor: any) => {},
//实例化执行
init_instance_callback: (editor: any) => {
this.content && editor.setContent(this.content);
//this.hasInit = true
editor.on("NodeChange Change KeyUp SetContent", () => {
//this.hasChange = true
this.content = editor.getContent();
});
},
//选择文件
file_picker_callback: (callback, value, meta) => {
if (meta.filetype == "media") {
let input = document.createElement("input"); //创建一个隐藏的input
input.setAttribute("type", "file");
// let that = this;
input.onchange = (res) => {
let formdata = new FormData();
if (input.files[0].size > 10 * 1024 * 1024) {
this.$message("视频不能超过10M");
return false;
}
formdata.set("file", input.files[0]);
uploadOssFile(formdata).then((res) => {
console.log(res);
let { data, status } = res.data as any;
if (status == "1") {
let url = completeImg(data);
callback(url);
}
});
};
//触发点击
input.click();
}
},
//上传图片回调
images_upload_handler: (
blobInfo: any,
success: Function,
failure: Function
) => {
this.handleImgUpload(blobInfo, success, failure);
},
};
private mounted() {
this.content = this.value;
}
//上传图片
private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
let formdata = new FormData();
var file = blobInfo.blob();
if (!file.name) {
const suffix =
file.type == "image/png"
? "png"
: file.type == "image/gif"
? "gif"
: "jpg";
file = new File([file], `test.${suffix}`);
}
if (file.size > 5 * 1024 * 1024) {
this.$message("图片不能超过5M");
return false;
}
formdata.set("file", file);
uploadOssFile(formdata)
.then((res) => {
console.log(res);
let { data, status } = res.data as any;
if (status == "1") {
let url = completeImg(data);
success(url);
} else {
failure("error");
}
})
.catch((err) => {
failure("error");
});
}
}
</script>
6.页面使用
<MyTinymce v-model="formData.content" ref="tinymce" />
7.实现效果