在Vue 中使用 Vditor

官方文档 Vditor

安装

npm install vditor --save

引入

import Vditor from ‘vditor’
import ‘vditor/dist/index.css’

使用

new Vue({el: '#app',data: {contentEditor: '',//组件实例},mounted () {this.contentEditor = new Vditor('vditor', {height: 360, //设置高度toolbarConfig: {pin: true,},cache: {enable: false,},after: () => {//渲染完成 触发方法this.contentEditor.setValue('hello, Vditor + Vue!')},})},
})

markdown编辑分为3种模式
options中mode字段可选值

sv (分屏预览)
ir (即时渲染)
wysiwyg (所见即所得)

完整示例

<template><div class="plugin-markdown"><div class="plugin-markdown-header"><span class="edit">编辑</span><span class="prevew">预览</span></div><divid="vditor"name="description"></div></div>
</template><script>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
export default {name: 'MarkDown',props: {actionItem: {type: Object,default: () => {}}},data() {return {contentEditor: {}}},mounted() {this.contentEditor = new Vditor('vditor', {height: 360,cache: {enable: false},value: this.actionItem.pluginAction.message,mode: 'sv',preview: {mode: 'both'},after: () => {// 渲染完成后触发  回显用if (this.actionItem.pluginAction.message) {this.contentEditor.setValue(this.actionItem.pluginAction.message)}},input: () => {//输入时触发if (this.contentEditor.getHTML()) {this.actionItem.pluginAction.message = this.contentEditor.getValue()} else {this.actionItem.pluginAction.message = ''}}})}
}
</script><style lang="scss">
.plugin-markdown {width: 100%;em {font-style: italic;}ol {list-style-type: decimal;}a {outline: 0;text-decoration: none;color: #4285f4;}&-header {width: 100%;display: flex;border: 1px solid #d1d5da;border-bottom: unset;.edit,.prevew {display: inline-block;padding: 10px 0px 10px 16px;border-right: 1px solid #d1d5da;font-size: 16px;color: #272e3b;}.edit {width: 545.91px;}.prevew {flex: 1;border-right: 0;}}.vditor-preview__action {display: none;}
}
</style>

如何在vue项目中使用markdown编辑器相关推荐

如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
如何在Vue项目中应用TypeScript？
一.前言在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, # npm 下载 npm i vue-property-decorator -s # ...

如何在vue项目中使用markdown编辑器

在Vue 中使用 Vditor

如何在vue项目中使用markdown编辑器相关推荐

最新文章

热门文章