Vue3——v-md-editor安装使用教程

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

EditorMarkdown.vue页面用来封装此编辑器组件
Test.vue作为接受EditorMarkdown.vue的父组件，当测试页使用
路由部分要放入test.vue

main.js部分全局引入组件

import EditorMarkdown from '@/components/EditorMarkdown.vue';
app.component('EditorMarkdown',EditorMarkdown)

EditorMarkdown页面引入

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:01:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template><!-- 这里需要注意一下，官网上给的引入方式需要改一下，应该是没有更新导致的；还有一点就是modelValue需要添加括号，否则找不到这个值 --><VueMarkdownEditor v-model="(modelValue)" :height="height+'px'"></VueMarkdownEditor>
</template><script setup>
import VueMarkdownEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";import Prism from "prismjs";VueMarkdownEditor.use(vuepressTheme, {Prism,
});const props = defineProps({modelValue: {type: String,default: "",},height: {type: Number,default: 500,},
});
</script><style>
</style>

官网给出的教程图片如下：

这里会发现有些误差，调整一下即可
还有一点要注意的是如果直接将props中的值给到v-model需要加上括号，下面是代码片段
Test.vue

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:03:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template><editor-markdown></editor-markdown>
</template><script setup>
import { ref,reactive,onMounted } from "vue";
</script>
<style>
</style>

图片上传

 <VueMarkdownEditor v-model="(modelValue)" :disabled-menus="[]" :include-level="[1,2,3,4,5,6]"@upload-image="handleUploadImage"></VueMarkdownEditor>

const handleUploadImage = async(event, insertImage, files) => {console.log(files);// 这里做自定义图片上传let result = await proxy.Request({url:'/file/Image',dataType:'file',params:{file:files[0],type:1,}})if (!result) {return}const url = proxy.globaInfo.imageUrl+ result.data.fileNameinsertImage({url:url,desc: '博客图片',// width: 'auto',// height: 'auto',});
};

测试双向绑定

  <VueMarkdownEditor v-model="(modelValue)"  @change="change" :height="height+'px'"></VueMarkdownEditor>

// 子传父
const emit = defineEmits()
const change=(markdownContent,htmlContent)=>{emit('update:modelValue',markdownContent)emit('htmlContent',htmlContent)
}

test.vue进行测试

<template><editor-markdown v-model="markdownContent"></editor-markdown>{{ markdownContent }}
</template><script setup>
import { ref,reactive,onMounted } from "vue";
const markdownContent = ref('# test')
</script>
<style>
</style>

效果如下：

这样一个组件就已经封装好了
以下附上完整代码：
EditorMarkdown.vue

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:01:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template><!-- :disabled-menus="[]"把禁用的title放在此数组中:include-level="[1,2,3,4,5,6]" 点击目录导航的层级@upload-image="handleUploadImage"图片上传@change="change"双向绑定效果--><VueMarkdownEditor v-model="(modelValue)" :disabled-menus="[]" :include-level="[1,2,3,4,5,6]"@upload-image="handleUploadImage" @change="change" :height="height+'px'"></VueMarkdownEditor>
</template><script setup>
import VueMarkdownEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";import Prism from "prismjs";
import { getCurrentInstance } from "vue";
const {proxy} = getCurrentInstance()
VueMarkdownEditor.use(vuepressTheme, {Prism,
});const props = defineProps({modelValue: {type: String,default: "",},height: {type: Number,default: 500,},
});const emit = defineEmits()
const change=(markdownContent,htmlContent)=>{emit('update:modelValue',markdownContent)emit('htmlContent',htmlContent)
}const handleUploadImage = async(event, insertImage, files) => {console.log(files);// 这里做自定义图片上传let result = await proxy.Request({url:'/file/uploadImage',dataType:'file',params:{file:files[0],type:1,}})if (!result) {return}const url = proxy.globaInfo.imageUrl+ result.data.fileNameinsertImage({url:url,desc: '博客图片',// width: 'auto',// height: 'auto',});
};
</script><style>
</style>

Test.vue

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:03:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template><editor-markdown v-model="markdownContent"></editor-markdown>{{ markdownContent }}
</template><script setup>
import { ref,reactive,onMounted } from "vue";const markdownContent = ref()
</script>
<style>
</style>

Vue3——v-md-editor(markDown编辑器)使用教程相关推荐

SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录一.技术选型及分支部署二.集成手册 2 ...
Typora ——一款Markdown编辑器入门教程
Typora --Markdown编辑器入门教程附上目录: 文章目录 Typora --Markdown编辑器入门教程一. 序二.前言那么,什么是富文本格式?什么是Markdown? **Ma ...
editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
Typora颠覆写作体验的极简好用 Markdown 编辑器基本设置教程
Typora是一款Markdown编辑器. 无论你是建网站写博客.每天写日记.自媒体写稿.办公.程序员写代码文档等等,Typora 都能满足你的要求. Typora基本设置教程 1."通用& ...
CSDN Markdown编辑器使用教程
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
MWeb Pro for Mac(苹果电脑最好用的Markdown编辑器)安装教程
MWeb Pro是一款专业的Mac平台上的Markdown编辑器,可以帮助用户更加高效地书写和排版文本内容,支持多种文本格式的导入和导出,如HTML.RTF.PDF等,还支持实时预览和代码高亮等功能, ...
CSDN Markdown编辑器编辑教程
目录快捷键文字样式设置(字体, 大小, 颜色, 高亮底色)内嵌HTML 表格定义列表代码块脚注数学公式 UML 图: 离线写博客常见颜色 @[TOC](目录) 快捷键 - 加粗 `Ctr ...
Editor.md 的Markdown 编辑器集成与使用（全）
在这之前使用的编辑器是ueditor,是百度的:现在记录一下已经集成有段时间的 Editor.md 的 md 编辑器,确实好用! 在这之前,有个问题,数据库是保存 md 的还是保存 html 的,在网 ...
editor.md国产markdown编辑器使用实例
插件名:editor.md 下载地址:https://pandao.github.io/editor.md/examples/index.html 适用版本:version v1.5.0 日期:201 ...

Vue3——v-md-editor(markDown编辑器)使用教程

Vue3——v-md-editor安装使用教程

安装

Vue3——v-md-editor(markDown编辑器)使用教程相关推荐

最新文章

热门文章