Skip to content

Commit 948bfdb

Browse files
li-xiaoqingli-xiaoqing
authored
Merge pull request #31 from li-xiaoqing/dev
Dev
2 parents b54bada + 2deca97 commit 948bfdb

16 files changed

Lines changed: 495 additions & 77 deletions

File tree

‎README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,86 @@ $ npm install perfect-markdown --save
4646
}
4747
```
4848

49+
## i18n
50+
we support i18n and integrated Chinese Simplified(zh-CN) and English(en)，default Chinese Simplified.
51+
52+
```javascript
53+
import Vue from 'vue'
54+
import store from '@/store' // vuex is required in perfect-markdown
55+
import pmd from 'perfect-markdown'
56+
// use
57+
Vue.use(pmd, { store }) // register pmd vuex module
58+
consoloe.log(pmd)
59+
pmd.setI18nLocale('en') // set locale english
60+
// also we can add new language package through the following methods
61+
// pmd.setLangMessages(lang, messages) // set lang and translation
62+
// pmd.setHelp(lang, helpMd) // set lang and help doc, the doc is a markdown file
63+
64+
```
65+
pmd.setLangMessages(lang, messages) messages demo
66+
67+
```javascript
68+
{
69+
70+
editor: {
71+
preview: 'preview'
72+
},
73+
toolbar: {
74+
left: {
75+
bold: 'Bold',
76+
italic: 'Italic',
77+
title: 'Header',
78+
h1: 'Header 1',
79+
h2: 'Header 2',
80+
h3: 'Header 3',
81+
h4: 'Header 4',
82+
h5: 'Header 5',
83+
underline: 'Underline',
84+
throughline: 'Strikethrough',
85+
mark: 'Mark',
86+
sub: 'Subscript',
87+
sup: 'Superscript',
88+
left: 'left',
89+
center: 'center',
90+
right: 'right',
91+
quotation: 'Quote',
92+
ul: 'Ul',
93+
ol: 'Ol',
94+
code: 'Code',
95+
table: 'Table',
96+
link: 'Link',
97+
image: 'Image',
98+
video: 'Video',
99+
fromNetwork: 'From network',
100+
fromLocal: 'Local',
101+
attachment: 'attachment',
102+
clear: 'Clear',
103+
imageName: 'Image Name',
104+
imageLink: 'Image Link',
105+
cancel: 'Cancel',
106+
confirm: 'Confirm',
107+
videoLink: 'Video Link',
108+
linkName: 'Link Name',
109+
attachmentName: 'Attachment Name',
110+
attachmentLink: 'Attachment Link',
111+
fileName: '【Attachment】'
112+
},
113+
right: {
114+
split: 'Split ',
115+
fullscreen: 'Fullscreen',
116+
import: 'Import',
117+
export: 'Export',
118+
print: 'Print',
119+
help: 'Help',
120+
downloadFileName: 'unkown.md'
121+
122+
}
123+
},
124+
autoTextarea: {
125+
placeholder: 'please input'
126+
}
127+
}
128+
```
49129

50130
## API
51131

‎package-lock.json‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "perfect-markdown",
3-
"version": "1.0.20",
3+
"version": "1.1.0",
44
"main": "src/index.js",
55
"files": [
66
"lib",
@@ -39,6 +39,7 @@
3939
"markdown-it-toc": "^1.1.0",
4040
"markdown-it-video": "^0.6.3",
4141
"v-tooltip": "^2.0.2",
42+
"vue-i18n": "^8.18.1",
4243
"vue-router": "^3.0.1",
4344
"vuex": "^3.0.1"
4445
},

‎src/components/auto-textarea/index.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
export default {
1515
data() {
1616
return {
17-
inputStr: this.value
17+
inputStr: this.value,
18+
placeholder: this.$t('autoTextarea.placeholder')
1819
}
1920
},
2021
props: {
@@ -25,10 +26,6 @@ export default {
2526
value: {
2627
type: String,
2728
default: ''
28-
},
29-
placeholder: {
30-
type: String,
31-
default: '请输入'
3229
}
3330
},
3431
methods: {

‎src/components/toolbar/toolbar-left.vue‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
</template>
55
<template v-else>
66
<slot name="toolbarLeftBefore"></slot>
7-
<span v-tooltip.top-center="'加粗'" @click="clickHandler('bold', 'insert')"><i class="iconfont icon-bold"></i></span>
8-
<span v-tooltip.top-center="'斜体'" @click="clickHandler('italic', 'insert')"><i class="iconfont icon-italic"></i></span>
9-
<span class="menu" v-tooltip.top-center="'标题'" @click="clickHandler('title', 'menu')" @mouseenter="showTitleMenu" @mouseleave="hideTitleMenu">
7+
<span v-tooltip.top-center="$t('toolbar.left.bold')" @click="clickHandler('bold', 'insert')"><i class="iconfont icon-bold"></i></span>
8+
<span v-tooltip.top-center="$t('toolbar.left.italic')" @click="clickHandler('italic', 'insert')"><i class="iconfont icon-italic"></i></span>
9+
<span class="menu" v-tooltip.top-center="$t('toolbar.left.title')" @click="clickHandler('title', 'menu')" @mouseenter="showTitleMenu" @mouseleave="hideTitleMenu">
1010
<i class="iconfont icon-title"></i>
1111
<transition name="fade">
1212
<ul
@@ -16,38 +16,38 @@
1616
@mouseleave="hideTitleMenu"
1717
>
1818
<li @click="clickHandler('title1', 'insert')">
19-
一级标题
19+
{{$t('toolbar.left.h1')}}
2020
</li>
2121
<li @click="clickHandler('title2', 'insert')">
22-
二级标题
22+
{{$t('toolbar.left.h2')}}
2323
</li>
2424
<li @click="clickHandler('title3', 'insert')">
25-
三级标题
25+
{{$t('toolbar.left.h3')}}
2626
</li>
2727
<li @click="clickHandler('title4', 'insert')">
28-
四级标题
28+
{{$t('toolbar.left.h4')}}
2929
</li>
3030
<li @click="clickHandler('title5', 'insert')">
31-
五级标题
31+
{{$t('toolbar.left.h5')}}
3232
</li>
3333
</ul>
3434
</transition>
3535
</span>
36-
<span v-tooltip.top-center="'下划线'" @click="clickHandler('underline', 'insert')"><i class="iconfont icon-underline"></i></span>
37-
<span v-tooltip.top-center="'删除线'" @click="clickHandler('throughline', 'insert')"><i class="iconfont icon-strike"></i></span>
38-
<span v-tooltip.top-center="'标记'" @click="clickHandler('mark', 'insert')"><i class="iconfont icon-mark"></i></span>
39-
<span v-tooltip.top-center="'下标'" @click="clickHandler('sub', 'insert')"><i class="iconfont icon-sub"></i></span>
40-
<span v-tooltip.top-center="'上标'" @click="clickHandler('sup', 'insert')"><i class="iconfont icon-sup"></i></span>
41-
<span v-tooltip.top-center="'左对齐'" @click="clickHandler('left', 'insert')"><i class="iconfont icon-left"></i></span>
42-
<span v-tooltip.top-center="'居中'" @click="clickHandler('center', 'insert')"><i class="iconfont icon-center"></i></span>
43-
<span v-tooltip.top-center="'右对齐'" @click="clickHandler('right', 'insert')"><i class="iconfont icon-right"></i></span>
44-
<span v-tooltip.top-center="'引用'" @click="clickHandler('quotation', 'insert')"><i class="iconfont icon-quotation"></i></span>
45-
<span v-tooltip.top-center="'无序列表'" @click="clickHandler('ul', 'insert')"><i class="iconfont icon-ul"></i></span>
46-
<span v-tooltip.top-center="'有序列表'" @click="clickHandler('ol', 'insert')"><i class="iconfont icon-ol"></i></span>
47-
<span v-tooltip.top-center="'代码块'" @click="clickHandler('code', 'insert')"><i class="iconfont icon-code"></i></span>
48-
<span v-tooltip.top-center="'表格'" @click="clickHandler('table', 'insert')"><i class="iconfont icon-table"></i></span>
49-
<span v-tooltip.top-center="'链接'" @click="clickHandler('link', 'pop')"><i class="iconfont icon-link"></i></span>
50-
<span v-tooltip.top-center="'图片'" class="menu" @click="clickHandler('image', 'menu')" @mouseenter="showImageMenu" @mouseleave="hideImageMenu">
36+
<span v-tooltip.top-center="$t('toolbar.left.underline')" @click="clickHandler('underline', 'insert')"><i class="iconfont icon-underline"></i></span>
37+
<span v-tooltip.top-center="$t('toolbar.left.throughline')" @click="clickHandler('throughline', 'insert')"><i class="iconfont icon-strike"></i></span>
38+
<span v-tooltip.top-center="$t('toolbar.left.mark')" @click="clickHandler('mark', 'insert')"><i class="iconfont icon-mark"></i></span>
39+
<span v-tooltip.top-center="$t('toolbar.left.sub')" @click="clickHandler('sub', 'insert')"><i class="iconfont icon-sub"></i></span>
40+
<span v-tooltip.top-center="$t('toolbar.left.sup')" @click="clickHandler('sup', 'insert')"><i class="iconfont icon-sup"></i></span>
41+
<span v-tooltip.top-center="$t('toolbar.left.left')" @click="clickHandler('left', 'insert')"><i class="iconfont icon-left"></i></span>
42+
<span v-tooltip.top-center="$t('toolbar.left.center')" @click="clickHandler('center', 'insert')"><i class="iconfont icon-center"></i></span>
43+
<span v-tooltip.top-center="$t('toolbar.left.right')" @click="clickHandler('right', 'insert')"><i class="iconfont icon-right"></i></span>
44+
<span v-tooltip.top-center="$t('toolbar.left.quotation')" @click="clickHandler('quotation', 'insert')"><i class="iconfont icon-quotation"></i></span>
45+
<span v-tooltip.top-center="$t('toolbar.left.ul')" @click="clickHandler('ul', 'insert')"><i class="iconfont icon-ul"></i></span>
46+
<span v-tooltip.top-center="$t('toolbar.left.ol')" @click="clickHandler('ol', 'insert')"><i class="iconfont icon-ol"></i></span>
47+
<span v-tooltip.top-center="$t('toolbar.left.code')" @click="clickHandler('code', 'insert')"><i class="iconfont icon-code"></i></span>
48+
<span v-tooltip.top-center="$t('toolbar.left.table')" @click="clickHandler('table', 'insert')"><i class="iconfont icon-table"></i></span>
49+
<span v-tooltip.top-center="$t('toolbar.left.link')" @click="clickHandler('link', 'pop')"><i class="iconfont icon-link"></i></span>
50+
<span v-tooltip.top-center="$t('toolbar.left.image')" class="menu" @click="clickHandler('image', 'menu')" @mouseenter="showImageMenu" @mouseleave="hideImageMenu">
5151
<i class="iconfont icon-image"></i>
5252
<transition name="fade">
5353
<ul
@@ -57,15 +57,15 @@
5757
@mouseleave="hideImageMenu"
5858
>
5959
<li @click="addImgFromLink">
60-
来自网络
60+
{{$t('toolbar.left.fromNetwork')}}
6161
</li>
6262
<li>
63-
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="e => addImgFromLocal(e)" multiple="multiple"/>本地上传
63+
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="e => addImgFromLocal(e)" multiple="multiple"/> {{$t('toolbar.left.fromLocal')}}
6464
</li>
6565
</ul>
6666
</transition>
6767
</span>
68-
<span v-tooltip.top-center="'视频'" class="menu" @click="clickHandler('vide', 'menu')" @mouseenter="showVideoMenu" @mouseleave="hideVideoMenu">
68+
<span v-tooltip.top-center="$t('toolbar.left.video')" class="menu" @click="clickHandler('video', 'menu')" @mouseenter="showVideoMenu" @mouseleave="hideVideoMenu">
6969
<i class="iconfont icon-video"></i>
7070
<transition name="fade">
7171
<ul
@@ -75,15 +75,15 @@
7575
@mouseleave="hideVideoMenu"
7676
>
7777
<li @click="addVideFromLink">
78-
来自网络
78+
{{$t('toolbar.left.fromNetwork')}}
7979
</li>
8080
<li>
81-
<input type="file" accept="video/mp4,audio/mp4" @change="e => addVideoFromLocal(e)"/>本地上传
81+
<input type="file" accept="video/mp4,audio/mp4" @change="e => addVideoFromLocal(e)"/> {{$t('toolbar.left.fromLocal')}}
8282
</li>
8383
</ul>
8484
</transition>
8585
</span>
86-
<span v-tooltip.top-center="'附件'" @click="clickHandler('file', 'menu')" @mouseenter="showFileMenu" @mouseleave="hideFileMenu">
86+
<span v-tooltip.top-center="$t('toolbar.left.attachment')" @click="clickHandler('file', 'menu')" @mouseenter="showFileMenu" @mouseleave="hideFileMenu">
8787
<i class="iconfont icon-attachment"></i>
8888
<transition name="fade">
8989
<ul
@@ -93,68 +93,68 @@
9393
@mouseleave="hideFileMenu"
9494
>
9595
<li @click="addFileFromLink">
96-
来自网络
96+
{{$t('toolbar.left.fromNetwork')}}
9797
</li>
9898
<li>
99-
<input type="file" accept="*" @change="e => addFileFromLocal(e)"/>本地上传
99+
<input type="file" accept="*" @change="e => addFileFromLocal(e)"/>{{$t('toolbar.left.fromLocal')}}
100100
</li>
101101
</ul>
102102
</transition>
103103
</span>
104-
<span v-tooltip.top-center="'清空'" @click="clickHandler('clear', 'clear')">
104+
<span v-tooltip.top-center="$t('toolbar.left.clear')" @click="clickHandler('clear', 'clear')">
105105
<i class="iconfont icon-trash"></i>
106106
</span>
107107
<slot name="toolbarLeftAfter"></slot>
108108
<div v-show="imagePopShow" class="image-pop">
109109
<div class="dialog">
110110
<div class="input-box">
111-
<input placeholder="图片名称" v-model="imageName" type="text">
111+
<input :placeholder="$t('toolbar.left.imageName')" v-model="imageName" type="text">
112112
</div>
113113
<div class="input-box">
114-
<input placeholder="图片链接" v-model="imageUrl" type="text">
114+
<input :placeholder="$t('toolbar.left.imageLink')" v-model="imageUrl" type="text">
115115
</div>
116116
<div class="btn-box">
117-
<div @click="closePop('imagePopShow')">取消</div>
118-
<div class="confirm" @click="clickHandler('image', 'insert')">确定</div>
117+
<div @click="closePop('imagePopShow')">{{$t('toolbar.left.cancel')}}</div>
118+
<div class="confirm" @click="clickHandler('image', 'insert')">{{$t('toolbar.left.confirm')}}</div>
119119
</div>
120120
</div>
121121
</div>
122122
<div v-show="videoPopShow" class="video-pop">
123123
<div class="dialog">
124124
<div class="input-box">
125-
<input placeholder="视频链接" v-model="videoUrl" type="text">
125+
<input :placeholder="$t('toolbar.left.videoLink')" v-model="videoUrl" type="text">
126126
</div>
127127
<div class="btn-box">
128-
<div @click="closePop('videoPopShow')">取消</div>
129-
<div class="confirm" @click="clickHandler('video', 'insert')">确定</div>
128+
<div @click="closePop('videoPopShow')">{{$t('toolbar.left.cancel')}}</div>
129+
<div class="confirm" @click="clickHandler('video', 'insert')">{{$t('toolbar.left.confirm')}}</div>
130130
</div>
131131
</div>
132132
</div>
133133
<div v-show="linkPopShow" class="link-pop">
134134
<div class="dialog">
135135
<div class="input-box">
136-
<input placeholder="链接名称" v-model="linkName" type="text">
136+
<input :placeholder="$t('toolbar.left.linkName')" v-model="linkName" type="text">
137137
</div>
138138
<div class="input-box">
139-
<input placeholder="链接" v-model="linkUrl" type="text">
139+
<input :placeholder="$t('toolbar.left.link')" v-model="linkUrl" type="text">
140140
</div>
141141
<div class="btn-box">
142-
<div @click="closePop('linkPopShow')">取消</div>
143-
<div class="confirm" @click="clickHandler('link', 'insert')">确定</div>
142+
<div @click="closePop('linkPopShow')">{{$t('toolbar.left.cancel')}}</div>
143+
<div class="confirm" @click="clickHandler('link', 'insert')">{{$t('toolbar.left.confirm')}}</div>
144144
</div>
145145
</div>
146146
</div>
147147
<div v-show="filePopShow" class="file-pop">
148148
<div class="dialog">
149149
<div class="input-box">
150-
<input v-model="fileName" placeholder="附件名称" type="text">
150+
<input v-model="fileName" :placeholder="$t('toolbar.left.attachmentName')" type="text">
151151
</div>
152152
<div class="input-box file-box">
153-
<input placeholder="附件链接" v-model="fileUrl" type="text">
153+
<input :placeholder="$t('toolbar.left.attachmentLink')" v-model="fileUrl" type="text">
154154
</div>
155155
<div class="btn-box">
156-
<div @click="closePop('filePopShow')">取消</div>
157-
<div class="confirm" @click="clickHandler('file', 'insert')">确认</div>
156+
<div @click="closePop('filePopShow')">{{$t('toolbar.left.cancel')}}</div>
157+
<div class="confirm" @click="clickHandler('file', 'insert')">{{$t('toolbar.left.confirm')}}</div>
158158
</div>
159159
</div>
160160
</div>
@@ -178,7 +178,7 @@ export default {
178178
imagePopShow: false,
179179
videoPopShow: false,
180180
filePopShow: false,
181-
fileName: '【附件】',
181+
fileName: this.$t('toolbar.left.fileName'),
182182
fileUrl: '',
183183
imageName: '',
184184
imageUrl: '',

0 commit comments

Comments
 (0)