【源码】基于 Vue 框架的 Markdown 文本编辑器

项目简介

本项目名为 vue2-mditor，是基于 Vue.js 框架开发的简洁 Markdown 文本编辑器。它在 mditor 的基础上进行改造，支持插入 base64 格式图片。

项目的主要特性和功能

1. 支持 Markdown 语法编辑，方便用户撰写 Markdown 文档。
2. 可初始化编辑器文本内容，满足不同场景的初始数据需求。
3. 能获取编辑器中的原始 Markdown 文本，便于后续处理。
4. 设计简洁，易于使用和集成到 Vue 项目中。

安装使用步骤

1. 确保用户已下载本项目的源码文件。
2. 在项目根目录下，打开终端并运行 npm i 来安装项目所需依赖。
3. 依赖安装完成后，运行 npm run dev 启动开发服务器。
4. 在需要使用编辑器的 .vue 组件中，按以下步骤操作：
   • 导入 vue2-mditor 编辑器： javascript import editor from "vue2-mditor";
   • 使用组件的 components 属性，将 editor 注册为私有组件： javascript components: { editor }
   • 将注册的组件名称，以标签形式，引入到对应的 template 中： html <editor :initVal="'**hello world**'" ref="editor"></editor>
   • 若要初始化文本，为属性绑定 :initVal 并提供字符串值： html <editor :initVal="'**这是初始化的文本内容**'"></editor>
   • 若要获取原始的 markdown 文本：
     • 添加 ref 属性： html <editor ref="editor"></editor>
     • 使用 $refs.引用名称.getValue() 获取文本值： javascript methods: { getVal() { var txt = this.$refs.editor.getValue(); console.log(txt); } }

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】