- 安装tinymce
yarn add tinymce -S
- 安装@tinymce/tinymce-vue
yarn add @tinymce/tinymce-vue -S
- 在node_modules文件下找到tinymce模块,复制tinymce放入项目的根目录下static / public的文件夹中
- 下载汉化包https://www.tiny.cloud/get-tiny/language-packages/,将zh_CN.js放入tinymce目录下的langs文件夹中
- 创建组件:
<template>
<div class="tinymce-editor">
<editor v-model="myValue" :init="init" :disabled="disabled"></editor>
</div>
</template>
<script>
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/lists";
export default {
components: {
Editor
},
props: {
value: {
type: String,
default: ""
},
baseUrl: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: "lists image"
},
toolbar: {
type: [String, Array],
default:
"undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat"
}
},
data() {
return {
init: {
language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
language: "zh_CN",
skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
height: 300,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false
},
myValue: this.value
};
},
mounted() {
tinymce.init({});
},
methods: {
onClick(e) {
console.log(e);
this.$emit("onClick", e, tinymce);
},
clear() {
this.myValue = "";
}
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
}
}
};
</script>
- 在页面中引用
<tinymce-editor v-model="value"></tinymce-editor>
import tinymceEditor from "@/components/Tinymce/index";
export default {
components: {
tinymceEditor
},
data() {
return {
value: ""
};
},