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>

效果展示

相关推荐
zenithdev17 分钟前
Sublime Text下载教程Sublime Text 4 保姆级安装步骤(附安装包)
其他·编辑器·sublime text
祝余呀16 分钟前
HTML初学者第四天
前端·html
浮桥2 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥2 小时前
Vue框架之钩子函数详解
vue.js
七夜zippoe2 小时前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆2 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
Hockor3 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军3 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到113 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter