Skip to content

Commit 0fef9f1

Browse files
author
F-loat
committed
add eslint and optimized
1 parent 31dcb85 commit 0fef9f1

File tree

7 files changed

+1298
-68
lines changed

7 files changed

+1298
-68
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintrc.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
'extends': 'airbnb-base',
3+
'parser': 'babel-eslint',
4+
'env': {
5+
'browser': true,
6+
},
7+
'parserOptions': {
8+
'sourceType': 'module',
9+
'allowImportExportEverywhere': true,
10+
},
11+
'plugins': [
12+
'html',
13+
],
14+
};

‎README.md

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88

99
# Use Setup
1010

11+
## Requirements
12+
vue@^2.0
13+
webpack@^2.0
14+
1115
## Install vue-simplemde
1216

1317
``` bash
@@ -21,17 +25,13 @@ npm install vue-simplemde --save
2125
import Vue from 'vue'
2226
import VueSimplemde from 'vue-simplemde'
2327

24-
// require with Webpack/Node.js
25-
var Vue = require('vue')
26-
var VueSimplemde = require('vue-simplemde')
27-
2828
// use
2929
Vue.use(VueSimplemde)
3030
```
3131

3232
``` javascript
33-
// or use with component(ES6)
34-
import { markdownEditor } from 'vue-simplemde'
33+
// or use with component
34+
import markdownEditor from 'vue-simplemde/src/markdown-editor'
3535

3636
export default {
3737
components: {
@@ -42,13 +42,8 @@ export default {
4242

4343
## Examples
4444

45-
### Vue1.0
46-
``` html
47-
<!-- 使用双向绑定修饰符 -->
48-
<markdown-editor :value.sync="content" v-ref:markdown-editor></markdown-editor>
49-
```
45+
> 不再支持Vue1.x，可自行修改使用
5046
51-
### Vue2.0
5247
``` html
5348
<!-- 通过 v-model 控制 value -->
5449
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
@@ -58,11 +53,17 @@ export default {
5853

5954
<!-- 添加配置 -->
6055
<markdown-editor :configs="configs"></markdown-editor>
56+
57+
<!-- 不自动初始化 -->
58+
<markdown-editor :autoinit="false"></markdown-editor>
59+
```
60+
61+
``` css
62+
@import '~simplemde/dist/simplemde.min.css';
6163
```
6264

63-
### Both
6465
``` javascript
65-
import { markdownEditor } from 'vue-simplemde'
66+
import markdownEditor from 'vue-simplemde/src/markdown-editor'
6667

6768
// 基础用法
6869
export default {
@@ -91,8 +92,7 @@ export default {
9192
status: false, // 禁用底部状态栏
9293
initialValue: 'hellow', // 设置初始值
9394
renderingConfig: {
94-
codeSyntaxHighlighting: true, // 开启代码高亮
95-
highlightingTheme: 'atom-one-light' // 自定义代码高亮主题，可选列表(https://github.com/isagalaev/highlight.js/tree/master/src/styles)
95+
codeSyntaxHighlighting: true // 开启代码高亮
9696
}
9797
}
9898
}
@@ -116,12 +116,14 @@ export default {
116116
this.simplemde = null
117117

118118
// 一些有用的方法
119+
this.$refs.markdownEditor.initialize() // init
119120
this.simplemde.toTextArea()
120121
this.simplemde.isPreviewActive() // returns boolean
121122
this.simplemde.isSideBySideActive() // returns boolean
122123
this.simplemde.isFullscreenActive() // returns boolean
123124
this.simplemde.clearAutosavedValue() // no returned value
124125
this.simplemde.markdown(this.content) // returns parsed html
126+
this.simplemde.codemirror.refresh() // refresh codemirror
125127
},
126128
methods: {
127129
handleInput () {
@@ -131,45 +133,56 @@ export default {
131133
}
132134
```
133135

134-
## Editor Theme ([simplemde-theme-base](https://github.com/xcatliu/simplemde-theme-base/wiki/List-of-themes))
135-
> e.g. 使用simplemde-theme-base主题
136+
## Markdown style
137+
> e.g. 使用Github的markdown样式
138+
139+
[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)
136140

137141
### install
138-
```
139-
$ npm install --save simplemde-theme-base
142+
``` bash
143+
$ npm install --save github-markdown-css
140144
```
141145

142146
### use
143-
``` html
144-
<markdown-editor :custom-theme="true"></markdown-editor>
147+
``` vue
148+
<template>
149+
<markdown-editor preview-class="markdown-body"></markdown-editor>
150+
</template>
151+
152+
<style>
153+
@import '~simplemde/dist/simplemde.min.css';
154+
@import '~github-markdown-css';
155+
</style>
145156
```
146157

147-
``` javascript
148-
import 'simplemde-theme-base/dist/simplemde-theme-base.min.css'
158+
## Highlight
159+
> 代码高亮除需开启配置外，还要自行引入css文件
160+
``` vue
161+
<style>
162+
@import '~simplemde/dist/simplemde.min.css';
163+
@import '~highlight.js/styles/atom-one-dark.css';
164+
/* 高亮主题可选列表：https://github.com/isagalaev/highlight.js/tree/master/src/styles */
165+
</style>
149166
```
150167

151-
152-
## Markdown style
153-
> e.g. 使用Github的markdown样式
154-
155-
[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)
168+
## Editor Theme ([simplemde-theme-base](https://github.com/xcatliu/simplemde-theme-base/wiki/List-of-themes))
169+
> e.g. 使用simplemde-theme-base主题
156170
157171
### install
158172
```
159-
$ npm install --save github-markdown-css
173+
$ npm install --save simplemde-theme-base
160174
```
161175

162176
### use
163-
``` html
164-
<markdown-editor preview-class="markdown-body"></markdown-editor>
165-
```
166-
167-
``` javascript
168-
// 使用默认编辑器主题时
169-
require.ensure([], () => require('github-markdown-css'), 'markdown-style')
170-
171-
// 使用自定义编辑器主题时
172-
import 'github-markdown-css'
177+
``` vue
178+
<template>
179+
<markdown-editor :custom-theme="true"></markdown-editor>
180+
</template>
181+
182+
<style>
183+
@import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
184+
/* 无需引入simplemde.min.css */
185+
</style>
173186
```
174187

175188
## Configuration

‎index.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
* @author F-loat
44
*/
55

6-
var markdownEditor = require('./markdown-editor.vue');
6+
import markdownEditor from './src/markdown-editor.vue';
77

8-
var VueSimplemde = {
9-
markdownEditor: markdownEditor,
10-
install: function(Vue) {
8+
export default {
9+
markdownEditor,
10+
install(Vue) {
1111
Vue.component('markdown-editor', markdownEditor);
1212
},
1313
};
1414

15-
module.exports = VueSimplemde;
15+
export {
16+
markdownEditor,
17+
};

‎package.json

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
22
"name": "vue-simplemde",
3-
"version": "0.3.8",
3+
"version": "0.4.0",
44
"description": "SimpleMDE - Markdown Editor component for Vue.js",
55
"main": "index.js",
66
"scripts": {
7+
"lint": "./node_modules/.bin/eslint --format node_modules/eslint-friendly-formatter ./src/markdown-editor.vue"
78
},
89
"keywords": [
910
"Vue",
@@ -16,11 +17,19 @@
1617
},
1718
"license": "MIT",
1819
"dependencies": {
19-
"highlight.js": "^9.9.0",
20+
"highlight.js": "^9.12.0",
2021
"simplemde": "^1.11.2"
2122
},
2223
"repository": {
2324
"type": "git",
2425
"url": "https://github.com/F-loat/vue-simplemde.git"
26+
},
27+
"devDependencies": {
28+
"babel-eslint": "^7.2.3",
29+
"eslint": "^4.6.1",
30+
"eslint-config-airbnb-base": "^12.0.0",
31+
"eslint-friendly-formatter": "^3.0.0",
32+
"eslint-plugin-html": "^3.2.1",
33+
"eslint-plugin-import": "^2.7.0"
2534
}
2635
}

‎markdown-editor.vue renamed to ‎src/markdown-editor.vue

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ export default {
1212
props: {
1313
value: String,
1414
previewClass: String,
15+
autoinit: {
16+
type: Boolean,
17+
default() {
18+
return true;
19+
},
20+
},
1521
customTheme: {
1622
type: Boolean,
1723
default() {
@@ -25,16 +31,18 @@ export default {
2531
},
2632
},
2733
},
28-
ready() {
29-
this.initialize();
30-
this.syncValue();
31-
},
3234
mounted() {
33-
this.initialize();
35+
if (this.autoinit) this.initialize();
36+
},
37+
activated() {
38+
const editor = this.simplemde;
39+
if (!editor) return;
40+
const isActive = editor.isSideBySideActive() || editor.isPreviewActive();
41+
if (isActive) editor.toggleFullScreen();
3442
},
3543
methods: {
3644
initialize() {
37-
let configs = {};
45+
const configs = {};
3846
Object.assign(configs, this.configs);
3947
configs.element = configs.element || this.$el.firstElementChild;
4048
configs.initialValue = configs.initialValue || this.value;
@@ -44,16 +52,9 @@ export default {
4452
4553
// 判断是否开启代码高亮
4654
if (configs.renderingConfig && configs.renderingConfig.codeSyntaxHighlighting) {
47-
require.ensure([], () => {
48-
const theme = configs.renderingConfig.highlightingTheme || 'default';
49-
window.hljs = require('highlight.js');
50-
require(`highlight.js/styles/${theme}.css`);
51-
}, 'highlight');
52-
}
53-
54-
// 判断是否引入样式文件
55-
if (!this.customTheme) {
56-
require('simplemde/dist/simplemde.min.css');
55+
import('highlight.js').then((hljs) => {
56+
window.hljs = hljs;
57+
});
5758
}
5859
5960
// 添加自定义 previewClass
@@ -75,11 +76,6 @@ export default {
7576
preview.className = `editor-preview ${className}`;
7677
wrapper.appendChild(preview);
7778
},
78-
syncValue() {
79-
this.simplemde.codemirror.on('change', () => {
80-
this.value = this.simplemde.value();
81-
});
82-
},
8379
},
8480
destroyed() {
8581
this.simplemde = null;

0 commit comments

Comments
 (0)