哪里可以免费做网站,零下一度网站建设,网站开发缓存,如何进行账号推广最近用vueelement-ui开发一套后台管理系统#xff0c;其中项目中需要用到富文本编辑器#xff0c;这里总结下开发过程中遇到的坑和使用方法。刚开始用的是vue-quill-editor结合element-ui上传图片到服务器#xff0c;name问题来了 按照官方文档上面的方式。下面是我的代码cl…最近用vueelement-ui开发一套后台管理系统其中项目中需要用到富文本编辑器这里总结下开发过程中遇到的坑和使用方法。刚开始用的是vue-quill-editor结合element-ui上传图片到服务器name问题来了 按照官方文档上面的方式。下面是我的代码classavatar-uploader:actionserverUrlnameimg:headersheader:show-file-listfalse:on-successuploadSuccess:on-erroruploadError:before-uploadbeforeUploadv-modeldetailContentrefmyQuillEditor:optionseditorOptionchangeonEditorChange($event)readyonEditorReady($event)export default {data() {return {quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画刚开始是false,不显示serverUrl: , // 这里写你要上传的图片服务器地址header: {token: sessionStorage.token}, // 有的图片服务器要求请求头需要有token之类的参数写在这里detailContent: , // 富文本内容editorOption: {} // 富文本编辑器配置}},methods: {// 上传图片前beforeUpload(res, file) {},// 上传图片成功uploadSuccess(res, file) {},// 上传图片失败uploadError(res, file) {}}}那么我们需要怎样将富文本图片上传这个按钮跟自定义的文件上传做绑定呢。很简单我们需要在editorOption配置中这么写export default {data() {return {quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画刚开始是false,不显示serverUrl: , // 这里写你要上传的图片服务器地址header: {token: sessionStorage.token}, // 有的图片服务器要求请求头需要有token之类的参数写在这里detailContent: , // 富文本内容editorOption: {placeholder: ,theme: snow, // or bubblemodules: {toolbar: {container: toolbarOptions, // 工具栏handlers: {image: function (value) {if (value) {document.querySelector(#quill-upload input).click()} else {this.quill.format(image, false);}}}}}}}}}但是这里问题就出现了当你用element-ui upload方法上传时你会发现上传不成功emmmm~你会发现上传时Request Method 方式为OPTIONS这跟平时的提交方式不一样,Status Code等于204,,去网上又查阅了下发现这种请求方式但是最终还是没有解决掉好像是需要后端也要相应的改下东西所以走到这里只能用另外一种方式去实现相同的功能了————Ueditor第一步先按照官方的提示 去官网下载相应的代码我这里后端语言是PHP所以我下的是PHP的版本根据需求去下载第二步ueditor里除了php文件都放到static文件这是我的目录结构第三步将PHP文件放到后端去我这边项目是我直接放到ftp上面去的结构如下第四步我这边封装成了一个公共组件因为有很多页面需要用到//import AppConfig from /configimport ../../../static/ueditor/ueditor.config.jsimport ../../../static/ueditor/ueditor.all.jsimport ../../../static/ueditor/lang/zh-cn/zh-cn.jsexport default {name: UEditor,props: {id: {type: String},config: {type: Object},defaultMsg: {type: String},},created() {//this.$emit(defaultMsgVlaue, this.names)},data() {return {editor: null,names: }},mounted() {//初始化UEconst _this this;this.initEditor()//this.editor UE.getEditor(this.id, this.config);// this.editor.addListener(ready, () {// this.editor.setContent(_this.defaultMsg);// });},destoryed() {this.editor.destory();},methods: {getUEContent: function() {return this.editor.getContent();},initEditor() {let _this this;this.editor UE.getEditor(editor, this.config)//编辑器准备就绪后会触发该事件this.editor.addListener(ready,(){//设置可以编辑this.editor.setEnabled();this.editor.setContent(_this.defaultMsg);})//编辑器内容修改时this.selectionchange()},//编辑器内容修改时selectionchange() {this.editor.addListener(selectionchange, () {//this.content this.ue.getContent()})}},activated() {//初始化编辑器this.initEditor()}}页面调用如下打开窗口获取内容import {UEditor} from ./ueditor/index.jsexport default{name: hello,components: {UEditor},data(){return {config: {/*//可以在此处定义工具栏的内容toolbars: [[fullscreen, source,|, undo, redo,|,bold, italic, underline, fontborder, strikethrough,|,superscript,subscript,|, forecolor, backcolor,|, removeformat,|, insertorderedlist, insertunorderedlist,|,selectall, cleardoc,fontfamily,fontsize,justifyleft,justifyright,justifycenter,justifyjustify,|,link,unlink]],*/autoHeightEnabled: false,autoFloatEnabled: true, //是否工具栏可浮动initialContent:请输入内容, //初始化编辑器的内容,也可以通过textarea/script给值看官网例子autoClearinitialContent:true, //是否自动清除编辑器初始内容注意如果focus属性设置为true,这个也为真那么编辑器一上来就会触发导致初始化的内容看不到了initialFrameWidth: null,initialFrameHeight: 450,BaseUrl: ,UEDITOR_HOME_URL: static/ueditor/},addFormVisible: false}},methods: {openWindow: function(){this.addFormVisible true;},//获取文档内容getContent: function(){let content this.$refs.ueditor.getUEContent();console.log(content);alert(content);}}}注意在这里封装成一个公共组件了但是在使用的过程中会发现在同一页面回显数据到ueditor时只会渲染一次这可怎么办呢这里想到了用watch来监听然后再将数据放到ueditor里这里我用的参数名是defaultMsg代码如下watch: {defaultMsg: {handler(newValue, oldValue) {//父组件param对象改变会触发此函数this.editor.setContent(newValue);},deep: true}}这样的话再同一个页面回显ueditor时就会实时改变做到这里我想着试下在其他页面是否可以因为有多个路由页面需要用到ueditor当我在其他页面打开ueditor时发现ueditor加载不出来了然后我就纳闷了然后排查了很多问题之后终于知道是因为每次只初始化了ueditor但是在关闭页面时没有将其销毁所以需要在上面封装的公共组件里去销毁下destroyed() {//销毁编辑器实例使用textarea代替this.editor.destroy()//重置编辑器可用来做多个tab使用同一个编辑器实例//如果要使用同一个实例,请注释destroy()方法// this.ue.reset()}这样的话就解决了在多个路由页面的时候ueditor不现实的问题。第五步配置文件上传和回显我们需要在上传图片并且让上传的图片回显到ueditor里首先先将文件ueditor/ueditor.config.js里的serverUrl换成自己项目的服务器路径这里配置之后就可以直接使用了遇到的其他问题如下前端代码必须跟PHP文件放在同一个域名上我之前是将两块代码分别放到不同FTP上这样导致ueditor里文件可以上传但是提示上传失败这样上传的图片没法回显有些还是不清楚的或者有其他更好实现效果的方法的伙伴可以跟我留言欢迎共同进步
