轻松记录您
灵感和创意

vue markdown安装使用

使用npm方式引入
1、npm安装
vue项目中,确保npm,node版本没有问题,直接用npm安装,

npm install vue-meditor –save
2、项目中使用
注意,count初始化赋值的时候,如果是后台传输数据,一定坐下异常处理。否则如果count为null,组件会报错。

//简单版
import Markdown from ‘vue-meditor’
export default {
name: ‘markdownTest’,
data: {
count: ‘测试预览’
},
components: {
Markdown
}
}
//html
<MarkdownPro
v-model=”count”
:height=”400″
@on-paste-image=”onPasteImage”
@on-ready=”onReady”
@on-copy=”onCopy”
@on-save=”onSave”
theme=”light”
/>

//专业版
import { MarkdownPro } from ‘vue-meditor
export default {
name: ‘markdownTest’,
data: {
count: ‘测试预览’
},
components: {
MarkdownPro
},
methods: {
onReady (data) {
console.log(data)
},
onCopy (text) {
console.log(text)
},
onPasteImage (file) {
console.log(file)
},
onSave (data) {
console.log(data)
},
}
}
//html
<MarkdownPro
v-model=”count”
:height=”400″
@on-paste-image=”onPasteImage”
@on-ready=”onReady”
@on-copy=”onCopy”
@on-save=”onSave”
theme=”light”
/>

//预览版
import { MarkdownPreview } from ‘vue-meditor’
export default {
name: ‘markdownTest’,
data: {
count: ‘测试预览’
},
components: {
MarkdownPreview
}
}
//html
<MarkdownPro
v-model=”count”
:height=”400″
theme=”light”
/>
2.2、js安装包引用
1、下载github代码
git clone https://github.com/zhaoxuhui1122/vue-markdown.git
2、复制文件
复制src文件夹下内容至components文件夹下

//简单版
import Markdown from ‘@/components/markdown/…’;
//专业版
import MarkdownPro from ‘@/components/markdown/pro’;
//预览组件
import MarkdownPreview from ‘@/components/markdown/preview’;

 

最后看下效果图,左边是富文本编辑器,右边是设置了属性,预览功能,边写边预览

未经允许不得转载:坚果云Markdown编辑器 » vue markdown安装使用
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍