-
如何进行图片粘贴上传?
2021-03-22 10:04前端这样写:
initVditor() { const that = this const options = { cache: { enable: true, }, mode: 'ir', height: this.height, // 编辑器总高度 theme: 'dark', // 编辑器主题 preview: { delay: 100, show: !this.isMobile, theme: { current: 'dark' // 内容主题 }, hljs: { enable: true, // 代码高亮 style: 'vim', lineNumber: true }, outline: { // 显示大纲 enable: true }, // markdown: { // toc: true // 展示目录 // } }, toolbarConfig: { pin: false, // 是否固定工具栏 }, after: () => { if (this.content) { this.vditor.setValue(this.content) } }, upload: { url: process.env.WEB_API + '/file/upload', max: 5 * 1024 * 1024, linkToImgUrl: process.env.WEB_API + '/file/upload', handler(files) { let formData = new FormData() for (let i = 0; i < files.length; i++) { formData.append('file', files[i]) } let request = new XMLHttpRequest() // 图片上传路径 request.open('POST', process.env.WEB_API + '/file/upload') request.onload = that.onloadCallback request.send(formData) } } } this.vditor = new Vditor('vditor', options) return this.vditor }, onloadCallback(oEvent) { const currentTarget = oEvent.currentTarget console.log("返回的结果", currentTarget) if (currentTarget.status !== 200) { return this.$message({ type: 'error', message: currentTarget.status + ' ' + currentTarget.statusText }) } let resp = JSON.parse(currentTarget.response) let imgMdStr = '' if (resp.Code === Code.SUCCESS) { imgMdStr = `![${'img'}](${resp.Data.ImgUrl})` } else { return this.$message({ type: 'error', message: resp.Msg }) } this.vditor.insertValue(imgMdStr) },
后端接接收到图片后可以保存到本地或上传到云存储,然后返回图片的 URL
-
Vditor 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式
2021-03-21 23:24在 after 里调用:
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
this.vditor.vditor.toolbar.elements.preview.firstElementChild.dispatchEvent(evt);
-
如何加载的时候就是预览模式
2021-03-21 22:30在 after 调用,有效果:
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
this.vditor.vditor.toolbar.elements.preview.firstElementChild.dispatchEvent(evt); -
如何加载的时候就是预览模式
2021-03-21 17:38试过了多种方式,都没有用 ~
方式 1:
evt.initEvent('click',true,true);
console.log(this.vditor.vditor.toolbar.elements.preview.firstElementChild)
this.vditor.vditor.toolbar.elements.preview.firstElementChild.dispatchEvent(evt);方式 2:
document.querySelector(".vditor-preview").style.display = "block"
document.querySelector(".vditor-wysiwyg").style.display = "none"