汕头模板开发建站电商网站制作项目描述

汕头模板开发建站,电商网站制作项目描述,网站开发流程及详解,北京 网站制作关于Vue内使用tinymce图片上传粘贴相关问题 最近因为工作需要#xff0c;用到了富文本编辑器让用户填写反馈#xff0c;上传图片等功能#xff0c;经过一些对比选择了tinymce,记录下图片相关问题。 完整版封装的组件代码#xff0c;放到最后。 环境 vue2.x tinymce 5.10…关于Vue内使用tinymce图片上传粘贴相关问题最近因为工作需要用到了富文本编辑器让用户填写反馈上传图片等功能经过一些对比选择了tinymce,记录下图片相关问题。完整版封装的组件代码放到最后。环境vue2.xtinymce 5.10.3tinymce-vue 2.1.0这里由于开发环境是vue2,所以目前这个时间点需要选择版本的去安装引用官方文档的一句话Version 4 of the tinymce-vue package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use tinymce-vue version 3.图片上传这个比较简单在init的配置中配置images_upload_handler...data(){init{images_upload_handlerthis.handleImageUpload}},methods:{handleImageUpload(blobInfo,success,failure){// 将图片上传到服务器.let formdatanewFormData()formdata.append(file,blobInfo.blob(),blobInfo.filename())this.uploadImage(formdata).then(success).catch(failure)},uploadImage(formdata){returnnewPromise((resolve,reject){Axios({url:https://xxxx.xx.com/xxx/xxx,method:post,data:formdata,headers:{Content-Type:multipart/form-data}}).then(result{console.log(result)if(result.status!200||result.data.code!200){constmsg上传失败reject(msg)}else{resolve(result.data.data)}})})}}图片粘贴刚开始是想到的直接监听document的paste事件去获取剪切板的图片代码如下// 代码引用至张鑫旭的个人网站文章// https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/document.addEventListener(paste,function(event){varitemsevent.clipboardDataevent.clipboardData.items;varfilenull;if(itemsitems.length){// 检索剪切板itemsfor(vari0;iitems.length;i){if(items[i].type.indexOf(image)!-1){fileitems[i].getAsFile();break;}}}// 此时file就是剪切板中的图片文件});后来发现不生效检查一下元素得知tinymce是通过iframe使用的所以在tinymce输入框内paste事件无法触发后来找到了init_instance_callback配置项返回的实例可以监听粘贴事件init{init_instance_callback:editor{editor.on(paste,e{})}}粘贴监听算是解决了接下来要处理的是粘贴后如何如何替换图片。因为默认粘贴进去的图片是以base64存在的这样直接存进数据库不好所以需要将base64替换。刚开始想到的是将base64删除然后替换新的img标签进去这样存在一个问题就是如果上传图片的网络慢用户多次粘贴或者输入文字图片的位置就会错位.最后这里选择了在用户一粘贴拿到base64,上传成功后替换即可。代码如下methods:{listenImgPaste(event){returnnewPromise(resolve{constitemsevent.clipboardDataevent.clipboardData.itemsletfilenullif(itemsitems.length){for(leti0;iitems.length;i){if(items[i].type.indexOf(image)!-1){fileitems[i].getAsFile()break}}}if(file){setTimeout((){// 获取当前图片的base64constbase64this.myValue.match(/srcdata:image.*?/g)letformdatanewFormData()formdata.append(file,file)this.uploadImage(formdata).then(url{// 成功后将base64替换this.myValuethis.myValue.replace(base64,src${url})resolve()})})}})},}成功实现。最后一个问题替换修改值以后tinymce会默认将光标定位到最前面体验不是很好最后的解决方法也是加配置init:{init_instance_callback:editor{// 初始化后移动光标到最后this.moveCursorToLast(editor)console.log(editor)editor.on(paste,asyncevent{awaitthis.listenImgPaste(event)this.moveCursorToLast(editor)})}}methods:{// 移动光标到最后moveCursorToLast(editor){editor.selection.select(editor.getBody(),true)editor.selection.collapse(false)}}最后的完整组件代码// word导入插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:导入Word文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());// word粘贴插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一键粘贴,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());// ppt导入插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:导入PowerPoint文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());// pdf导入插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:导入pdf文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());// 网络图片上传插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:网络图片一键上传,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());// excel导入插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:导入Excel文档,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());// word转图片插件(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word转图片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());引用import tinymce from ../../../common/tinymce export default { name: createFeedback, components: { tinymce }, data () { return { form: { des: } } }下载插件下载插件