| | |
| | | mounted() { |
| | | self = this |
| | | this.editor = new E(this.$refs.editorElem) |
| | | this.editor.customConfig.focus = false |
| | | this.editor.customConfig.onchange = (html) => { |
| | | this.editor.config.focus = false |
| | | this.editor.config.onchange = (html) => { |
| | | this.editorContent = html |
| | | this.catchdata(this.editorContent) // 把这个html通过catchData的方法传入父组件 |
| | | } |
| | | // 去掉插入网络图片 |
| | | this.editor.customConfig.showLinkImg = false |
| | | this.editor.config.showLinkImg = false |
| | | // 粘贴来的内容过滤图片 |
| | | this.editor.customConfig.pasteIgnoreImg = true |
| | | this.editor.customConfig.menus = [ // 菜单配置 |
| | | this.editor.config.pasteIgnoreImg = true |
| | | this.editor.config.menus = [ // 菜单配置 |
| | | 'head', // 标题 |
| | | 'bold', // 粗体 |
| | | 'fontSize', // 字号 |
| | |
| | | 'quote', // 引用 |
| | | // 'emoticon', // 表情 |
| | | 'image', // 插入图片 |
| | | 'video', // 插入视频 |
| | | // 'table', // 表格 |
| | | // 'code', // 插入代码 |
| | | 'code', // 插入代码 |
| | | 'video', |
| | | 'undo', // 撤销 |
| | | 'redo' // 重复 |
| | | ] |
| | | // 下面是最重要的的方法 |
| | | // this.editor.customConfig.withCredentials = true |
| | | // this.editor.config.withCredentials = true |
| | | // 将图片大小限制为 5M |
| | | this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024 |
| | | this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024 |
| | | // 限制一次最多上传 1 张图片 |
| | | this.editor.customConfig.uploadImgMaxLength = 1 |
| | | this.editor.config.uploadImgMaxLength = 1 |
| | | // 不忽略粘贴内容中的图片 |
| | | this.editor.customConfig.pasteIgnoreImg = false |
| | | this.editor.customConfig.customUploadImg = function(files, insert) { |
| | | this.editor.config.pasteIgnoreImg = false |
| | | this.editor.config.customUploadImg = function(files, insert) { |
| | | // files 是 input 中选中的文件列表 |
| | | // insert 是获取图片 url 后,插入到编辑器的方法 |
| | | // 因为file是个FormData格式的对象所以可以直接通过接口开始上传,不需要做多余操作 |
| | | // 虽然文档说是FormData格式,但是我实际使用需要以下操作 |
| | | const formData = new FormData() |
| | | formData.append('file', files[0]) |
| | | console.log(formData, 'formDataformDataformDataformDataformData') |
| | | self.postFN( |
| | | { |
| | | url: 'admin/image/upload?folderCode=IMG', |
| | |
| | | } |
| | | ) |
| | | } |
| | | |
| | | // 配置富文本视频上传 |
| | | this.editor.config.customUploadVideo = function(files, insert) { |
| | | // files 是 input 中选中的文件列表 |
| | | // insert 是获取视频 url 后,插入到编辑器的方法 |
| | | const formDataVideo = new FormData() |
| | | formDataVideo.append('file', files[0]) |
| | | console.log(formDataVideo, 'formDataVideoformDataVideoformDataVideoformDataVideo') |
| | | self.postFN( |
| | | { |
| | | url: 'admin/image/upload?folderCode=VIDEO', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formDataVideo, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'xxxx' |
| | | } |
| | | } |
| | | }, |
| | | inf => { |
| | | // 上传视频,返回结果,将视频地址插入到编辑器中 |
| | | insert(inf.imgUrl) |
| | | console.log(inf.imgUrl, '99999999999999999999999999') |
| | | } |
| | | ) |
| | | } |
| | | |
| | | // 自定义错误提示 |
| | | this.editor.customConfig.customAlert = function(info) { |
| | | this.editor.config.customAlert = function(info) { |
| | | // info 是需要提示的内容 |
| | | self.$messagewarn(info) |
| | | self.$messageWarn(info) |
| | | } |
| | | // 过滤word复制 |
| | | this.editor.config.pasteTextHandle = function(content) { |
| | | var html = content |
| | | html = html.replace(/<\/?SPANYES[^>]*>/gi, '')// 移除span |
| | | html = html.replace(/<\!\-\-(.|[\r\n])*?\-\->/gi, '')// 移除注释 |
| | | html = html.replace(/<(\w[^>]*) {2}lang=([^|>]*)([^>]*)/gi, '<$1$3')// 移除lang属性 |
| | | html = html.replace(/<\\?\?xml[^>]*>/gi, '')// 移除xml和相关描述 |
| | | html = html.replace(/<\/?\w+:[^>]*>/gi, '')// 移除xml命名空间的标签 |
| | | html = html.replace(/ /gi, '')// 移除空格 |
| | | html = html.replace(/^\s+|\s+$/g, '') |
| | | html = html.replace(/<o:p> <\/o:p>/g, '')// 移除标签 |
| | | html = html.replace(/<br\/>/g, '')// 移除br标签 |
| | | return html |
| | | } |
| | | this.editor.create() // 创建富文本实例 |
| | | // if (!this.content) { |