123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <template>
- <div class="editor-wrapper">
- <div :id="editorId"></div>
- </div>
- </template>
- <script>
- import Editor from 'wangeditor'
- import 'wangeditor/release/wangEditor.min.css'
- import { uploadImgOnce } from '@/api/data'
- import { oneOf } from '@/utils/util'
- export default {
- name: 'Editor',
- props: {
- value: {
- type: String,
- default: ''
- },
- /**
- * 绑定的值的类型, enum: ['html', 'text']
- */
- valueType: {
- type: String,
- default: 'html',
- validator: (val) => {
- return oneOf(val, ['html', 'text'])
- }
- },
- /**
- * @description 设置change事件触发时间间隔
- */
- changeInterval: {
- type: Number,
- default: 200
- },
- /**
- * @description 是否开启本地存储
- */
- 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()
- },
- 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
- },
- 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: 'web'
- }
- 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)
- }
- }
- </script>
- <style lang="less">
- /*.editor-wrapper *{*/
- /* z-index: 100 !important;*/
- /*}*/
- </style>
|