增加 on-error 方法以及说明,修复导入普通文本文件失败的BUG,

This commit is contained in:
FungLeo 2020-05-08 11:15:31 +08:00
parent 220d760d7b
commit 01053791a0
3 changed files with 20 additions and 5 deletions

View File

@ -6,6 +6,7 @@
@on-copy="onCopy"
@on-upload-image="onUpladImage"
@on-save="onSave"
@on-error="onError"
:height="500"
/>
</div>
@ -38,6 +39,9 @@
},
onSave(data) {
console.log(data);
},
onError(err) {
console.log(err)
}
}
}

View File

@ -61,7 +61,7 @@ import { MarkdownPreview } from 'vue-meditor'
```js
import Markdown from '@/components/markdown/...';
```
专业版
专业版
```js
import MarkdownPro from '@/components/markdown/pro';
```
@ -80,7 +80,7 @@ import MarkdownPreview from '@/components/markdown/preview';
<script>
import Markdown from 'vue-meditor';
export default {
name: "markdown",
components: {
@ -253,13 +253,22 @@ marked配置项,与编辑器内该配置一致。
编辑器保存事件,自动保存或者手动保存时触发,支持`ctrl+s`或`command+s`触发保存,返回值类型为`Object`,包含当前输入值`value`和选择的代码块主题`theme`。
#### on-paste-image
#### on-paste-image
监听编辑器粘贴图片事件,在编辑区域内手动粘贴图片时触发,可用于支持粘贴插入图片文件,返回`file`文件,上传文件后可结合`on-ready`事件内返回的`insertContent`插入图片。
#### on-copy
#### on-copy
复制代码块内容触发时返回当前代码块的textcopyCode开启时才有效。
#### on-error
返回编辑器组件遇到的错误信息,交给业务代码进行错误处理。
code | message | 备注
--- | --- | ---
415 | Only text files can be imported | 导入文件仅支持文本格式
目前只有这一个错误信息。二次开发时,可根据自己的需要,在不同的地方返回不同的错误码以及错误信息。
## 二次开发
### 粘贴插入图片

View File

@ -130,7 +130,8 @@ export default {
return;
}
const {type} = file;
if (!['text/markdown', 'text/src'].includes(type)) {
if (!(type === '' || /text\/\w+/.test(type))) {
this.$emit('on-error', { code: 415, message: 'Only text files can be imported' })
return;
}
const reader = new FileReader();
@ -139,6 +140,7 @@ export default {
});
reader.onload = () => {
this.currentValue = reader.result;
console.log(typeof reader.result)
e.target.value = '';
if (this.pro) {// 专业版手动set value
this.editor.setOption('value', this.currentValue);