Skip to content

Commit

Permalink
doc: update maekdown.md
Browse files Browse the repository at this point in the history
  • Loading branch information
wangsongc committed Dec 16, 2021
1 parent e48e75e commit 8756a81
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 69 deletions.
41 changes: 6 additions & 35 deletions doc/cn/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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对象
Expand All @@ -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>
```
39 changes: 5 additions & 34 deletions doc/en/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
```

0 comments on commit 8756a81

Please sign in to comment.