Vue配置TinyMCE富文本编辑器 + 图片（本地）上传到服务器

一、TinyMCE是什么？

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

我们可以先大体看一下配置完成后的样子

注：博主使用的TinyMCE版本是 “tinymce”: “^4.8.2” 如果超过此版本可能会导致一些问题。

首先如果想要在Vue中使用TinyMCE，我们需要准备一些什么？
汉化的中文语言包：zh_CN.js

下载下来之后对应的是一个js文件，这个时候我们先不用管它。
这个时候我们就可以使用yarn/npm来下载对应的tinymce包了，因为我们需要配置vue所以我们还需要下载一个对应的@tinymce/tinymce-vue这个包。

npm install tinymce@4.8.2 -S  // tinymce富文本编辑器包
npm install @tinymce/tinymce-vue -S  // 配置Vue tinymce官方提供的

当下在完成之后我们就可引用并使用了
这个时候我们在node_modules找到这个对应的包然后将其拉取到static或者public文件夹下，当然你拉到那个文件夹下都没关系，知道你的配置路径可以找到就ok。

我在这里的话，因为项目是采用vue-cil2来整体构建的所以就拉取到了static文件夹下

当复制完成后，我们将开始下载的中文汉化包拉到我们的tinymce中

接下来我们就上代码。

子组件 editor.vue组件

<template><div class='tinymce'><editor id='tinymce' v-model='sunHtml' @input="inp()" :init='init'></editor></div>
</template><script>
import axios from 'axios'  // 因为上传图片地址是本地服务器  所以我们需要引入axios当然你也可以用原生ajax或fetch来发请求
import tinymce from 'tinymce/tinymce' // 引入我们下载的tinymce包
import '../../../static/tinymce/themes/modern/theme'  //引入theme文件，必须要引入的
import Editor from '@tinymce/tinymce-vue'  // 必须要引官方给我们的配置vue包
// 下方import引入都是文本编辑器中的配置项，这个根据个人需求去引入
import '../../../static/tinymce/plugins/image'
import '../../../static/tinymce/plugins/link'
import '../../../static/tinymce/plugins/code'
import '../../../static/tinymce/plugins/table'
import '../../../static/tinymce/plugins/lists'
import '../../../static/tinymce/plugins/contextmenu'
import '../../../static/tinymce/plugins/wordcount'
import '../../../static/tinymce/plugins/colorpicker'
import '../../../static/tinymce/plugins/textcolor'
export default {name: 'tinymce',// 因为我是在项目中使用的  所以这个时候我是采用了组件传值一系列方法来使用的// 当然你可以直接就使用v-model来绑定  （data中直接定义上方的v-model双向绑定值即可）props: {// 父组件传递过来的值tinymceHtml: {// 类型我们给其定义为String类型type: String,},},watch: {// 我们需要定义一个监听器tinymceHtml: {deep: true,  // 深度监听  可加可不加当你传递的是一个对象时，我们需要将深度监听加上handler(newVal, oldVal) {// 我在这里直接让v-model的值等于this.tinymceHtml父组件传递过来的值了，// 当然你等于newVal也可以 这个时候我们就实现了sunHtml双绑值同步于父组件传递的tinymceHtml值this.sunHtml = this.tinymceHtml}}},data() {return {// 定义v-model双向绑定值，然后让其默认等于父组件传递过来的值sunHtml: this.tinymceHtml,uploadUrl: process.env.UPLOAD_URL, // 自己定义的文件上传到服务器的上传地址picUrl: process.env.PIC_URL, // 上传到服务器后读取前缀路径（用于拼接显示使用的）// tinymce配置项 着重将下方两个路径换掉就可以了init: {language_url: '/static/tinymce/zh_CN.js', // 配置中文的路径language: 'zh_CN',skin_url: '/static/tinymce/skins/lightgray', // 配置项的路径height: 300,plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',branding: false,// 图片读取前缀路径images_upload_base_path: this.picUrl,// 图片本地上传方法  点击上传后执行的事件images_upload_handler: (blobInfo, success, failure) => {this.handleImgUpload(blobInfo, success, failure)}}}},created() {// 可写可不写  都行this.sunHtml = this.tinymceHtml},mounted() {// 初始化tinymcetinymce.init({})},methods: {//子组件向父组件传值事件inp() {this.$emit('inp', this.sunHtml)},// 上传本地 图片执行事件handleImgUpload(blobInfo, success, failure) {let formdata = new FormData()// append 方法中的第一个参数就是 我们要上传文件 在后台接收的文件名// 这个值要根据后台来定义// 第二个参数是我们上传的文件formdata.append('file', blobInfo.blob())// axios 定义上传方法axios({method: "post", // post方法url: this.uploadUrl, // 请求上传图片服务器的路径headers: {// 配置headers请求头Authorization: localStorage.getItem('logintoken'), // token认证，看后台'Content-Type': 'application/x-www-form-urlencoded', // 采用表单上传的方式，看后台如何接受},data: formdata // 请求数据formdata}).then(res => {if (res.data.code != 200) {// 上传失败执行此方法，将失败信息填入参数中failure('HTTP Error: ' + res.msg);return}// 上传成功之后，将对应完整的图片路径拼接在success的参数中success(this.picUrl + res.data.fileUrl);})}},components: { Editor }
}
</script>
<style></style>

父组件shop.vue组件（因为代码太多了，就不放整体文件了）

// 引入tinymce富文本编辑器组件
import Editor from './editor'// 注册组件components: {Editor}
// html引用部分
<editor :tinymceHtml='传递给子组件的值' @inp='子组件传值执行的事件'></editor>

这个时候我们再来看我们的文本编辑器

上传图片到本地服务器的功能也就实现啦。

Vue配置TinyMCE富文本编辑器 + 图片（本地）上传到服务器相关推荐

MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
ueditor 图片上传 java_Spring+Vue整合UEditor富文本实现图片附件上传的方法
下载UEditor 下载完整源码和JSP版本 Spring后端集成 1. 解压完整源码,拷贝jsp目录下的java源码,到spring mvc后端 jsp目录下java源码集成spring mvc后 ...
富文本编辑器图片url上传
官方文档:http://tinymce.ax-z.cn/general/upload-images.php //引入axios import axios from "axios路径" ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
富文本wangeditor图片自定义上传及图片删除
富文本编辑器的组件有很多像:百度的UEditor ,Vue-Quill-Editor,以及wangeditor. 组件的选择根据自己业务需求选择,本文选用的是wangeditor. 首先说一下业务需求 ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器所 ...
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...

Vue配置TinyMCE富文本编辑器 + 图片（本地）上传到服务器

一、TinyMCE是什么？

Vue配置TinyMCE富文本编辑器 + 图片（本地）上传到服务器相关推荐

最新文章

热门文章