专业网站建设常州网站开发确认函

专业网站建设常州,网站开发确认函,网站整体克隆包含后台,传奇一条龙VUE后台管理中使用富文本编辑器导入word 文档进行编辑 前言 最近因业务需求在项目中嵌入了tinymce这个编辑器#xff0c;用于满足平台给用户编辑各类新闻内容什么的业务需求#xff0c;前后也花了不少时间体验和对比了市面上各类开源编辑器#xff0c;直接将新闻部门的工作…VUE后台管理中使用富文本编辑器导入word 文档进行编辑前言最近因业务需求在项目中嵌入了tinymce这个编辑器用于满足平台给用户编辑各类新闻内容什么的业务需求前后也花了不少时间体验和对比了市面上各类开源编辑器直接将新闻部门的工作从半天工作量提升只要一个小时就可以搞到一两分钟就可以搞定一个任务优点文档好功能强bug少无外部依赖。word文档粘贴进来要带格式兼容移动端word文档粘贴进来要正常显示并且还要兼容移动端电脑网页里粘贴进来内容要正常显示并且排版还不能乱电脑网页拷过来的内容还要兼容到移动端安装cssnpm install tinymce tinymce/tinymce-vue3.2.8 -S下载语言包中文语言包下载开始操作文件将依赖包 node_modules 里找到 tinymce文件夹复制到public 里【左图是tinymce右图是public复制后的目录】一下是注意点很多的博客的写法是将 node_modules 里面的skins文件夹复制到public/tinymce目录下经过尝试是不完善的需要将整个目录倒入进public里不完全导入的错误显示我还以为是语言包的问题一个个语言包版本去试这种展示一半英文一半中文的导入tinymcejspublic/index.html 添加 tinymce.js引入基本文件javascript// 引入组件importtinymcefromtinymce/tinymceimportEditorfromtinymce/tinymce-vue// 引入富文本编辑器主题的js和cssimporttinymce/themes/silver/theme.min.jsimporttinymce/skins/ui/oxide/skin.min.css// 扩展插件importtinymce/plugins/imageimporttinymce/plugins/linkimporttinymce/plugins/codeimporttinymce/plugins/tableimporttinymce/plugins/listsimporttinymce/plugins/wordcount注册组件csscomponents:{Editor},使用组件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){constimgdata: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”}}},整体代码// 引入组件 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) }) } } } ​ .activeConfig { -container { margin: 30px; } } ​特殊需求需要找个能实现word文档上传到富文本编辑器减轻编辑机构的负担解决机构需要每次打开文档复制再编辑的繁琐工作实现直接导入编辑tinymce插件一个下载插件一个是注意点图片在富文本是base64的方式导入插件下载示例https://gitee.com/xproer/wordpaster-vue-tinymce5下载解压后将整个文件复制到public的插件目录再往tinymce配置添加即可editorInit.plugins 和 editorInit.toolbar 添加importword即可vbneteditorInit: {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第二种jsconst 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.length const 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))最终效果