vue 富文本组件(mavon-editor)

Mavon-Editor是一个基于Vue的Markdown编辑器,适用于公告、博客等内容编辑。它支持图片上传并能处理不同环境下的图片路径。用户可以自定义工具栏,调整编辑器设置,如首行缩进,并通过事件绑定实现更多功能。
摘要由CSDN通过智能技术生成

简介

mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
官方地址:http://www.mavoneditor.com/
github:https://github.com/hinesboy/mavonEditor

安装 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)

使用 mavon-editor

注册好了就能够直接使用标签进行引用

<mavon-editor ref="mdedit" v-model="ruleForm.content" style="height: 80vh" @imgAdd="$imgAdd">
</mavon-editor>

文本框

图片上传

在组件标签中引入@imagAdd事件

<mavon-editor ref="mdedit" v-model="ruleForm.content" style="height: 80vh" @imgAdd="$imgAdd">
</mavon-editor>

因为公司需求,将图片转化为文件流上传后接口会返回下载路径,但是由于不同环境ip不同,需要前端判断当前环境ip然后拼接地址才能回显成功。在这里插入图片描述
设置富文本框默认首行缩进
在这里插入图片描述

其他功能

mavon-editor提供了许多的API,就包括语言选择、工具栏、工具栏背景等等。

toolbars

/*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    bold: true, // 粗体
    italic: true, // 斜体
    header: true, // 标题
    underline: true, // 下划线
    strikethrough: true, // 中划线
    mark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    quote: true, // 引用
    ol: true, // 有序列表
    ul: true, // 无序列表
    link: true, // 链接
    imagelink: true, // 图片链接
    code: true, // code
    table: true, // 表格
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    htmlcode: true, // 展示html源码
    help: true, // 帮助
    /* 1.3.5 */
    undo: true, // 上一步
    redo: true, // 下一步
    trash: true, // 清空
    save: true, // 保存(触发events中的save事件)
    /* 1.4.2 */
    navigation: true, // 导航目录
    /* 2.1.8 */
    alignleft: true, // 左对齐
    aligncenter: true, // 居中
    alignright: true, // 右对齐
    /* 2.2.1 */
    subfield: true, // 单双栏模式
    preview: true, // 预览
}

并且还能通过自定义工具

<mavon-editor>
  <!-- 左工具栏前加入自定义按钮 -->
  <template slot="left-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 左工具栏后加入自定义按钮  -->
  <template slot="left-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏前加入自定义按钮  -->
  <template slot="right-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏后加入自定义按钮  -->
  <template slot="right-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
</mavon-editor>

事件绑定

组件也提供了许多的事件绑定,这里不加以赘述,官网都有。可以看一下下图
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值