Tinymce 编辑器 (环境为vue)
1.安装
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
//vue3以上对应tinymce的版本为4.x及其以上
2.配置文件
1)安装成功后需要将node_modules里面的tinymce/skins包,如下图:
2)将复制的包复制到public文件夹中或者根目录创建static复制到这个文件夹中(图中langs为语言包,可直接在官网下载后拖拽到这个tinymce文件夹中)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBCtlT3B-1655799691384)(C:\Users\11502\AppData\Roaming\Typora\typora-user-images\1655798990784.png)]
3)vue模板
<template>
<div class="tinymce-editor">
<editor id="tinydemo" v-model="myValue" :init="init"></editor>
</div>
</template>
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css"; //富文本样式
// 编辑器插件plugins
// 更多插件参考:https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/save";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/autoresize";
export default {
components: {
Editor,
},
props: {
value: {
type: String,
default: "",
},
// 基本路径,默认为空根目录,如果你的项目发布后的地址为目录形式,
// 即abc.com/tinymce,baseUrl需要配置成tinymce,不然发布后资源会找不到
baseUrl: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: true,
},
statusbar: {
type: Boolean,
default: true,
},
plugins: {
type: [String, Array],
default: "lists image table wordcount autoresize save link ",
},
toolbar: {
type: [String, Array],
default:"undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | save link",
},
},
data() {
return {
uuid: "vue-tinymce" + Date.parse(new Date()),
content:'',
init: {
selector: "#tinydemo",
statusbar: this.statusbar,
language_url: `/public/tinymce/langs/zh_CN.js`,
language: "zh_CN",
skin_url: `/public/tinymce/skins/ui/oxide`,
content_css: `/public/tinymce/skins/content/default/content.css`,
// height: 300,
autoresize_bottom_margin: 50,
autoresize_max_height: 500,
autoresize_min_height: 350,
autoresize_on_init: true,
autoresize_overflow_padding: 50,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false,
init_instance_callback:this.initData,//初始化触发的函数,可以用来设置文本域的默认值
// // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
// // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image- upload/#images_upload_handler
// images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
// },
elementpath: false, //隐藏元素路径
save_onsavecallback: function (value) {//保存按钮触发的回调函数
},
},
myValue: this.value,
};
},
activated() {
this.$forceUpdate();
this.initData()
},
mounted() {
this.initData()
},
methods:{
initData(){
tinymce.init({});
//初始化文本域的默认数据,如果不想给文本域设置默认数据,则注释下面这两行代码
tinymce.editors['tinydemo'].setContent(content)
tinymce.editors['tinydemo'].save();
//tinymce.editors['tinydemo'].getContent() 是获取文本域的值
}
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
},
},
};
</script>