From 00a3534c6741abb00ed55c26cabaa068ac3df5cd Mon Sep 17 00:00:00 2001
From: wangsongc <wangsongc@foxmail.com>
Date: Thu, 16 Dec 2021 19:19:58 +0800
Subject: [PATCH] doc: update maekdown.md

---
 doc/cn/markdown.md      | 41 ++++++-----------------------------------
 doc/en/markdown.md      | 39 +++++----------------------------------
 src/dev/demo.vue        |  6 +++++-
 src/dev/markdown-it.vue | 36 ++++++++++++++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 70 deletions(-)
 create mode 100644 src/dev/markdown-it.vue

diff --git a/doc/cn/markdown.md b/doc/cn/markdown.md
index bb7e09939..5674ddba3 100644
--- a/doc/cn/markdown.md
+++ b/doc/cn/markdown.md
@@ -4,23 +4,23 @@
 
 #### 方法1 通过全局引入的mavonEditor获取
 ```javascript
-  import mavonEditor from 'mavon-editor'
-  Vue.use(mavonEditor)
+  import MavonEditor from 'mavon-editor'
+  Vue.use(MavonEditor)
   ...
-  mavonEditor.markdownIt
+  const markdownIt = MavonEditor.mavonEditor.getMarkdownIt()
 ```
 
 #### 方法2 通过局部引入的mavonEditor获取
 ```javascript
-  import {mavonEditor} from 'mavon-editor'
-  mavonEditor.getMarkdownIt()
+  import { mavonEditor } from 'mavon-editor'
+  const markdownIt = mavonEditor.getMarkdownIt()
 ```
 
 #### 方法3 通过mavonEditor的实例获取
 ```javascript
    <mavonEditor ref=md></mavonEditor>
    ...
-   this.refs.md.markdownIt
+   const markdownIt = this.refs.md.getMarkdownIt()
 ```
 
 ### 使用markdown-it对象
@@ -33,32 +33,3 @@
 ```
 
 > [更多设置参考markdown-it...](https://github.com/markdown-it/markdown-it)
-
-### 简单示例
-仅使用mavonEditor的markdown渲染功能。
-
-> 注意：`class="markdown-body"` 是必要的，否则CSS样式会于预览的不一样
-
-```html
-<template>
-  <div>
-    <span class="markdown-body" v-html="rawHtml"></span>
-  </div>
-</template>
-
-<script>
-import { mavonEditor } from 'mavon-editor';
-import 'mavon-editor/dist/css/index.css';
-export default {
-  name: 'Example',
-  props: {
-    markdown: String,
-  },
-  computed: {
-    rawHtml: function() {
-      return mavonEditor.getMarkdownIt().render(this.markdown);
-    }
-  },
-};
-</script>
-```
diff --git a/doc/en/markdown.md b/doc/en/markdown.md
index f01dccfbc..a8b6a26f3 100644
--- a/doc/en/markdown.md
+++ b/doc/en/markdown.md
@@ -4,23 +4,23 @@
 
 #### method 1:  Global Registration
 ```javascript
-  import mavonEditor from 'mavon-editor'
-  Vue.use(mavonEditor)
+  import MavonEditor from 'mavon-editor'
+  Vue.use(MavonEditor)
   ...
-  mavonEditor.markdownIt
+  const markdownIt = MavonEditor.mavonEditor.getMarkdownIt()
 ```
 
 #### method 2: Local Registration
 ```javascript
   import {mavonEditor} from 'mavon-editor'
-  mavonEditor.getMarkdownIt()
+  const markdownIt = mavonEditor.getMarkdownIt()
 ```
 
 #### method 3: Use mavonEditor ref
 ```javascript
    <mavonEditor ref=md></mavonEditor>
    ...
-   this.refs.md.markdownIt
+   const markdownIt = this.refs.md.getMarkdownIt()
 ```
 
 ### Use markdown-it object
@@ -33,32 +33,3 @@
 ```
 
 > [markdown-it API](https://github.com/markdown-it/markdown-it)
-
-### Simple example
-Only use the markdown rendering function of mavonEditor.
-
-> Notice：`class="markdown-body"` is necessary, or the CSS style will be different from the preview
-
-```html
-<template>
-  <div>
-    <span class="markdown-body" v-html="rawHtml"></span>
-  </div>
-</template>
-
-<script>
-import { mavonEditor } from 'mavon-editor';
-import 'mavon-editor/dist/css/index.css';
-export default {
-  name: 'Example',
-  props: {
-    markdown: String,
-  },
-  computed: {
-    rawHtml: function() {
-      return mavonEditor.getMarkdownIt().render(this.markdown);
-    }
-  },
-};
-</script>
-```
diff --git a/src/dev/demo.vue b/src/dev/demo.vue
index fa5e04624..99e591d39 100644
--- a/src/dev/demo.vue
+++ b/src/dev/demo.vue
@@ -3,10 +3,12 @@
     <div class="navigate">
       <span @click="viewIndex = 1">Full demo</span>
       <span @click="viewIndex = 2">Simple demo</span>
+      <span @click="viewIndex = 3">Markdown Render</span>
     </div>
     <div>
       <App v-if="viewIndex == 1"></App>
       <Editor v-else-if="viewIndex == 2"></Editor>
+      <MarkdownRender v-else-if="viewIndex == 3"></MarkdownRender>
     </div>
   </div>
 </template>
@@ -14,12 +16,14 @@
 <script>
 import app from './app.vue';
 import editor from './editor.vue';
+import markdownRender from './markdown-it.vue';
 
 export default {
   name: 'demo',
   components: {
     App: app,
-    Editor: editor
+    Editor: editor,
+    MarkdownRender: markdownRender
   },
   data() {
     return {
diff --git a/src/dev/markdown-it.vue b/src/dev/markdown-it.vue
new file mode 100644
index 000000000..34dc9c567
--- /dev/null
+++ b/src/dev/markdown-it.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="markdown">
+    <span class="markdown-body" v-html="rawHtml"></span>
+  </div>
+</template>
+
+<script>
+import { mavonEditor } from '../index';
+import '../../dist/css/index.css';
+import { CONFIG } from '../lib/config.js';
+
+export default {
+  name: 'Example',
+  data() {
+    return {
+      d_language: 'zh-CN',
+      markdown: ''
+    };
+  },
+  computed: {
+    rawHtml: function () {
+      const markdownIt = mavonEditor.getMarkdownIt();
+      this.markdown = CONFIG[`help_${this.d_language}`];
+      markdownIt.set({ breaks: false });
+      return markdownIt.render(this.markdown);
+      // return mavonEditor.getMarkdownIt().render(this.markdown);
+    }
+  }
+};
+</script>
+<style>
+.markdown {
+  margin: auto;
+  width: 80%;
+}
+</style>