网站标签设置,杭州网站优化多少钱,有没有做校园文化的网站,wordpress图片体积参考网站#xff1a; 安装使用参考#xff1a;vue2-常用富文本编辑器使用介绍 html网页展示、编辑器回显二次编辑参考#xff1a;快速搞懂前端项目如何集成Markdown插件mavon-editor#xff0c;并回显数据到网页
安装命令
npm install mavon-editor2.9.1 --save全局配置 …参考网站 安装使用参考vue2-常用富文本编辑器使用介绍 html网页展示、编辑器回显二次编辑参考快速搞懂前端项目如何集成Markdown插件mavon-editor并回显数据到网页
安装命令
npm install mavon-editor2.9.1 --save全局配置
修改main.js文件添加如下配置
import mavonEditor from mavon-editor
import mavon-editor/dist/css/index.cssVue.use(mavonEditor)页面中使用
html部分
mavon-editorplaceholder输入文章内容...styleheight: 500pxrefmdv-modelarticle.contentMdimgDelimgDelimgAddimgAdd
!-- 左工具栏后加入自定义按钮 --template slotleft-toolbar-afterel-dropdownspan classel-dropdown-linki classop-icon fa el-icon-video-camera title上传视频/i/spanel-dropdown-menu slotdropdownel-dropdown-itemel-uploadstyledisplay: inline-block:show-file-listfalserefuploadnamefiledatasaction:http-requestuploadVideomultiplespan上传视频/span/el-upload/el-dropdown-itemel-dropdown-itemdiv clickdialogVisible true添加视频地址/div/el-dropdown-item/el-dropdown-menu/el-dropdown/template
/mavon-editordata部分
article: {contentMd: ,
},methods部分
imgAdd: function (pos, $file) {var formdata new FormData();formdata.append(multipartFile, $file);upload(formdata).then((res) {this.$refs.md.$img2Url(pos, res.data.url);}).catch((err) {console.log(err);});
},
imgDel: function (filename) {//delBatchFile(filename[0].split(this.img)[1])
},
//上传视频
uploadVideo(param) {this.openLoading();this.files param.file;var formData new FormData();formData.append(multipartFile, this.files);upload(formData).then((res) {const $vm this.$refs.md;// 将文件名与文件路径插入当前光标位置这是mavon-editor 内置的方法$vm.insertText($vm.getTextareaDom(), {prefix: video height100% width100% controls autoplay src${res.data.url}/video,subfix: ,str: ,});this.loading.close();}).catch((err) {this.loading.close();});
},相关事件介绍 1.imgAdd“imgAdd”将图片上传到服务器返回地址替换到md中 2.imgDel“imgDel”删除图片某些业务场景下需要删除服务器端图片时需要此方法 3.uploadVideo上传视频
如何回显
this.$refs.md.d_render的值为mavon-editor编辑器生成的html格式的数据暂定为contentHtml可直接保存在数据库。
this.$refs.md.d_value的值为mavon-editor编辑器生成的md格式的数据暂定为contentMarkDown相当于v-model绑定的值。
网页中回显
1.在vue-cli项目中回显
可以直接利用mavon-editor的v-html属性回显其中contentHtml即为当时保存在数据库中mavon-editor生成的html数据。
div classmavonEditormavon-editor v-htmlcontentHtml/
/div向后台发送请求查询contentHtml与v-html进行绑定即可实现回显。
2.在普通的H5网页中回显
还是先查询数据库中contentHtml的数据然后利用jquery的html()方法或者js的innerHTML属性直接回显html数据。
div idblog-content classmarkdown-body/div
script$(#blog-content).html(blogDetail.blogInfos.blog.contentHtml);
/script问题
1.回显的html显示问题没有样式
- 如果是在vue-cli项目中在你需要展示html的模块引入import mavon-editor/dist/css/index.css
- 如果是在H5项目使用cdn引入样式cdn样式地址https://cdnjs.com/libraries/github-markdown-csslink hrefhttps://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.css relstylesheet2.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;
}编辑器中回显
上面提到的contentMarkDown
mavon-editorv-modelcontentMarkDown:subfieldtrueplaceholder请说明项目classmarkdown
/// md格式数据 回显到编辑器中
this.contentMarkDown this.$refs.md.d_value;全部代码
templatediv classhomep一、编辑器正常编辑/pmavon-editorplaceholder输入文章内容...styleheight: 500pxrefmdv-modelarticle.contentMdimgDelimgDelimgAddimgAdd!-- 左工具栏后加入自定义按钮 --template slotleft-toolbar-afterel-dropdownspan classel-dropdown-linki classop-icon fa el-icon-video-camera title上传视频/i/spanel-dropdown-menu slotdropdownel-dropdown-itemel-uploadstyledisplay: inline-block:show-file-listfalserefuploadnamefiledatasaction:http-requestuploadVideomultiplespan上传视频/span/el-upload/el-dropdown-itemel-dropdown-itemdiv clickdialogVisible true添加视频地址/div/el-dropdown-item/el-dropdown-menu/el-dropdown/template/mavon-editorp二、页面中html展示el-button clickhadContent 获取内容 /el-button/pdiv classmavonEditormavon-editor v-htmlcontentHtml //divp三、回显到编辑器中二次编辑/pmavon-editorv-modelcontentMarkDown:subfieldtrueplaceholder请说明项目classmarkdown//div
/template
script
export default {data() {return {article: {contentMd: ,},contentHtml: ,contentMarkDown: ,};},methods: {imgAdd: function (pos, $file) {var formdata new FormData();formdata.append(multipartFile, $file);upload(formdata).then((res) {this.$refs.md.$img2Url(pos, res.data.url);}).catch((err) {console.log(err);});},imgDel: function (filename) {//delBatchFile(filename[0].split(this.img)[1])},//上传视频uploadVideo(param) {this.openLoading();this.files param.file;var formData new FormData();formData.append(multipartFile, this.files);upload(formData).then((res) {const $vm this.$refs.md;// 将文件名与文件路径插入当前光标位置这是mavon-editor 内置的方法$vm.insertText($vm.getTextareaDom(), {prefix: video height100% width100% controls autoplay src${res.data.url}/video,subfix: ,str: ,});this.loading.close();}).catch((err) {this.loading.close();});},hadContent() {// html格式数据 回显到htmlthis.contentHtml this.$refs.md.d_render;// md格式数据 回显到编辑器中this.contentMarkDown this.$refs.md.d_value;console.log( ~ hadContent ~ this.contentMarkDown:,this.contentMarkDown);},},mounted() {},
};
/script
style langscss scoped
.home {width: 100%;height: 100%;overflow-y: scroll;
}
/*解决mavonEditor 有序无序列表不显示 common.css样式冲突*/
ul {list-style-type: disc;
}ol {list-style-type: decimal;
}li {list-style: inherit;
}
/style效果
