Skip to content

Commit

Permalink
update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
F-loat committed Sep 6, 2017
1 parent 0fef9f1 commit ea93bf9
Showing 1 changed file with 87 additions and 86 deletions.
173 changes: 87 additions & 86 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
# Use Setup

## Requirements
vue@^2.0
webpack@^2.0
- vue@^2.0
- webpack@^2.0

## Install vue-simplemde

Expand All @@ -21,16 +21,15 @@ npm install vue-simplemde --save
## Use

``` javascript
// import with ES6
// 全局引用
import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'

// use
Vue.use(VueSimplemde)
```

``` javascript
// or use with component
// 单个组件内引用
import markdownEditor from 'vue-simplemde/src/markdown-editor'

export default {
Expand All @@ -44,93 +43,95 @@ export default {

> 不再支持Vue1.x，可自行修改使用
``` html
<!-- 通过 v-model 控制 value -->
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>

<!-- 通过事件控制 value -->
<markdown-editor :value="content" @input="handleInput"></markdown-editor>
``` vue
<template>
<!-- 通过 v-model 控制 value -->
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
<!-- 添加配置 -->
<markdown-editor :configs="configs"></markdown-editor>
<!-- 通过事件控制 value -->
<markdown-editor :value="content" @input="handleInput"></markdown-editor>
<!-- 不自动初始化 -->
<markdown-editor :autoinit="false"></markdown-editor>
```
<!-- 添加配置 -->
<markdown-editor :configs="configs"></markdown-editor>
``` css
@import '~simplemde/dist/simplemde.min.css';
```
<!-- 不自动初始化 -->
<markdown-editor :autoinit="false"></markdown-editor>
</template>
``` javascript
import markdownEditor from 'vue-simplemde/src/markdown-editor'
<style>
@import '~simplemde/dist/simplemde.min.css';
</style>
// 基础用法
export default {
components: {
markdownEditor
},
data () {
return {
content: '',
configs: {
spellChecker: false // 禁用拼写检查
<script>
import markdownEditor from 'vue-simplemde/src/markdown-editor'
// 基础用法
export default {
components: {
markdownEditor
},
data () {
return {
content: '',
configs: {
spellChecker: false // 禁用拼写检查
}
}
}
}
}
// 添加更多配置，获取编辑器对象，添加事件绑定，判断编辑器状态
export default {
components: {
markdownEditor
},
data () {
return {
content: '',
configs: {
status: false, // 禁用底部状态栏
initialValue: 'hellow', // 设置初始值
renderingConfig: {
codeSyntaxHighlighting: true // 开启代码高亮
// 完整示例
export default {
components: {
markdownEditor
},
data () {
return {
content: '',
configs: {
status: false, // 禁用底部状态栏
initialValue: 'hellow', // 设置初始值
renderingConfig: {
codeSyntaxHighlighting: true // 开启代码高亮
}
}
}
}
},
computed: {
simplemde () {
return this.$refs.markdownEditor.simplemde
}
},
mounted: {
console.log(this.simplemde)
this.simplemde.togglePreview()

// 'change'事件已经绑定，可以通过@input指定处理器
// 如果需要，你可以自行绑定这个列表中的其他事件: https://codemirror.net/doc/manual.html#events
this.simplemde.codemirror.on('beforeChange', (instance, changeObj) => {
// do some things
})

// 移除SimpleMDE，组件销毁时会自动调用
this.simplemde = null

// 一些有用的方法
this.$refs.markdownEditor.initialize() // init
this.simplemde.toTextArea()
this.simplemde.isPreviewActive() // returns boolean
this.simplemde.isSideBySideActive() // returns boolean
this.simplemde.isFullscreenActive() // returns boolean
this.simplemde.clearAutosavedValue() // no returned value
this.simplemde.markdown(this.content) // returns parsed html
this.simplemde.codemirror.refresh() // refresh codemirror
},
methods: {
handleInput () {
// do some things
},
computed: {
simplemde () {
return this.$refs.markdownEditor.simplemde
}
},
mounted: {
console.log(this.simplemde)
this.simplemde.togglePreview()
// 'change'事件已经绑定，可以通过@input指定处理器
// 如果需要，你可以自行绑定这个列表中的其他事件: https://codemirror.net/doc/manual.html#events
this.simplemde.codemirror.on('beforeChange', (instance, changeObj) => {
// do some things
})
// 移除SimpleMDE，组件销毁时会自动调用
this.simplemde = null
// 一些有用的方法
this.$refs.markdownEditor.initialize() // init
this.simplemde.toTextArea()
this.simplemde.isPreviewActive() // returns boolean
this.simplemde.isSideBySideActive() // returns boolean
this.simplemde.isFullscreenActive() // returns boolean
this.simplemde.clearAutosavedValue() // no returned value
this.simplemde.markdown(this.content) // returns parsed html
this.simplemde.codemirror.refresh() // refresh codemirror
},
methods: {
handleInput () {
// do some things
}
}
}
}
<script>
```

## Markdown style
Expand All @@ -150,18 +151,18 @@ $ npm install --save github-markdown-css
</template>
<style>
@import '~simplemde/dist/simplemde.min.css';
@import '~github-markdown-css';
@import '~simplemde/dist/simplemde.min.css';
@import '~github-markdown-css';
</style>
```

## Highlight
> 代码高亮除需开启配置外，还要自行引入css文件
``` vue
<style>
@import '~simplemde/dist/simplemde.min.css';
@import '~highlight.js/styles/atom-one-dark.css';
/* 高亮主题可选列表：https://github.com/isagalaev/highlight.js/tree/master/src/styles */
@import '~simplemde/dist/simplemde.min.css';
@import '~highlight.js/styles/atom-one-dark.css';
/* 高亮主题可选列表：https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</style>
```

Expand All @@ -180,8 +181,8 @@ $ npm install --save simplemde-theme-base
</template>
<style>
@import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
/* 无需引入simplemde.min.css */
@import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
/* 无需引入simplemde.min.css */
</style>
```

Expand Down

0 comments on commit ea93bf9

Please sign in to comment.