TinyMCE粘贴word图片且图片文件自动上传功能

项目需求可发布文章 需求涉及到富文本编辑器 经过查阅我选择了较为简便 不需要后端支持可独立完成的tinymce框架 官方文档也是相当完整 虽然都是全英文 但是有强大的 谷歌~ 没问题的

编辑器，tinymce 不需要后端配合 只需要把最终编辑完的富文本传给后端就好 很简单

下载tinymce
npm install tinymce

安装tinymce-vue
npm install @tinymce/tinymce-vue

下载完成后在node_modules 中找到 tinymce/skins目录 ，复制下来 放置static

下载中文语言包
tinymce提供了很多的语言包，这里我们下载语言包 全英文 不懂 自己谷歌打开 翻译一下 选择下载zh_CN

初始化
页面引入文件

import tinymce from "tinymce/tinymce";

import Editor from "@tinymce/tinymce-vue";

import "tinymce/themes/silver";

注意tinymce的路径

注册使用
<editor :init="init" v-model="content" class="issue-editor"></editor>

components:{ editor: Editor}

初始化配置项 官方文档

有使用powerPaste 将文件powerPaste 复制下来 放置static 引入即可使用

accept: "image/jpeg, image/png", //设置图片上传规则

maxSize: "2097152", //设置图片大小

height:'500',//设置编辑框大小

content:'',//编辑的内容 可以设置监听查看编辑输入的值

init: {undefined

content_style: `

* { padding:0; margin:0; }

html, body { height:100%; }

img { max-width:100%; display:block;height:auto; }

a { text-decoration: none; }

iframe { width: 100%; }

p { line-height:1.6; margin: 0px; }

table { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }

.mce-object-iframe { width:100%; box-sizing:border-box; margin:0; padding:0; }

ul,ol { list-style-position:inside; }

`,///设置富文本的样式初始化

skin_url: "/static/skins/ui/oxide", // tinymce UI引入

language_url: "/static/zh_CN.js", //转中文文件

language: "zh_CN",

browser_spellcheck: true, // 拼写检查

branding: false, // 去水印

elementpath: false, //禁用编辑器底部的状态栏

statusbar: false, // 隐藏编辑器底部的状态栏

paste_data_images: true, // 允许粘贴图像

menubar: false, // 隐藏最上方menu}

// plugins:

// "image wordcount ",

// toolbar: {undefined

// type: [String, Array],

// default:

// "undo redo | formatselect | bold italic | ali