Skip to content

Commit 993b78e

Browse files
author
F-loat
committed
fix: F-loat#45 更新示例
1 parent a66c042 commit 993b78e

File tree

5 files changed

+106
-194
lines changed

5 files changed

+106
-194
lines changed

‎README.md

Lines changed: 4 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -54,93 +54,10 @@ export default {
5454

5555
> 不再支持Vue1.x，可自行修改使用
5656
57-
``` vue
58-
<template>
59-
<!-- 通过 v-model 控制 value -->
60-
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
61-
62-
<!-- 通过事件控制 value -->
63-
<markdown-editor :value="content" @input="handleInput"></markdown-editor>
64-
65-
<!-- 添加配置 -->
66-
<markdown-editor :configs="configs"></markdown-editor>
67-
68-
<!-- 不自动初始化 -->
69-
<markdown-editor :autoinit="false"></markdown-editor>
70-
</template>
71-
72-
<style>
73-
@import '~simplemde/dist/simplemde.min.css';
74-
</style>
75-
76-
<script>
77-
import markdownEditor from 'vue-simplemde/src/markdown-editor'
78-
79-
// 基础用法
80-
export default {
81-
components: {
82-
markdownEditor
83-
},
84-
data () {
85-
return {
86-
content: '',
87-
configs: {
88-
spellChecker: false // 禁用拼写检查
89-
}
90-
}
91-
}
92-
}
93-
94-
// 完整示例
95-
export default {
96-
components: {
97-
markdownEditor
98-
},
99-
data () {
100-
return {
101-
content: '',
102-
configs: {
103-
status: false, // 禁用底部状态栏
104-
spellChecker: false // 禁用拼写检查
105-
}
106-
}
107-
},
108-
computed: {
109-
simplemde () {
110-
return this.$refs.markdownEditor.simplemde
111-
}
112-
},
113-
mounted: {
114-
console.log(this.simplemde)
115-
this.simplemde.togglePreview()
116-
117-
// 'change'事件已经绑定，可以通过@input指定处理器
118-
// 如果需要，你可以自行绑定这个列表中的其他事件: https://codemirror.net/doc/manual.html#events
119-
this.simplemde.codemirror.on('beforeChange', (instance, changeObj) => {
120-
// do some things
121-
})
122-
123-
// 移除SimpleMDE，组件销毁时会自动调用
124-
this.simplemde = null
125-
126-
// 一些有用的方法
127-
this.$refs.markdownEditor.initialize() // init
128-
this.simplemde.toTextArea()
129-
this.simplemde.isPreviewActive() // returns boolean
130-
this.simplemde.isSideBySideActive() // returns boolean
131-
this.simplemde.isFullscreenActive() // returns boolean
132-
this.simplemde.clearAutosavedValue() // no returned value
133-
this.simplemde.markdown(this.content) // returns parsed html
134-
this.simplemde.codemirror.refresh() // refresh codemirror
135-
},
136-
methods: {
137-
handleInput () {
138-
// do some things
139-
}
140-
}
141-
}
142-
</script>
143-
```
57+
* [Demo Page](https://f-loat.github.io/vue-simplemde/)
58+
* [Demo Source](https://github.com/F-loat/vue-simplemde/tree/gh-pages)
59+
* [Simple Example](./examples/index.vue)
60+
* [Nuxt Example](./examples/nuxt)
14461

14562
## Markdown style
14663
> e.g. 使用Github的markdown样式

‎examples/index.vue

Lines changed: 72 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,87 @@
11
<template>
2-
<div class="demo-wrap">
3-
<div class="editor-wrap">
4-
<div class="editor">
5-
<h4 class="title">默认配置&禁用自动初始化</h4>
6-
<markdown-editor
7-
v-model="content"
8-
ref="markdownEditor"
9-
:autoinit="false"></markdown-editor>
10-
</div>
11-
<div class="editor">
12-
<h4 class="title">开启代码高亮&使用github的markdown样式</h4>
13-
<markdown-editor
14-
v-model="content"
15-
:highlight="true"
16-
preview-class="markdown-body"></markdown-editor>
17-
</div>
18-
<div class="editor theme">
19-
<h4 class="title">自定义代码高亮主题</h4>
20-
<markdown-editor
21-
v-model="content"
22-
:highlight="true"
23-
preview-class="markdown-body"></markdown-editor>
24-
</div>
25-
<div class="editor">
26-
<h4 class="title">隐藏底部统计栏&修改工具栏</h4>
27-
<markdown-editor
28-
v-model="content"
29-
:configs="configs"></markdown-editor>
30-
</div>
31-
</div>
32-
<div class="button-wrap">
33-
<button type="button" @click="handleOutputMARKDOWN">输出MARKDOWN</button>
34-
<button type="button" @click="handleOutputHTML">输出HTML</button>
35-
<div v-text="output"></div>
36-
<div v-html="output" v-show="type === 'html'" class="markdown-body"></div>
37-
</div>
2+
<div>
3+
<!-- 通过 v-model 控制 value -->
4+
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
5+
6+
<!-- 通过事件控制 value -->
7+
<markdown-editor :value="content" @input="handleInput"></markdown-editor>
8+
9+
<!-- 添加配置 -->
10+
<markdown-editor :configs="configs"></markdown-editor>
11+
12+
<!-- 不自动初始化 -->
13+
<markdown-editor :autoinit="false"></markdown-editor>
3814
</div>
3915
</template>
4016

4117
<script>
42-
import markdownEditor from 'vue-simplemde/src/markdown-editor';
43-
import hljs from 'highlight.js';
18+
import markdownEditor from 'vue-simplemde/src/markdown-editor'
4419
45-
window.hljs = hljs;
20+
// 基础用法
21+
export default {
22+
components: {
23+
markdownEditor
24+
},
25+
data () {
26+
return {
27+
content: '',
28+
configs: {
29+
spellChecker: false // 禁用拼写检查
30+
}
31+
}
32+
}
33+
}
4634
47-
export default {
48-
name: 'index',
49-
components: {
50-
markdownEditor,
51-
},
52-
data() {
53-
return {
54-
content: '``` \nconsole.log("lalala") \n```',
55-
configs: {
56-
status: false,
57-
toolbar: ['image'],
58-
},
59-
output: '',
60-
type: 'markdown',
61-
};
62-
},
63-
computed: {
64-
simplemde() {
65-
return this.$refs.markdownEditor.simplemde;
35+
// 完整示例
36+
export default {
37+
components: {
38+
markdownEditor
6639
},
67-
},
68-
mounted() {
69-
this.$nextTick(() => {
70-
this.$refs.markdownEditor.initialize();
71-
});
72-
},
73-
methods: {
74-
handleInput(val) {
75-
this.output = val;
40+
data () {
41+
return {
42+
content: '',
43+
configs: {
44+
status: false, // 禁用底部状态栏
45+
spellChecker: false // 禁用拼写检查
46+
}
47+
}
7648
},
77-
handleOutputHTML() {
78-
this.type = 'html';
79-
this.output = this.simplemde.markdown(this.content);
49+
computed: {
50+
simplemde () {
51+
return this.$refs.markdownEditor.simplemde
52+
}
8053
},
81-
handleOutputMARKDOWN() {
82-
this.type = 'markdown';
83-
this.output = this.content;
54+
mounted () {
55+
console.log(this.simplemde)
56+
this.simplemde.togglePreview()
57+
58+
// 'change'事件已经绑定，可以通过@input指定处理器
59+
// 如果需要，你可以自行绑定这个列表中的其他事件: https://codemirror.net/doc/manual.html#events
60+
this.simplemde.codemirror.on('beforeChange', (instance, changeObj) => {
61+
// do some things
62+
})
63+
64+
// 移除SimpleMDE，组件销毁时会自动调用
65+
this.simplemde = null
66+
67+
// 一些有用的方法
68+
this.$refs.markdownEditor.initialize() // init
69+
this.simplemde.toTextArea()
70+
this.simplemde.isPreviewActive() // returns boolean
71+
this.simplemde.isSideBySideActive() // returns boolean
72+
this.simplemde.isFullscreenActive() // returns boolean
73+
this.simplemde.clearAutosavedValue() // no returned value
74+
this.simplemde.markdown(this.content) // returns parsed html
75+
this.simplemde.codemirror.refresh() // refresh codemirror
8476
},
85-
},
86-
};
77+
methods: {
78+
handleInput () {
79+
// do some things
80+
}
81+
}
82+
}
8783
</script>
8884

8985
<style>
90-
@import '~simplemde/dist/simplemde.min.css';
91-
@import '~highlight.js/styles/atom-one-dark.css';
92-
@import '~github-markdown-css';
93-
94-
body {
95-
margin: 0;
96-
padding: 0;
97-
}
98-
.button-wrap {
99-
padding: 20px;
100-
}
101-
.editor-wrap {
102-
width: 100%;
103-
max-width: 900px;
104-
padding: 0 10px;
105-
float: left;
106-
}
107-
.editor {
108-
padding: 10px;
109-
box-sizing: border-box;
110-
}
111-
.title {
112-
text-align: center;
113-
}
114-
.markdown-editor .CodeMirror {
115-
height: 200px;
116-
}
117-
/*修改代码块背景色及字体颜色*/
118-
.theme .editor-preview-side pre, .theme .editor-preview pre{
119-
color: #abb2bf !important;
120-
background: #282c34 !important;
121-
}
86+
@import '~simplemde/dist/simplemde.min.css';
12287
</style>

‎examples/nuxt/index.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="wrap">
3+
<no-ssr>
4+
<markdown-editor v-model="content"></markdown-editor>
5+
</no-ssr>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
data() {
12+
return {
13+
content: '``` \nconsole.log("lalala") \n```',
14+
};
15+
},
16+
};
17+
</script>

‎examples/nuxt/nuxt-simplemde-plugin.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Vue from 'vue'
2+
import VueSimplemde from 'vue-simplemde'
3+
4+
Vue.use(VueSimplemde)

‎examples/nuxt/nuxt.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
// some nuxt config...
3+
plugins: [
4+
{ src: '~plugins/nuxt-simplemde-plugin.js', ssr: false }
5+
],
6+
css: [
7+
'simplemde/dist/simplemde.min.css'
8+
]
9+
}

0 commit comments

Comments
 (0)