Vditor编辑器配置文件详解

vditor编辑器配置文件

editor = new Vditor('vditor', {
            cdn: '',
            mode: 'ir',
            "counter": {
                "enable": true
            },
            cache: {
                enable: false,
            },
            after() {
                if (id) {
                    $this.id = id
                    get(id).then(res => {
                        if (res.code * 1 === 1) {
                            $this.payload = Object.assign({}, $this.payload ,res.data)
                            editor.setValue(res.data.content, true)
                        }
                    })
                }
    
            },
            upload: {
                accept: 'image/*,.mp3, .wav, .rar',
                token: token,
                url: uploadFilePath,
                linkToImgUrl: uploadFilePathByUrl,
                headers: { 'Fed-Token': token },
                filename(name) {
                    return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
                        replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
                        replace('/\\s/g', '')
                },
                linkToImgFormat(responseText) {
                    let imageResult = JSON.parse(responseText);
                    if (imageResult.code * 1 === 1) {
                        imageResult = imageResult.data
                        // console.info('upload')
                        const errorEl = editor.vditor.ir.element.querySelector(`img[src="${imageResult.originalURL}"]`).previousElementSibling.previousElementSibling
                        if (errorEl.className.indexOf('vditor-ir__marker--title') > -1) {
                            const previousSibling = errorEl.previousSibling
                            if (previousSibling.nodeType === 3) {
                                errorEl.parentNode.removeChild(previousSibling)
                            }
                            errorEl.parentNode.removeChild(errorEl)
                        }
                        if (imageResult.originalURL === imageResult.url) {
                            // TODO 同一域名下不在进行替换操作
                            return '{"msg": "","code": -1,"data" : {"originalURL": "","url": ""}}';
                        } else {
                            return '{"msg": "","code": 0,"data" : {"originalURL": "' + imageResult.originalURL + '","url": "' + imageResult.url + '"}}';
                        }
                    } else {
                        return '{"msg": "上传失败","code": -1,"data" : {"originalURL": "","url": ""}}';
                    }
                },
                format(files, responseText) {
                    let imageResult = JSON.parse(responseText)
                    if (imageResult.code * 1 === 1) {
                        return '{"msg": "","code": 0,"data": {"errFiles": [],"succMap": {"' + files[0].name + '": "' + imageResult.data + '"}}}';
                    } else {
                        return '{"msg": "上传失败","code": -1,"data": {"errFiles": [],"succMap": {}}}';
                    }
                },
            },
        })

解释：

• _lutePath： 指定lute.min.js的路径，这是Vditor所依赖的一个库，用于将Markdown转换为HTML。
• cdn： 指定Vditor的CDN路径，用于加载Vditor的资源。
• mode： 指定编辑器的模式，有两种模式可选：ir 和 md，ir 是所见即所得模式，md 是Markdown模式。
• "counter": { "enable": true }： 启用字数统计功能。
• cache： 禁用缓存功能。
• after()： 在Vditor初始化后执行的回调函数，用于加载文章内容。
• upload： 上传配置，包括：
  • accept： 允许上传的文件类型。
  • token： 上传文件的凭证。
  • url： 上传文件的URL。
  • linkToImgUrl： 将上传的文件URL转换为图片URL。
  • headers： 上传文件的请求头。
  • filename(name)： 上传文件的名称，支持自定义名称。
  • linkToImgFormat(responseText)： 将上传文件的响应结果转换为Vditor支持的格式。
  • format(files, responseText)： 将上传文件的响应结果转换为Vditor支持的格式。