refactor(editor-md): demo优化

Author: GreatZPP

packages/devui-vue/docs/components/editor-md/index.md

@@ -15,7 +15,7 @@ import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
  setup() {
- const content = ref('`Not use ngModel` aaa');
+ const content = ref('# This is the title');
  const mdRules = reactive({
  linkify: {
  fuzzyLink: false,
@@ -127,7 +127,7 @@ import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
  setup() {
- const content = ref('`Not use ngModel` aaa');
+ const content = ref('# This is the title');
  const mdRules = reactive({
  linkify: {
  fuzzyLink: false,
@@ -158,30 +158,25 @@ export default defineComponent({
 
 ### 配置图片文件上传
 
-:::demo 设置imageUploadToServer后，编辑器对粘贴操作也将进行监听，若有图片也将触发imageUpload事件。
+:::demo 设置 imageUploadToServer 后，编辑器对粘贴操作也将进行监听，若有图片也将触发 imageUpload 事件。
 
 ```vue
 <template>
- <d-editor-md
- v-model="content"
- :image-upload-to-server="true"
- @content-change="valueChange"
- @image-upload="imageUpload"
- ></d-editor-md>
+ <d-editor-md v-model="content" :image-upload-to-server="true" @content-change="valueChange" @image-upload="imageUpload"></d-editor-md>
 </template>
 
 <script>
 import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
  setup() {
- const content = ref('`Not use ngModel`');
+ const content = ref('# This is the title');
 
  const valueChange = (val) => {
  console.log(val);
  };
 
- const imageUpload = ({file, callback}) => {
+ const imageUpload = ({ file, callback }) => {
  let message;
  const rFilter = /^(image\/bmp|image\/gif|image\/jpge|image\/jpeg|image\/jpg|image\/png|image\/tiff)$/i;
  if (!rFilter.test(file.type)) {
@@ -200,10 +195,14 @@ export default defineComponent({
  xhr.open('POST', 'https://xxx.xxx.com/v1/xxx');
  xhr.setRequestHeader('yourKey', 'yourValue');
 
- xhr.addEventListener('load', (evt) => {
- const result = JSON.parse(xhr.responseText);
- resolve(result);
- }, false);
+ xhr.addEventListener(
+ 'load',
+ (evt) => {
+ const result = JSON.parse(xhr.responseText);
+ resolve(result);
+ },
+ false
+ );
 
  const fd = new FormData();
  fd.append('file', file);
@@ -216,7 +215,7 @@ export default defineComponent({
  }
  });
  }
- }
+ };
 
  return { content, valueChange, imageUpload };
  },
@@ -228,28 +227,29 @@ export default defineComponent({
 
 ### EditorMd 参数
 
-| 参数名 | 类型 | 默认值 | 说明 |
-| :-------------------- | :---------------------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------- |
-| v-model | `string` | '' | 编辑器内容双向绑定 |
-| options | `object` | {} | 编辑器初始化时，自定义配置，可参考[CodeMirror Options](https://codemirror.net/doc/manual.html#config) |
-| base-url | `string` | -- | 设置渲染到 html 时，为相对 url 添加的 baseUrl |
-| custom-parse | `(html: string) => string` | -- | 自定义对渲染后的 html 处理，需要接收渲染后的 html，返回自定义处理后的 html |
-| md-rules | `object` | {} | 设置 markdown 对字符串的处理方式， 可参考[markdown-it](https://www.npmjs.com/package/markdown-it?activeTab=readme) |
-| mode | `'editonly' \| 'readonly' \| 'normal'` | 'normal' | 只写/只读/双栏显示模式选择，默认 'normal' 双栏模式显示 |
-| custom-renderer-rules | [ICustomRenderRule[]](#icustomrenderrule) | [] | 自定义 markdown 对节点的渲染方式，每条规则需要指定对应节点 key,并自定义渲染函数 |
-| custom-xss-rules | [ICustomXssRule[]](#icustomxssrule) | [] | 自定义 xss 对某种 tag 的过滤方式，每条规则需要指定 tag, 并给出需要加入白名单的属性数组 |
-| placeholder | `string` | '' | 编辑器无内容是的提示信息 |
-| fullscreen-z-index | `number` | 10 | 编辑器全屏状态的 z-index |
-| image-upload-to-server| `boolean` | false | 是否打开图片自定义上传开关（打开后将将监听图片的复制，toolbar图片功能上传，传出事件回调） |
+| 参数名  | 类型 | 默认值 | 说明 |
+| :--------------------- | :---------------------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------- |
+| v-model  | `string` | '' | 编辑器内容双向绑定 |
+| options  | `object` | {} | 编辑器初始化时，自定义配置，可参考[CodeMirror Options](https://codemirror.net/doc/manual.html#config) |
+| base-url  | `string` | -- | 设置渲染到 html 时，为相对 url 添加的 baseUrl |
+| custom-parse  | `(html: string) => string` | -- | 自定义对渲染后的 html 处理，需要接收渲染后的 html，返回自定义处理后的 html |
+| md-rules  | `object` | {} | 设置 markdown 对字符串的处理方式， 可参考[markdown-it](https://www.npmjs.com/package/markdown-it?activeTab=readme) |
+| mode  | `'editonly' \| 'readonly' \| 'normal'` | 'normal' | 只写/只读/双栏显示模式选择，默认 'normal' 双栏模式显示 |
+| custom-renderer-rules  | [ICustomRenderRule[]](#icustomrenderrule) | [] | 自定义 markdown 对节点的渲染方式，每条规则需要指定对应节点 key,并自定义渲染函数 |
+| custom-xss-rules  | [ICustomXssRule[]](#icustomxssrule) | [] | 自定义 xss 对某种 tag 的过滤方式，每条规则需要指定 tag, 并给出需要加入白名单的属性数组 |
+| placeholder  | `string` | '' | 编辑器无内容是的提示信息 |
+| fullscreen-z-index  | `number` | 10 | 编辑器全屏状态的 z-index |
+| image-upload-to-server | `boolean` | false | 是否打开图片自定义上传开关（打开后将将监听图片的复制，toolbar 图片功能上传，传出事件回调）  |
 
 ### EditorMd 事件
 
-| 事件名 | 回调参数 | 说明 | 跳转 Demo |
-| :--------------------- | :--------------------------- | :------------------------------- | :-------- |
-| after-editor-init | `Function(instance: object)` | 编辑器初始化事件，返回编辑器对象 | |
-| content-change | `Function(content: string)` | 编辑器内容改变事件，返回当前内容 | |
-| preview-content-change | `Function()` | 预览内容改变时触发 | |
-| image-upload | `Function({file, callback})` | 打开图片上传开关后，图片上传事件回调，返回文件内容与callback函数 | |
+| 事件名 | 回调参数 | 说明 | 跳转 Demo |
+| :--------------------- | :--------------------------- | :----------------------------------------------------------------- | :-------- |
+| after-editor-init | `Function(instance: object)` | 编辑器初始化事件，返回编辑器对象 | |
+| content-change | `Function(content: string)` | 编辑器内容改变事件，返回当前内容 | |
+| preview-content-change | `Function()` | 预览内容改变时触发 | |
+| image-upload | `Function({file, callback})` | 打开图片上传开关后，图片上传事件回调，返回文件内容与 callback 函数 | |
+
 ### MdRender 参数
 
 | 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |