vue 富文本组件(mavon-editor)

这篇具有很好参考价值的文章主要介绍了vue 富文本组件(mavon-editor)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

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>

vue富文本,vue.js,javascript,前端

图片上传

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

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

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

其他功能

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>

事件绑定

组件也提供了许多的事件绑定,这里不加以赘述,官网都有。可以看一下下图
vue富文本,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-604442.html

到了这里,关于vue 富文本组件(mavon-editor)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用富文本编辑器vue-quill-editor

    问题描述: 我们在开发过程中经常会遇到使用富文本编辑器进行操作,当前插件市场上关于富文本的编辑器挺多的,我们就不一一个介绍了,现在我们主要讲解一些vue-quill-editor富文本编辑器的使用操作和注意事项。 效果图 具体操作使用 1. 安装 2. 引入到项目中 有两种挂载方

    2024年02月02日
    浏览(51)
  • vue3 wangeditor/editor富文本使用和编辑

    第一步:安装 第二步:使用 最终效果图: 第四:工具栏配置 进入官方demo:https://www.wangeditor.com/demo/index.html 打开之后,按F12在控制台输入 toolbar.getConfig()  查看工具栏的默认配置。  如果有不需要的工具栏项,可以在  toolbarConfig.excludeKeys 中配置

    2024年01月21日
    浏览(50)
  • Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、文本编辑器,富文本Markdown,3D组件库】

    1)Vant ui 🔸有赞移动 UI 组件库,支持 Vue2/3 微信小程序,支付宝小程序 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动端 UI 组件库,它包含了丰富的组件和功能,可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量

    2024年02月07日
    浏览(54)
  • Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、文本编辑器,富文本、Markdown,3D组件库】

    1)Vant ui 🔸有赞移动 UI 组件库,支持 Vue2/3 微信小程序,支付宝小程序 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动端 UI 组件库,它包含了丰富的组件和功能,可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量

    2024年02月07日
    浏览(54)
  • vue-quill-editor富文本编辑器使用步骤

    首先放上效果图 目录 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 1.安装 2.引入到项目中         有两种挂载方式: 全局挂载 和 在组件中挂载,根据自己的项目需求选择,一般用到富文

    2024年02月06日
    浏览(44)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程

    1、NPM 导入 VUE-QUILL-EDITOR 2、引入 VUE-QUILL-EDITOR 在全局中引入 在指定的 vue 文件中引入 3、在 VUE 中使用 到这里一个默认的富文本编辑器已经导入使用了,如下图所视! 一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配置项进行配置。 可以根据自己的实际

    2024年02月09日
    浏览(62)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程 (最全)

    VUE-QUILL-EDITOR 基于 QUILL、适用于 VUE 的富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。 在全局中引入 在指定的 vue 文件中引入 到这里一个默认的富文本编辑器已经导入使用了,如下图所视! 一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配

    2024年02月04日
    浏览(46)
  • uniapp富文本编辑-editor-vue2-vue3-wangeditor

    不管vue2还是vue3,都推荐官方的editor组件, 官方手册 https://uniapp.dcloud.net.cn/component/editor.html 除了“ 微信小程序 ”,其他小程序想要使用editor组件实现富文本编辑,很难 ​​​​​​​ 第三方组件wangeditor在vue2,vue3在H5表现都很好,但是app环境下直接报错 reportJSException excep

    2024年03月10日
    浏览(52)
  • vue-quill-editor富文本编辑器-扩展表格、图片调整大小

    上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用( 这两个目前quill 版本并不兼容 如果有大神解决了还望指点 ) 参考文章: vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小_*且听风吟的博客-CSDN博

    2024年02月04日
    浏览(59)
  • Vue +vue-quill-editor+ Element UI使用富文本编辑器,上传图片,上传视频

    如果你们有问题,可以发评论提问,我看见一定回复!!!!! 一、基本使用 1、下载vue-quill-editor组件 2、引入· 富文本组件 方式一:全局引入 (在 main.js 文件中) 方式二:按需引入 (在 单个组件 中引用) 3、工具栏相关配置 4、设置工具栏中文提示 5、修改vue-quill-editor字体

    2024年02月08日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包