微信扫一扫 分享朋友圈

已有 118 人浏览分享

开启左侧

mavon-editor安装与配置

[复制链接]
118 0
一、安装与配置
(1)、在终端输入命令:
npm install mavon-editor --save
(2)、配置: 在main.js 中输入以下代码
        import Vue from 'vue'
        import mavonEditor from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
        Vue.use(mavonEditor)

二、代码书写
1、构建组件,直接写入下面的代码,页面就会有富文本框
image.png
1、@imgAdd 主要是监听图片上传事件,当你上传图片的时候,就会自动调用这个函数。
一般来说,在使用富文本的时候,如果存在图片,我们在上传的时候,需要先传给后端,后端返回图片在数据库中的地址,我们再把地址回显出来。
所以,我们点击选择图片的时候,就要把图片的地址传给后端。下面是这个函数的代码书写,共参考:
imgAdd(pos, $file) {
      //新建form表单类型的数据
      let formData = new FormData();
      //将我们上传的图片地址$file加进表单里面,命名为“file”(参数名字与后端相匹配)
      formData.append("file", $file);
      console.log(formData);
      axios({
        url: this.$api + "icommunity/post/getImageUrl", //请求地址
        method: "POST",
        data: formData,
        headers: { "Content-Type": "multipart/form-data" },
      }).then((res) => {
        if (res.status === 200) {
       // 将后端返回的url放在md中图片的指定位置
          this.$refs.md.$img2Url(pos, res.data.data);
        } else {
          this.$message.error(res.message);
        }
      });
      //访问后台服务器方法
    },
2、@change 函数: 编辑区发生变化的回调事件(render:value 经过markdown解析后的结果)
所以,我们将获得的render复制给富文本的v-model,代码如下:其中html是我给富文本框设置的:v-mldel=html;
image.png
到目前为止,你就可以将你想要的数据传给后端了。其中html就是整个富文本框编辑的东西啦。

三、如何从后端数据库中调取并且在页面中显示
从后端获取到数据之后,在html书写的时候,使用v-html即可。
image.png

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-11-27 23:43 , Gzip On, Redis On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。