VUE后台管理中使用富文本编辑器导入word 文档进行编辑
VUE后台管理中使用富文本编辑器导入word 文档进行编辑
前言
最近因业务需求在项目中嵌入了tinymce这个编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器,直接将新闻部门的工作从半天工作量提升只要一个小时就可以搞到,一两分钟就可以搞定一个任务
优点
文档好,功能强,bug少,无外部依赖。
word文档粘贴进来要带格式
兼容移动端
word文档粘贴进来要正常显示并且还要兼容移动端
电脑网页里粘贴进来内容要正常显示并且排版还不能乱
电脑网页拷过来的内容还要兼容到移动端
安装
npm install tinymce @tinymce/tinymce-vue@3.2.8 -S
下载语言包
中文语言包下载
开始操作文件
将依赖包 node_modules 里找到
tinymce
文件夹,复制到public 里,【左图是tinymce,右图是public复制后的目录】
一下是注意点:
很多的博客的写法是将 node_modules 里面的
skins
文件夹复制到public/tinymce
目录下,经过尝试是不完善的,需要将整个目录倒入进public里
不完全导入的错误显示,我还以为是语言包的问题,一个个语言包版本去试,这种展示一半英文一半中文的
导入tinymcejs
public/index.html 添加 tinymce.js
<div id="app"></div>
<script src="/tinymce/tinymce.min.js"></script>
引入基本文件
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
注册组件
components: { Editor },
使用组件
<div class="activeConfig-container"><Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" /></div>
tinymce 初始化配置
data() {return {// tinymce的绑定值tinymceHtml: '',// tinymce的初始化配置editorInit: {selector: '#tinymce',language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',skin_url: '/tinymce/skins/ui/oxide',height: 400,plugins: 'link lists image code table wordcount importword',toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | importword',//点击富文本图片上传的时候将图片转成base64再通过success插入images_upload_handler: (blobInfo, success) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)},importword_filter: function(result, insert, message) {// console.log(result)// console.log(insert)// console.log(message)// 自定义操作部分insert(result) // 回插函数},// statusbar: false // 是否隐藏底部的状态栏// menubar: false, // 是否隐藏最上方的菜单branding: false // 是否禁用“Powered by TinyMCE”}}},
整体代码
<template><div class="activeConfig"><div class="activeConfig-container"><Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" /></div></div>
</template>
<script>
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
// import { uploadImgage } from '@/api/activeConfig'
export default {name: 'ActiveConfig',components: { Editor },data() {return {// tinymce的绑定值tinymceHtml: '',// tinymce的初始化配置editorInit: {selector: '#tinymce',language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',skin_url: '/tinymce/skins/ui/oxide',height: 400,plugins: 'link lists image code table wordcount importword',toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | importword',// 此处为图片上传处理函数// images_upload_handler: (blobInfo, success, failure) => {// this.handleImgUpload(blobInfo, success, failure)// },images_upload_handler: (blobInfo, success) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)},importword_filter: function(result, insert, message) {// console.log(result)// console.log(insert)// console.log(message)// 自定义操作部分insert(result) // 回插函数},// statusbar: false // 是否隐藏底部的状态栏// menubar: false, // 是否隐藏最上方的菜单branding: false // 是否禁用“Powered by TinyMCE”}}},mounted() {tinymce.init({})},methods: {// 图片上传handleImgUpload(blobInfo, success, failure) {// this.baseUrl = process.env.VUE_APP_BASE_URL// const imgBase64 = 'data:image/jpeg;base64,' + blobInfo.base64()// const data = { img: [imgBase64] }// uploadImgage(data).then(res => {// // 传入success回调里的数据就是富文本编辑器里插入图片的src的值// success(`${this.baseUrl}/${res.data[0]}`)// }).catch(() => { failure('error') })}}
}
</script>
<style lang="scss" scoped>
.activeConfig {&-container {margin: 30px;}
}
</style>
特殊需求
需要找个能实现word文档上传到富文本编辑器,减轻编辑机构的负担,解决机构需要每次打开文档复制再编辑的繁琐工作,实现直接导入编辑
tinymce插件
一个下载插件,一个是注意点,图片在富文本是base64的方式
导入插件
下载解压后
将整个文件复制到public的插件目录
再往tinymce配置添加即可
editorInit.plugins 和 editorInit.toolbar 添加importword即可
editorInit: {selector: '#tinymce',language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',skin_url: '/tinymce/skins/ui/oxide',height: 400,plugins: 'link lists image code table wordcount importword',toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | importword'}
图片解决方案
如果碰到图片的问题,处理图片有两种方式:
1、一种在提交内容的时候统一处理图片,稿件文件里图片只要提交一次。
2、一种是监听图片上传,每次更新图片都上传图片。
图片上传函数有
images_upload_handler
第二种
const files = []
const base64ImgSum = []
for (let i = 0; i < imgs.length; i++) {//去除不用的属性imgs[i].removeAttribute('data-mce-src')imgs[i].removeAttribute('alt')//拿到所有的图片列表imgs[i].src.includes('base') && base64ImgSum.push(imgs[i])
}//将base64图片转换file文件
dataURLToFile(dataURL, filename) {const arr = dataURL.split(',')const mime = arr[0].match(/:(.*?);/)[1] // mime类型 image/pngconst bstr = atob(arr[1]) // base64 解码let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })// return new Blob([a8arr], {type: mime});
},//将处理file文件当参处理即可
fd.append('file', this.dataURLToFile(base64ImgSum[i].src, `${(new Date()).getTime()}.jpg`))
VUE后台管理中使用富文本编辑器导入word 文档进行编辑相关推荐
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- Vue cli项目,使用富文本编辑器WangEditor,8小时摸爬滚打后,弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传 竟然存的是 ...
- vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
- ThinkPHP框架中使用富文本编辑器后如何输出
htmlspecialchars_decode()用这个能解析里面的符号 我们在利用ThinkPHP提交数据的时候,数据库里的数据是含各种html标签的,那么在输出时就可以直接输出嘛.但是,也许你的老 ...
- Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)
如果你们有问题,可以发评论提问,我看见一定回复!!!!! 文章目录 一.基本使用 1.下载vue-quill-editor组件 2.引入· 富文本组件 3.工具栏相关配置 4.设置工具栏中文提示 5. ...
- 在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...
- react中使用富文本编辑器,发布文章
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 富文本编辑器,在开发中是常用的,下面直接进入正题了: 1. ...
- React中使用富文本编辑器Quill,支持粘贴图片
最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中. 由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源 ...
最新文章
- java 日志脱敏框架 sensitive,优雅的打印脱敏日志
- for循环一定要指定键么 vue_vue的for循环使用方法
- jmeter 循环使用csv数据_如何通过jmeter读取csv文件行数来设置循环控制器的总数...
- plsql连接 oracle instantclient_11_2 本地机器不安装oracle_02
- mysql shell可视化_shell编程系列24--shell操作数据库实战之利用shell脚本将文本数据导入到mysql中...
- 卸载VS2008后重新安装VS2005的苦难历程
- Understand-4.0.877-Linux-64bit.tgz最新版本2017年源代码阅读利器,养眼theme之配置
- 拓端tecdat|R语言使用二元回归将序数数据建模为多元GLM
- 数据库习题(填空题三)
- 大淘宝技术发布首个基于神经渲染的3D建模产品Object Drawer,现已向学术界与普通用户开放...
- python 单因子方差分析_假设检验之F检验-方差分析
- Aras innovator: 如何制作一个itemtype的BOM结构
- 经典JavaScript正则表达式实战(转)
- 信息安全 SEED Lab10 Packet Sniffing and Spoofing Lab
- Fermat theorem (stationary points)
- 【Android】JNI调用(完整版)
- android studio编程实例,Android Studio JNI 开发简单案例
- Acquisition-CreateAcqFifo
- 自我管理类书籍推荐,提高自我管理能力就靠这本书了!
- 造车烧钱,服务烧钱,电池自燃,蔚来造车“火中如何取粟”
热门文章
- LTE技术对PTN的影响
- matlab香农编码,用MATLAB编程实现香农编码.doc
- 分布式,嵌入式,集群三种操作系统
- 如何将NEF格式文件转换为JPG格式
- MQTT——EMQX学习笔记03——java创建客户端,实现消息的发布与订阅
- IPX/SPX 协议
- 博士申请 | 美国弗吉尼亚大学张尚彤老师招收强化学习方向全奖博士/硕士/实习生...
- 思科模拟器Cisco Packet Tracer 7.3.0安装配置
- 迅雷下gho文件变成php,window_GhostEXP将Windows新发布的补丁打入GHO文件, Windows每隔一段时间,都会 - phpStudy...
- FlashFXP、LeapFTP、CuteFTP 等FTP软件二进制上传或下载方法