3 Star 8 Fork 2

坏菠萝 / vue-meditors

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue-meditors编辑器

基于vue-markdown开源项目的二次开发

vue-markdown项目地址

主要增加了一个支持图片上传接口方法 GitHub地址

1.简介

一款使用marked和highlight.js开发的一款markdown编辑器,目前只支持在vue项目中使用。

编辑器涵盖了常用的markdown编辑器功能,工具栏可自定义配置,也可进行二次开发。

效果

enter image description here

2.安装

npm i vue-meditors

3.在项目中使用

import MarkDown from 'vue-meditors'

...

components:{
    	MarkDown//引入组件
	},
data() {
      return {
      	placeholderValue:"请输入问题描述",//placeholder的内容
        initialValue: "",//markdown默认值
        theme: 'OneDark'//主题
      };
    },
...

<template>
	<mark-down @on-save="save" ref="md" @on-change="changeImg"
	:theme="theme" :initialValue="initialValue" :placeholderValue="placeholderValue"/>

	<div @click="saveMd()">保存</div>
</template>

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回调将图片地址返回
	      }

空文件

简介

基于开源项目vue-markdown开发的一款markdown编辑器,支持代码高亮显示和图片上传 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/wanglinyong/vue-meditors.git
git@gitee.com:wanglinyong/vue-meditors.git
wanglinyong
vue-meditors
vue-meditors
master

搜索帮助

14c37bed 8189591 565d56ea 8189591