代码拉取完成,页面将自动刷新
基于vue-markdown开源项目的二次开发
主要增加了一个支持图片上传接口方法 GitHub地址
一款使用marked和highlight.js开发的一款markdown编辑器,目前只支持在vue项目中使用。
编辑器涵盖了常用的markdown编辑器功能,工具栏可自定义配置,也可进行二次开发。
效果
npm i vue-meditors
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>
通过保存按钮触发点击事件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);
}
通过点击图片图标会弹出选择图片对话框,选择图片后会传递一个on-change事件给我们,所以我们只要监听on-change事件即可,它会将文件对象传递给我们
changeImg(files,callback){
console.log(files)
//图片上传
....
var url = data.url;
callback(url);//通过callback回调将图片地址返回
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型