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

简介: v-md-editor(markDown编辑器)使用教程

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

安装

# 使用 npm
npm i @kangc/v-md-editor -S

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>

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

1a7e19a6b7af452881e6c6cb10e5049e.png

这里会发现有些误差,调整一下即可

还有一点要注意的是如果直接将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.fileName
    insertImage({
        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>

效果如下:

f6ccbbc4675d486784621c0a8cfd582c.gif

这样一个组件就已经封装好了

以下附上完整代码:

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.fileName
    insertImage({
        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>
相关文章
|
4月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
234 1
Linux系统之部署轻量级Markdown文本编辑器
|
25天前
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
128 31
|
3月前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
207 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
9月前
|
存储 Linux 编译器
vim编辑器和gcc/g++编辑器的使用讲解
vim编辑器和gcc/g++编辑器的使用讲解
182 2
|
9月前
|
Linux 编译器 开发工具
Linux:详解(yum的使用、vim编辑器命令集合以及gcc/g++编译器的使用)
Linux:详解(yum的使用、vim编辑器命令集合以及gcc/g++编译器的使用)
213 1
|
7月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
8月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
98 5
|
8月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解
|
7月前
|
Linux 开发工具 数据安全/隐私保护
【linux】如何优雅的使用vim编辑器
【linux】如何优雅的使用vim编辑器
|
8月前
|
缓存 人工智能 Linux
【Linux】--- 详解Linux软件包管理器yum和编辑器vim
【Linux】--- 详解Linux软件包管理器yum和编辑器vim
112 0

热门文章

最新文章