# vue-meditors **Repository Path**: wanglinyong/vue-meditors ## Basic Information - **Project Name**: vue-meditors - **Description**: 基于开源项目vue-markdown开发的一款markdown编辑器,支持代码高亮显示和图片上传 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 9 - **Forks**: 2 - **Created**: 2019-06-14 - **Last Updated**: 2024-05-30 ## Categories & Tags **Categories**: vue-extensions, markdown-utils **Tags**: None ## README # vue-meditors编辑器 基于vue-markdown开源项目的二次开发 [vue-markdown项目地址]( https://zhaoxuhui1122.github.io/vue-markdown/) **主要增加了一个支持图片上传接口方法** [GitHub地址]( https://github.com/wanglinyong/vue-meditors) ### 1.简介 **一款使用marked和highlight.js开发的一款markdown编辑器,目前只支持在vue项目中使用。** **编辑器涵盖了常用的markdown编辑器功能,工具栏可自定义配置,也可进行二次开发。** **效果** ![enter image description here](https://images.gitbook.cn/ed518110-8e6a-11e9-bc16-45471ed7a203) ### 2.安装 ``` npm i vue-meditors ``` ### 3.在项目中使用 ``` import MarkDown from 'vue-meditors' ... components:{ MarkDown//引入组件 }, data() { return { placeholderValue:"请输入问题描述",//placeholder的内容 initialValue: "",//markdown默认值 theme: 'OneDark'//主题 }; }, ... ``` ### 4.获取markdown编辑器内容 通过保存按钮触发点击事件saveMd,从而调用其子组件的保存方法handleSave ``` saveMd(){ console.log(this.$refs.handleSave) this.$refs.md.handleSave(); } ``` 然后会触发一个回调函数on-save,并返回一个对象,里面包含了三个属性 ``` value // 编辑器输入的原始内容 html // 右侧现实的问转义后的内容 theme // 保存时的主题名字 ``` 我们监听on-save事件,这里对应我们的save方法,从而获取markdown编辑器的内容 ``` save(content){ console.log("原始内容:"+content.value); console.log("转义后的内容:"+content.html); console.log("主题theme:"+content.theme); } ``` ### 5.图片上传 通过点击图片图标会弹出选择图片对话框,选择图片后会传递一个on-change事件给我们,所以我们只要监听on-change事件即可,它会将文件对象传递给我们 ``` changeImg(files,callback){ console.log(files) //图片上传 .... var url = data.url; callback(url);//通过callback回调将图片地址返回 } ```