刘洋博客
猥琐发育别浪
使用md-editor-v3
admin ( 3小时前)| 224次阅读

安装

yarn add md-editor-v3
npm install md-editor-v3 --save

使用

vue3 ts 中使用

<MdEditor :toolbarsExclude="['github','prettier','mermaid', 'save']" v-model="dataForm.content" @on-upload-img="onUploadImg"></MdEditor>

import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'		

nuxt3中前端展示

用法都一样
theme 主题色
previewOnly 只读模式

<MdEditor
      :theme="color.value"
      class="p-10"
      :previewOnly="true"
      v-model="info.content"
    ></MdEditor>
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";

toolbarsExclude

选择不需要展示的工具栏

属性

bold: '加粗',
underline: '下划线',
italic: '斜体',
strikeThrough: '删除线',
title: '标题',
sub: '下标',
sup: '上标',
quote: '引用',
unorderedList: '无序列表',
orderedList: '有序列表',
codeRow: '行内代码',
code: '块级代码',
link: '链接',
image: '图片',
table: '表格',
revoke: '后退',
next: '前进',
save: '保存',
prettier: '美化',
pageFullscreen: '浏览器全屏',
fullscreen: '屏幕全屏',
preview: '预览',
htmlPreview: 'html代码预览',
catalog: '目录',
github: '源码地址'

注意

使用md排版内容格式的使用
previewOnly属性,作为展示时,不会有编辑tab

共 0 条评论
期待你的高见