快速搞懂前端项目如何集成Markdown插件mavon |
您所在的位置：网站首页 › edittor编辑器数据回显 › 快速搞懂前端项目如何集成Markdown插件mavon |
|
前端项目集成mavon-editor的Markdown插件，并回显到网页上
目录
前端项目集成mavon-editor的Markdown插件，并回显到网页上mavon-editor简介mavon-editor的使用组件引入安装全局引入使用
mavon-editor中的图片上传方式1：每次添加图片直接触发上传方式1：保存时统一上传多张图片
修改mavon-editor的默认样式
保存mavon-editor编辑器到数据库使用mavon-editor修改上传到数据库中的数据回显mavon-editor的数据1.在vue-cli项目中回显2.在普通的H5网页中回显
问题1.回显的html显示问题，没有样式如果是在vue-cli项目中如果是在H5项目
2.mavonEditor 有序无序列表不能显示数字和小原点的问题3.mavonEditor回显图片时，图片大小超出父级div，图片溢出
mavon-editor简介
mavon-editor是一款基于Vue的markdown编辑器。 详细使用请参看mavon-editor在码云仓库的介绍：https://gitee.com/zvlance/mavonEditor mavon-editor的使用 组件引入 安装 npm install mavon-editor --save 全局引入一般使用全局引入，如果想使用其他方式引入，推荐上文的码云仓库介绍 main.js import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use(mavonEditor) //vue的使用略...... 使用使用的方式非常简单 v-model绑定的就是mavon-editor编辑器中写的md内容。 具体的API参看上文提到的码云仓库 mavon-editor中的图片上传除了图片上传需要配置图片上传的服务器地址外，其余mavon-editor编辑器中的操作基本不需要配置。 方式1：每次添加图片直接触发上传 exports default { methods: { // 绑定@imgAdd event $imgAdd(pos, $file){ // 第一步.将图片上传到服务器. var formdata = new FormData(); //这里的'image'即对应的是后台需要接受的参数名，如果有有配置，则需要和后台的参数名对应 formdata.append('image', $file); axios({ url: 'server url', //图片上传接口路径 method: 'post', data: formdata, headers: { 'Content-Type': 'multipart/form-data' }, }).then((url) => { // 第二步.将返回的url替换到文本原位置 ->  // 图片回显到编辑器添加图片的位置 $vm.$img2Url(pos, url); //或者使用以下方式回显 //this.$refs.md.$img2Url(pos, url); }) }, $imgDel(pos) { //删除图片的业务，可根据具体需求实现 }, } } 方式1：保存时统一上传多张图片 upload exports default { data(){ return { img_file: {} } }, methods: { // 绑定@imgAdd event $imgAdd(pos, $file){ // 缓存图片信息 this.img_file[pos] = $file; }, $imgDel(pos){ //删除缓存的指定的图片 delete this.img_file[pos]; }, uploadimg($e){ // 第一步.将图片上传到服务器. var formdata = new FormData(); for(let _img in this.img_file){ formdata.append(_img, this.img_file[_img]); } axios({ url: 'server url', //图片上传接口路径 method: 'post', data: formdata, headers: { 'Content-Type': 'multipart/form-data' }, }).then((res) => { /** * 例如：返回数据为 res = [[pos, url], [pos, url]...] * pos 为原图片标志（0） * url 为上传后图片的url地址 */ // 第二步.将返回的url替换到文本原位置 ->  for (var img in res) { // $vm.$img2Url 详情见本页末尾 $vm.$img2Url(img[0], img[1]); } }) }, } } 修改mavon-editor的默认样式mavon-edito编辑器默认大小样式为 min-height: 300px , min-width: 300px。可通过覆盖直接设置样式，否则默认编辑器的大小不能铺满屏幕。 保存mavon-editor编辑器到数据库v-model绑定的是mavon-editor编辑器中写的md格式的内容。 但是为了方便到时候将md格式的数据回显到网页上，我们需要将html的数据一并上传到数据库。 this.$refs.md.d_render的值为mavon-editor编辑器生成的html格式的数据（暂定为contentMarkDown），可直接保存在数据库。 this.$refs.md.d_value的值为mavon-editor编辑器生成的md格式的数据暂定为contentHtml），相当于v-model绑定的值。 使用mavon-editor修改上传到数据库中的数据 通过后台接口查询数据库存储的contentMarkDown的数据，令其等于mavon-editor绑定的v-model的值，即可实现md格式的数据回显到mavon-editor的编辑器当中。 ps：具体的查询数据库数据和数据绑定，略…重新编辑md格式的数据，上传到数据库，但是一定要注意，需要重新生成HTML格式的数据，同步更新contentHtml，否则回显的数据不能得到及时更新。 回显mavon-editor的数据 1.在vue-cli项目中回显可以直接利用mavon-editor的v-html属性回显，其中contentHtml即为当时保存在数据库中mavon-editor生成的html数据。 向后台发送请求，查询contentHtml，与v-html进行绑定，即可实现回显。 2.在普通的H5网页中回显还是先查询数据库中contentHtml的数据，然后利用jquery的html()方法或者js的innerHTML属性直接回显html数据。 $("#blog-content").html(blogDetail.blogInfos.blog.contentHtml); 问题 1.回显的html显示问题，没有样式 如果是在vue-cli项目中在你需要展示html的模块引入import "mavon-editor/dist/css/index.css" 如果是在H5项目使用cdn引入样式 cdn样式地址：https://cdnjs.com/libraries/github-markdown-css 2.mavonEditor 有序无序列表不能显示数字和小原点的问题问题原因：ul、li、ol等标签的样式被覆盖了 解决：在这个div中重新设置样式 /*解决mavonEditor 有序无序列表不显示 common.css样式冲突*/ ul { list-style-type: disc; } ol { list-style-type: decimal; } li { list-style: inherit; } 3.mavonEditor回显图片时，图片大小超出父级div，图片溢出给回显数据的div的所有img设置max-width,如果超出max-width则图片会进行等比例缩放（一般设置比父级div小一些即可） 我的父级div的id是blog-content #blog-content img { max-width: 800px; } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |