|
@@ -6,146 +6,144 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import Editor from 'wangeditor'
|
|
|
- import 'wangeditor/release/wangEditor.min.css'
|
|
|
- import { uploadImgOnce } from '@/api/data'
|
|
|
- import { oneOf } from '@/utils/util'
|
|
|
+import Editor from 'wangeditor'
|
|
|
+import { oneOf } from '@/utils/util'
|
|
|
+import { uploadFile } from '@/api/data'
|
|
|
+export default {
|
|
|
+ name: 'Editor',
|
|
|
|
|
|
- export default {
|
|
|
- name: 'Editor',
|
|
|
-
|
|
|
- props: {
|
|
|
- value: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- /**
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ /**
|
|
|
* 绑定的值的类型, enum: ['html', 'text']
|
|
|
*/
|
|
|
- valueType: {
|
|
|
- type: String,
|
|
|
- default: 'html',
|
|
|
- validator: (val) => {
|
|
|
- return oneOf(val, ['html', 'text'])
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
+ valueType: {
|
|
|
+ type: String,
|
|
|
+ default: 'html',
|
|
|
+ validator: (val) => {
|
|
|
+ return oneOf(val, ['html', 'text'])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
* @description 设置change事件触发时间间隔
|
|
|
*/
|
|
|
- changeInterval: {
|
|
|
- type: Number,
|
|
|
- default: 200
|
|
|
- },
|
|
|
- /**
|
|
|
+ changeInterval: {
|
|
|
+ type: Number,
|
|
|
+ default: 200
|
|
|
+ },
|
|
|
+ /**
|
|
|
* @description 是否开启本地存储
|
|
|
*/
|
|
|
- cache: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
+ cache: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ editorId () {
|
|
|
+ return `editor${this._uid}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setHtml (val) {
|
|
|
+ this.editor.txt.html(val)
|
|
|
+ },
|
|
|
+ getTxt () {
|
|
|
+ return this.editor.txt.text()
|
|
|
+ },
|
|
|
+ getEdior () {
|
|
|
+ return new Editor(`#${this.editorId}`)
|
|
|
+ },
|
|
|
+ clearText () {
|
|
|
+ this.editor.txt.clear()
|
|
|
},
|
|
|
- computed: {
|
|
|
- editorId () {
|
|
|
- return `editor${this._uid}`
|
|
|
+ randomStr (len) {
|
|
|
+ len = len || 32
|
|
|
+ const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
|
|
|
+ const maxPos = chars.length
|
|
|
+ let pwd = ''
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ pwd += chars.charAt(Math.floor(Math.random() * maxPos))
|
|
|
}
|
|
|
+ return pwd
|
|
|
},
|
|
|
- methods: {
|
|
|
- setHtml (val) {
|
|
|
- this.editor.txt.html(val)
|
|
|
+ createFileName (filename) {
|
|
|
+ const pos = filename.lastIndexOf('.')
|
|
|
+ const suffix = filename.substring(pos)
|
|
|
+ return this.randomStr(20) + suffix
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ const _this = this
|
|
|
+ this.editor = new Editor(`#${this.editorId}`)
|
|
|
+ this.editor.config.zIndex = 100
|
|
|
+ this.editor.config.onchange = (html) => {
|
|
|
+ const text = this.editor.txt.text()
|
|
|
+ if (this.cache) localStorage.editorCache = html
|
|
|
+ this.$emit('input', this.valueType === 'html' ? html : text)
|
|
|
+ this.$emit('on-change', html, text)
|
|
|
+ }
|
|
|
+ this.editor.config.onchangeTimeout = this.changeInterval
|
|
|
+ this.editor.config.uploadImgServer = process.env.VUE_APP_API_BASE_URL + '/upload'
|
|
|
+ this.editor.config.uploadFileName = 'file'
|
|
|
+ this.editor.config.uploadImgMaxLength = 10
|
|
|
+ this.editor.config.uploadImgParams = {
|
|
|
+ savePathType: 'ali'
|
|
|
+ }
|
|
|
+ this.editor.config.uploadImgHooks = {
|
|
|
+ before: function (xhr, editor, files) {
|
|
|
+ console.log(xhr, editor, files)
|
|
|
+ // 图片上传之前触发
|
|
|
+ // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
|
|
|
+
|
|
|
+ // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
|
|
|
+ // return {
|
|
|
+ // prevent: true,
|
|
|
+ // msg: '放弃上传'
|
|
|
+ // }
|
|
|
},
|
|
|
- getTxt () {
|
|
|
- return this.editor.txt.text()
|
|
|
- },
|
|
|
- getEdior () {
|
|
|
- return new Editor(`#${this.editorId}`)
|
|
|
+ success: function (xhr, editor, result) {
|
|
|
+ console.log(xhr, editor, result)
|
|
|
+ // 图片上传并返回结果,图片插入成功之后触发
|
|
|
+ // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
|
|
|
},
|
|
|
- clearText () {
|
|
|
- this.editor.txt.clear()
|
|
|
+ fail: function (xhr, editor, result) {
|
|
|
+ console.log(xhr, editor, result)
|
|
|
+ // 图片上传并返回结果,但图片插入错误时触发
|
|
|
+ // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
|
|
|
},
|
|
|
- randomStr (len) {
|
|
|
- len = len || 32
|
|
|
- let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
|
|
|
- let maxPos = chars.length
|
|
|
- let pwd = ''
|
|
|
- for (let i = 0; i < len; i++) {
|
|
|
- pwd += chars.charAt(Math.floor(Math.random() * maxPos))
|
|
|
- }
|
|
|
- return pwd
|
|
|
+ error: function (xhr, editor) {
|
|
|
+ console.log(xhr, editor)
|
|
|
+ // 图片上传出错时触发
|
|
|
+ // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
|
|
|
},
|
|
|
- createFileName (filename) {
|
|
|
- let pos = filename.lastIndexOf('.')
|
|
|
- let suffix = filename.substring(pos)
|
|
|
- return this.randomStr(20) + suffix
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- let _this = this
|
|
|
- this.editor = new Editor(`#${this.editorId}`)
|
|
|
- this.editor.customConfig.zIndex = 100
|
|
|
- this.editor.customConfig.onchange = (html) => {
|
|
|
- let text = this.editor.txt.text()
|
|
|
- if (this.cache) localStorage.editorCache = html
|
|
|
- this.$emit('input', this.valueType === 'html' ? html : text)
|
|
|
- this.$emit('on-change', html, text)
|
|
|
- }
|
|
|
- this.editor.customConfig.onchangeTimeout = this.changeInterval
|
|
|
- this.editor.customConfig.uploadImgServer = process.env.VUE_APP_API_BASE_URL + '/upload'
|
|
|
- this.editor.customConfig.uploadFileName = 'file'
|
|
|
- this.editor.customConfig.uploadImgParams = {
|
|
|
- savePathType: 'ali'
|
|
|
+ timeout: function (xhr, editor) {
|
|
|
+ // 图片上传超时时触发
|
|
|
+ // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
|
|
|
+ },
|
|
|
+ // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
|
|
|
+ // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
|
|
|
+ customInsert: function (insertImg, result, editor) {
|
|
|
+ // console.log(insertImg, result, editor)
|
|
|
+ // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
|
|
|
+ // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
|
|
|
+ // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
|
|
|
+ insertImg(result.data)
|
|
|
+ // result 必须是一个 JSON 格式字符串!!!否则报错
|
|
|
}
|
|
|
- this.editor.customConfig.uploadImgHooks = {
|
|
|
- before: function (xhr, editor, files) {
|
|
|
- console.log(xhr, editor, files)
|
|
|
- // 图片上传之前触发
|
|
|
- // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
|
|
|
-
|
|
|
- // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
|
|
|
- // return {
|
|
|
- // prevent: true,
|
|
|
- // msg: '放弃上传'
|
|
|
- // }
|
|
|
- },
|
|
|
- success: function (xhr, editor, result) {
|
|
|
- console.log(xhr, editor, result)
|
|
|
- // 图片上传并返回结果,图片插入成功之后触发
|
|
|
- // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
|
|
|
- },
|
|
|
- fail: function (xhr, editor, result) {
|
|
|
- console.log(xhr, editor, result)
|
|
|
- // 图片上传并返回结果,但图片插入错误时触发
|
|
|
- // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
|
|
|
- },
|
|
|
- error: function (xhr, editor) {
|
|
|
- console.log(xhr, editor)
|
|
|
- // 图片上传出错时触发
|
|
|
- // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
|
|
|
- },
|
|
|
- timeout: function (xhr, editor) {
|
|
|
- // 图片上传超时时触发
|
|
|
- // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
|
|
|
- },
|
|
|
- // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
|
|
|
- // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
|
|
|
- customInsert: function (insertImg, result, editor) {
|
|
|
- // console.log(insertImg, result, editor)
|
|
|
- // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
|
|
|
- // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
|
|
|
- // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
|
|
|
- insertImg(result.data)
|
|
|
- // result 必须是一个 JSON 格式字符串!!!否则报错
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // create这个方法一定要在所有配置项之后调用
|
|
|
- this.editor.create()
|
|
|
- this.editor.txt.clear()
|
|
|
- // 如果本地有存储加载本地存储内容
|
|
|
- let html = this.value || localStorage.editorCache
|
|
|
- if (html) this.editor.txt.html(html)
|
|
|
}
|
|
|
+ // create这个方法一定要在所有配置项之后调用
|
|
|
+ this.editor.create()
|
|
|
+ this.editor.txt.clear()
|
|
|
+ // 如果本地有存储加载本地存储内容
|
|
|
+ const html = this.value || localStorage.editorCache
|
|
|
+ if (html) this.editor.txt.html(html)
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|