vue引用MarkDown(mavonEditor)编辑器,文档
mavonEditor
Install mavon-editor (安装)
npm install mavon-editor --save
如何引入:
全局引用:
// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
不全局引用,在组件中引用 :
<template>
<div>
<div>
<mavon-editor class="comments"
v-model="content"
:subfield="false"
ref="md"
:toolbars="markdownOption"
@change="change"
/>
<div>
<button @click="submit">提交</button>
</div>
</div>
</div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
data(){
return{
content:'', // 输入的markdown
html:'', // 及时转的html
markdownOption:{ //自定义文本标签
bold: true, // 粗体
italic: true,// 斜体
strikethrough: true, // 中划线
underline: true, // 下划线
}
}
}
components:{
mavonEditor,
},
methods:{
// 所有操作都会被解析重新渲染
change(value, render){
// render 为 markdown 解析后的结果[html]
this.html = render;
},
submit(){
console.log("提交");
},
}
}
</script>
图片上传:
<template>
<div>
<div>
<mavon-editor class="comments"
v-model="content"
:subfield="false"
@imgAdd="$imgAdd"
ref="md"
:toolbars="markdownOption"
@change="change"
/>
<div>
<button @click="submit">提交</button>
</div>
</div>
</div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
data(){
return{
content:'', // 输入的markdown
html:'', // 及时转的html
markdownOption:{ //自定义文本标签
bold: true, // 粗体
italic: true,// 斜体
strikethrough: true, // 中划线
underline: true, // 下划线
}
}
}
components:{
mavonEditor,
},
methods:{
// 所有操作都会被解析重新渲染
change(value, render){
// render 为 markdown 解析后的结果[html]
this.html = render;
},
submit(){
console.log("提交");
},
// 将图片上传到服务器,返回地址替换到md中
$imgAdd(pos, $file){
console.log($file)
let formdata = new FormData();
formdata.append('file',$file)
this.$axios.post('上传服务器链接', formdata).then(res => {
console.log(res.data.url);
this.$refs.md.$img2Url(pos, res.data.url);
}).catch(err => {
console.log(err)
})
},
}
}
</script>
图片删除:
图片删除的逻辑实现和代码都很简单:前端传给后端url全路径,后端接收并调用删除方法即可。
前端代码:
imgDel(pos){
//通过pos[0]取出文件路径。
let url = pos[0]
/*调用axios发送请求。此处自己自行创建了一个header键值进行数据传递*/
axios({
url:'http://localhost/api/file/imgDel',
method:'POST',
headers:{'Img-Delete': url},
}).then().catch(error=>{this.$message({message:error,type:'error',showClose:true,center:true})})
}
对应后端:
@PostMapping("imgDel")
public Result articleImgDel(@RequestHeader("Img-Delete")String url){
if(url.isEmpty()){
return Result.fail(ErrorCode.PARAMS_ERROR.getCode(), ErrorCode.PARAMS_ERROR.getMsg());
}
qiniuUtils.delete(url); //删除云服务器文件
return Result.success(null);
}
vue引用MarkDown(mavonEditor)编辑器,文档的更多相关文章
- vue mand-mobile按2.0文档默认安装的是1.6.8版本
vue mand-mobile按2.0文档默认安装的是1.6.8版本 npm list mand-mobilebigbullmobile@1.0.0 E:\webcode\bigbullmobile` ...
- Markdown写接口文档,自动添加TOC
上回说到,用Impress.js代替PPT来做项目展示.这回换Markdown来做接口文档好了.(不敢说代替Word,只能说个人感觉更为方便)当然,还要辅之以Git,来方便版本管理. Markdown ...
- 基于 Markdown 编写接口文档
最近公司开发项目需要前后端分离,这样话就设计到后端接口设计.复杂功能需要提供各种各样的接口供前端调用,因此编写API文档非常有必要了 网上查了很多资料,发现基于Markdown编写文档是一种比较流行而 ...
- 如何快速实现 markdown 转 HTML 文档?
我想要在 Github 上开一个主题博客,我希望通过 Markdown 语法写作,然后生成 HTML 并附带自定义样式显示在网页上. 我找到了 gulp-markdown 这个库,看起来符合我的需求场 ...
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- 使用 VS Code + Markdown 编写 PDF 文档
背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...
- vue 学习一些好的文档网址推荐
相关文章 1. vue.js 2.x 文档 http://cn.vuejs.org https://vue.docschina.org/ 2. npm https://www.npmjs.com ...
- 使用Spec Markdown 编写手册文档
Spec Markdown 是一个基于markdown 的文档编写工具,安装简单,可以让我们编写出专业的文档 参考项目 https://github.com/rongfengliang/spec-md ...
- 使用Windows Debugger调试托管代码----引用自官方帮助文档
以下文字引用在Windbg的帮助文档.觉得对初次调试托管代码,非常有用,故粘贴至此. ========================================================= ...
- Hi,给他介绍一款markdown的帮助文档生成器
当今大多数的团队都实现了前.后端分支.前端与后端的沟通都是通过接口来实现的(一般情况下都是webapi接口).这种情况你肯定需要一个接口查询的帮助文档,这个当然用swagger都可以实现.但做为前端开 ...
随机推荐
- 第二十五篇:vue-cli
好家伙,感觉好像摸到一点核心了, 什么是vue-cli? 1.vue-cli官方提供的一个脚手架,用于快速生成一个vue模板, 预先定义好目录结构以及基础代码 2.什么是脚手架? (1)做电梯井抹灰. ...
- helm安装csi-driver-smb-v1.9.0
Application version v1.9.0 Chart version v1.9.0 获取chart包 helm repo add csi-driver-smb https://raw.gi ...
- KingbaseES的SQL语句-CTE递归
背景 从上下级关系表中,任意一个节点数据出发,可以获得该节点的上级或下级.CTE的递归语法,或者 connect by 与 start with的 查询语法,能够实现这个需求. 当我们需要制作上下级关 ...
- KingbaseES 命令行安装数据库
关键字: KingbaseES.Linux.x86-64 一.安装前环境准备 1.硬件环境支持 ` 金仓数据库管理系统KingbaseES支持X86.X86_64,同时支持龙芯.飞腾等国产CPU硬 ...
- KingbaseES R6 集群主机锁冲突导致的主备切换案例
案例说明: 主库在业务高峰期间,客户执行建表等DDL操作,主库产生"AccessExclusiveLock "锁,导致大量的事务产生锁冲突,大量的会话堆积,客户端session ...
- 使用Dockfile构建mysql镜像与初始化运行mysql容器
使用docker 构建mysql镜像,并在容器初次创建时初始化数据 Dockerfile FROM mysql:5.7.23 MAINTAINER gradyjiang "jiangzhon ...
- Django 使用Pycharm 创建工程
一.Pycharm 创建Django 工程 事实上,我们一般不使用命令行,而是直接在Pycharm 中创建Django 项目. Pycharm 是进行Django 开发的最佳 IDE,请大家自行安装, ...
- 图解 Kubernetes Service
文章转载自:https://www.qikqiak.com/post/visually-explained-k8s-service/ 原文链接:https://medium.com/swlh/kube ...
- 迁移阿里云上的ECS操作说明
背景: 1.公司测试服务器快要到期了,但是续费太贵,就想用另一个阿里云账号下的服务器作为测试服务器. 2.测试服务器原在阿里云账号A下,要迁移到阿里云账号B下 3.该测试服务器有一个系统盘和俩数据盘 ...
- reflect反射
考虑有这么一个场景:需要根据用户输入url的不同,调用不同的函数,实现不同的操作,也就是一个WEB框架的url路由功能.路由功能是web框架里的核心功能之一,例如Django的urls. 首先,有一个 ...