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>

图片上传:

用 mavon-editor 自带的 imgAdd 属性将图片上传到服务器,将返回的地址替换到md当中
 
<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)编辑器,文档的更多相关文章

  1. 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` ...

  2. Markdown写接口文档,自动添加TOC

    上回说到,用Impress.js代替PPT来做项目展示.这回换Markdown来做接口文档好了.(不敢说代替Word,只能说个人感觉更为方便)当然,还要辅之以Git,来方便版本管理. Markdown ...

  3. 基于 Markdown 编写接口文档

    最近公司开发项目需要前后端分离,这样话就设计到后端接口设计.复杂功能需要提供各种各样的接口供前端调用,因此编写API文档非常有必要了 网上查了很多资料,发现基于Markdown编写文档是一种比较流行而 ...

  4. 如何快速实现 markdown 转 HTML 文档?

    我想要在 Github 上开一个主题博客,我希望通过 Markdown 语法写作,然后生成 HTML 并附带自定义样式显示在网页上. 我找到了 gulp-markdown 这个库,看起来符合我的需求场 ...

  5. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  6. 使用 VS Code + Markdown 编写 PDF 文档

    背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...

  7. vue 学习一些好的文档网址推荐

    相关文章   1. vue.js 2.x 文档  http://cn.vuejs.org https://vue.docschina.org/ 2. npm https://www.npmjs.com ...

  8. 使用Spec Markdown 编写手册文档

    Spec Markdown 是一个基于markdown 的文档编写工具,安装简单,可以让我们编写出专业的文档 参考项目 https://github.com/rongfengliang/spec-md ...

  9. 使用Windows Debugger调试托管代码----引用自官方帮助文档

    以下文字引用在Windbg的帮助文档.觉得对初次调试托管代码,非常有用,故粘贴至此. ========================================================= ...

  10. Hi,给他介绍一款markdown的帮助文档生成器

    当今大多数的团队都实现了前.后端分支.前端与后端的沟通都是通过接口来实现的(一般情况下都是webapi接口).这种情况你肯定需要一个接口查询的帮助文档,这个当然用swagger都可以实现.但做为前端开 ...

随机推荐

  1. Golang 动态脚本调研

    一.技术背景 1.1 程序的动态链接技术 在实际开发过程中,我们经常需要动态地更新程序的功能,或者在不变更程序主体文件的情况下添加或者更新程序模块. 1.1.1 动态链接库 首先最常见的是window ...

  2. Java 在Word文档中添加艺术字

    艺术字是以普通文字为基础,经过专业的字体设计师艺术加工的变形字体.字体特点符合文字含义.具有美观有趣.易认易识.醒目张扬等特性,是一种有图案意味或装饰意味的字体变形,常用来创建旗帜鲜明的标志或标题. ...

  3. Linux之Samba服务器搭建

    一,samba的基本概念 SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种通信协议,它为局域网内的不同计算机之间提供文件及打印机等资源的共享服务. ...

  4. KingbaseES集群管理维护案例之---备库checkpoint分析

    ​ 数据库异常关闭时,数据库关闭时来不及或者没机会做checkpoint,则需要从上一个一致性检查的开始恢复.KingbaseES备机checkpoint是不能产生checkpoint WAL日志条目 ...

  5. KingbaseES V8R6集群外部备份案例

    案例说明: 本案例采用sys_backup.sh执行物理备份,备份使用如下逻辑架构:集群采用CentOS 7系统,repo采用kylin V10 Server. 一主一备+外部备份 此场景为主备双机常 ...

  6. Springboot mybatis总结

    mybatis 总结 属性配置 1. mybatis.configuration.mapUnderscoreToCamelCase=true mapUnderscoreToCamelCase用于映射表 ...

  7. 在Ubuntu上安装Odoo时遇到的问题

    这两天开始看<Odoo快速入门与实践  Python开发ERP指南>(刘金亮 2019年5月第1版 机械工业出版社).试着在Ubuntu上安装Odoo,遇到很多问题,通过在网上查找,都已解 ...

  8. Chrome 浏览器缓存的问题

    浏览器缓存的问题 Chrome 在浏览器中设置: 1 Ctrl + Shift + Delete 2 Ctrl + F5 强制刷新 3 F12 打开控制台 ---> Network ---> ...

  9. 第一个Django应用 - 第一部分:请求与响应

    一. 新建项目 进入你期望的项目保存目录,运行下面的命令: $ django-admin startproject mysite 这将在目录下生成一个mysite目录,也就是你的这个Django项目的 ...

  10. Prometheus告警处理

    在Prometheus Server中定义告警规则以及产生告警,Alertmanager组件则用于处理这些由Prometheus产生的告警.Alertmanager即Prometheus体系中告警的统 ...