vue的markdown编辑器插件比对

vue的markdown编辑器插件比对

文章说明

文章比对 md-editor-v3、vditor 这两个插件的使用及效果体验

md-editor-v3的使用及效果展示

安装

powershell 复制代码
npm install md-editor-v3

使用

html 复制代码
<script setup>
import {reactive} from "vue";
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const data = reactive({
  text: "",
});
</script>

<template>
  <MdEditor toolbarsExclude="['github']" v-model="data.text" style="height: 100vh; width: 100vw"/>
</template>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>

效果展示

附注说明:直接使用vue3,vue@cli运行项目会报错,需要在babel.config.js里面加上内容 plugins: ["@babel/plugin-transform-private-methods"]

javascript 复制代码
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: ["@babel/plugin-transform-private-methods"]
}

vditor的使用及效果展示

安装

powershell 复制代码
npm i vditor --save

使用

html 复制代码
<script setup>
import Vditor from 'vditor'
import 'vditor/dist/index.css';
import {onMounted, ref} from 'vue';

const vditor = ref()

onMounted(() => {
  vditor.value = new Vditor('vditor', {
    height: '100vh',
    width: '100vw'
  });
});
</script>

<template>
  <div id="vditor"></div>
</template>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>

效果展示

相关推荐
影子信息13 分钟前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
拜无忧17 分钟前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css
徐小夕30 分钟前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing112537 分钟前
界面规范8-文字
前端·javascript·html
盛夏绽放38 分钟前
抽成独立组件库:微前端架构下公共组件共享的最佳实践
前端·有问必答
江拥羡橙1 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
小菜全1 小时前
打包 Uniapp
javascript·vue.js·html5
itslife1 小时前
实现 Promise
前端·javascript
小鱼儿亮亮1 小时前
canvas中常见问题的解决方法及分析,踩坑填坑经历
前端·canvas
一枚前端小能手1 小时前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack