一、主要参考的资料,有以下几个大佬的喔(=´▽`)ゞ
https://liubing.me/vue-tinymce-5.html#%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85
二、【前端Vue --> base64上传图片】 安装富文本tinymce、tinymce-vue插件,插件的使用,参考TinyMCE官网,还有图片上传功能相关文档
2.1、安装TinyMCE富文本编辑器插件
npm install @tinymce/tinymce-vue --save-dev
npm install tinymce --save-dev
2.2、【base64上传图片】封装编辑器组件,tinymce-editor.vue
首先,不借助后端,直接base64上传,主要是images_upload_handler属性,代码如下,主要参考这位大佬(<( ̄ ﹌  ̄)> 这一步,真的找了很久资料,其实之前是可以的,但由于一开始,就想通过接口实现即axios上传,所以误以为不能上传,所以最好先测试一下base64是否能上传图片,再换axios上传)
<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/themes/silver'
// 编辑器插件plugins
// 更多插件参考:https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import 'tinymce/plugins/link'// 插入链接插件
export default {
components: {
Editor
},
props: {
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image media table wordcount 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 link | removeformat'
}
},
data () {
return {
init: {
language_url: `/static/tinymce/langs/zh_CN.js`, // 因为文件存储在static文件夹下,不用考虑开发和生产环境
language: 'zh_CN',
skin_url: `/static/tinymce/skins/ui/oxide`,
content_css: `/static/tinymce/skins/content/default/content.css`,
// skin_url: `/static/tinymce/skins/ui/oxide-dark`, // 暗色系
// content_css: `/static/tinymce/skins/content/dark/content.css`, // 暗色系
height: 500,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false,
// 此处为图片上传处理函数,以下是直接base64的图片形式上传图片
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: async (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64();
success(img)
}
},
myValue: this.value
}
},
mounted () {
/* 初始化富文本 */
tinymce.init({})
},
methods: {
// 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 自定义事件,清空内容
clear () {
this.myValue = ''
}
},
watch: {
value (newValue) {
// console.log('value====', newValue);
this.myValue = newValue
},
myValue (newValue) {
// console.log('myValue====', newValue);
// 【改变】value属性的值
this.$emit('input', newValue)
}
}
}
</script>
2.3、然后在组件index.vue中使用,文件布局如下(index.vue内容在下方展示)
<template>
<div class="w_content my-edit">
<div class="my-head">
<span>编辑文档</span>
</div>
<el-row class="edit_tit">
<el-col :span="6">
<el-input placeholder="请输入标题..." size="mini" v-model="textData.title"></el-input>
</el-col>
</el-row>
<div class="edit-cont">
<!-- {{ textData.html_text }} -->
<tinymce-editor ref="editor" v-model="textData.html_text" :disabled="disabled"></tinymce-editor>
<el-row class="edit_footer">
<el-button type="primary" size="mini" @click="clear">清空内容</el-button>
<el-button type="danger" size="mini" @click="disabled = true">禁用</el-button>
<el-button type="warning" size="mini" @click="disabled = false">启用</el-button>
</el-row>
</div>
</div>
</template>
<script>
import TinymceEditor from "./module/tinymce-editor";
export default {
components: {
TinymceEditor
},
data() {
return {
textData: {
title: "Here enter your title.",
html_text: "Welcome to Use Tinymce Editor"
},
disabled: false
};
},
methods: {
// 清空内容
clear() {
this.$refs.editor.clear();
}
}
};
</script>
<style lang="scss">
.my-edit {
min-width: 1110px;
.edit_tit {
padding-bottom: 10px;
}
.edit_footer {
padding-top: 20px;
display: grid;
grid-column-gap: 3px;
justify-items: start;
justify-content: start;
grid-template-columns: 0px 86px 66px 66px;
}
}
</style>
三、【前端Vue --> axios上传图片】注意,需要传递FormData对象
3.1、【axios上传图片】修改编辑器组件,tinymce-editor.vue,引入自定义请求接口的函数uploadImage(params),参考TinyMCE官网,【注意】FormData对象名“file”,对应之后nodejs上传图片需要!!!
3.2、【界面操作演示】
四、【后端Node.js】接收FormData对象,安装插件multer,设置图片存储路径
4.1、【如何存储formData图片】是的,前端展示页如以上代码即可,但是node.js要接收FormData对象,需要安装一些插件(这也吃了一些苦头ヽ(°▽、°)ノ),首先,安装multer插件,参考了这个大佬
npm install multer --save
【存储图片文件,并返回展示的图片文件路径】
【upImg对象的priview_url,对应前端需要展示图片的路径地址】
4.2、自定义函数,如下:
五、【后端Node.js】在Express中提供静态文件,即图片地址(前提安装了express)
5.1、【如何访问静态文件】前端如何读取到服务器的图片呢?其实只需Node.js在app.js文件中,使用express.static中间件函数即可,展示一下此时服务器文件布局
六、【图片删除功能】fs.unlinkSync函数
6.1、首先删除了数据库中的数据,然后通过数据库返回的文件名,作为fs.unlinkSync的参数名,注意路径需要是绝对路径
七、【演示效果】此时将图片存储到数据库的文件表中,将保存的富文本数据存储在编辑表中,提供了查看、修改、删除、模糊查询等功能
【图片展示】
【总结】
1、前端需要安装TinyMCE插件,当前需求主要是上传图片功能,注意传给后端需要FormData对象,请求接口时需要修改“Content-Type”的类型
2、后端需要安装multer中间件,可以获取前端的FormData对象,并且可以自定义文件名字,存储路径
3、后端需要返回给前端展示的路径,此时需要Express的static中间件函数,即可通过访问服务器地址,获取图片
4、前端获取到图片路径,直接使用TinyMCE的成功回调函数
5、具体代码,之后会上传github
写给自己的随笔,有问题欢迎指出(*^▽^*)