基于若依框架实现markdown在线编辑

news2024/12/24 11:05:07

基于若依框架实现markdown在线编辑

1. 下载mavon-editor

npm install mavon-editor --save

2. 打开main.js文件, 添加如下

// markdown组件
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

// markdown组件
Vue.component("mavon-editor", mavonEditor);

3. 打开package.json, 找到 “dependencies”

// 添加
"mavon-editor": "^2.10.4",

4. 新建vue页面

<template>
  <div>
    <mavon-editor class="markdown"
                  :value="get_mark_data()"
                  :subfield="true"
                  :defaultOpen="prop.defaultOpen"
                  :toolbarsFlag="prop.toolbarsFlag"
                  :editable="prop.editable"
                  :scrollStyle="prop.scrollStyle"
                  :toolbars="toolbars"
                  :code-style="prop.codeStyle"
                  @change="changeFn"
                  @save="saveFn"
                  @imgAdd="imgAddFn"
                  language="zh"
                  navigation
                  ishljs
                  ref="md"
    >
      <!-- 左工具栏后加入自定义按钮  -->
      <template slot="left-toolbar-after">
        <button
          type="button"
          @click="downFile()"
          class="op-icon fa fa-mavon-align-left"
          aria-hidden="true"
          title="下载"
        ></button>
      </template>
    </mavon-editor>
</template>

<script>
import { saveAs } from 'file-saver'
import { saveFileAndData } from '@/utils/util'

export default {
  data() {
    return {
      fileInfo: '',
      context: '',//输入的数据
      html: '',
      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 // 预览
      }
    }
  },
  created() {
    
  },
  computed: {
    prop() {
      let data = {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit: 默认展示编辑区域 , preview: 默认展示预览区域
        editable: true,
        toolbarsFlag: true,
        scrollStyle: true,
        bold: false,
        codeStyle: 'code-github'
      }
      return data
    }
  },

  methods: {
    // 编辑区域内容改变
    changeFn(value, render) {
      console.log('编辑改变数据====')
      this.fileInfo = render
      this.html = render
    },
    // 保存的时候的事件
    saveFn(e) {
      this.fileInfo = e
    },
    // 下载.md文件
    downFile() {
      console.log('下载文件')
      let name = new Date()+'.md'
      let str = new Blob([this.fileInfo], {type: 'application/x-genesis-rom'});
      // 注意这里要手动写上文件的后缀名
      saveAs(str, name );
    },
    // 添加上传图片事件
    imgAddFn(pos, imgfile) {
      var formdata = new FormData()
      formdata.append('file', imgfile)
      // 第一步.将图片上传到服务器.
      saveFileAndData('yizhi-note', formdata).then(res => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例,可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
         */
        // 第一种不知道为什么$vm不好使,未解决
        // $vm.$img2Url(pos, res);
        // 第二种 需要在上方添加 添加 ref = md,然后才可以使用
        this.$refs.md.$img2Url(pos, res.data.url)
      })
    },

    get_mark_data() {
      // return 'asd'
    }
  }
}
</script>
<style scoped>
.markdown {
  /*width: 700px;*/
  width: 100%;
  /* 暂时未限制高度 height: 500px;*/
  margin: 0 auto;
}
</style>

解析:

  1. changeFn():监听编辑区域改变数据,根据需要完善功能
  1. saveFn():保存事件,根据需要完善功能

  2. 自定义添加按钮

    <!-- 左工具栏后加入自定义按钮  -->
          <template slot="left-toolbar-after">
            <button
              type="button"
              @click="downFile()"
              class="op-icon fa fa-mavon-align-left"
              aria-hidden="true"
              title="下载"
            ></button>
          </template>
    

    downFile():下载.md文件到本地

  3. imgAddFn():上传文件事件,这里集成了自己的oss服务器,最后用的是图片路径
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1000078.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【目标检测】YOLOv8:快速上手指南

YOLOv8概述 YOLOv8是YOLOv5团队在今年新推出的一代YOLO版本&#xff0c;与前几代版本相比&#xff0c;其性能和速度差距如下图所示&#xff1a; 和其它版本不同的是&#xff0c;该仓库并非起名为YOLOv8&#xff0c;而是公司名ultralytics&#xff0c;因为他们想将此版本作为一…

职场新人对测试用例的困惑

职场新人对测试用例的困惑无非有以下几点&#xff1a; 什么是测试用例&#xff0c;为什么要写测试用例&#xff1f; 不知道怎么写&#xff0c;写了也不知道写的是否完整。 一、什么是测试用例&#xff1f; 百科的释义&#xff1a; 测试用例是对一项特定的软件产品进行测试任…

探索多态的本质【C++】

文章目录 多态的构成条件虚函数虚函数的重写&#xff08;覆盖&#xff09; 虚函数重写的两个例外C11 override和final区分重载、覆盖(重写)、隐藏(重定义)抽象类接口继承和实现继承多态的原理虚函数表 动态绑定和静态绑定动态绑定静态绑定 单继承中的虚函数表多继承中的虚函数表…

基于51单片机实现W25Q64-FLASH读写

一、前言 STC89C52是一款8位单片机,具有强大的功能和灵活性,广泛应用于各种嵌入式系统中。W25Q64是一款容量为64Mb的串行闪存芯片,采用SPI接口进行通信。本项目利用STC89C52单片机实现对W25Q64闪存芯片的读写操作,实现数据的读取和存储。 在本项目中,通过模拟SPI(Seria…

本末科技再获融资,直驱机器人来到价值兑现前夕?

在去年10月完成近亿元A轮融资后&#xff0c;今年9月&#xff0c;本末科技又宣布完成数千万元A轮融资&#xff0c;由立湾资本领投&#xff0c;建元投资跟投&#xff0c;北拓资本担任公司长期独家财务顾问。 本末科技长期专注于机器人机械模组与动力供应领域。虽然我国自2013年起…

项目交付谈判的6大技巧

针对项目交付问题&#xff0c;在面对甲方时&#xff0c;项目经理如果采用“和事佬”的态度&#xff0c;在不违背合理性或不产生无法承担后果前提下&#xff0c;尽量满足甲方的要求&#xff0c;以便顺利交付。这样往往容易导致项目范围蔓延&#xff0c;如果控制不当&#xff0c;…

信息技术--案例分析

文章目录 1 信息核心素养2 具备核心素养的学生3 导入原则4 导入方法5 新课讲授方法6 教学方法选择的依据7 教学方法的实施原则8 教学方法的设计意图9 小结10 作业 前言&#xff1a; 分值&#xff1a;本章节的内容在信息技术笔试中占据45分的分值&#xff0c;分别是18题10分&am…

合同交付类项目如何高效管理?

美国项目管理协会(PMI)保罗格蕾斯曾说:“当今社会,一切都是项目,一切也将成为项目。”在“万事皆项目”的背景下&#xff0c;企业在运营过程中会产生大量的项目型业务活动&#xff0c;例如&#xff1a;举办市场活动、产品研发、进行企业内训、采购招标、工程建设等等。那么按照…

涉案资金30个小目标,山东烟台网警打掉特大网络黑客犯罪团伙!

在人们日常生活中&#xff0c;有时会遇到“政府网站无法正常访问”“ 购物网页离奇丢失”“ 棋牌网游无法登录”等问题&#xff0c;就很莫名其妙。 这些事情一而再、再而三地发生&#xff0c;你能想到其背后潜藏着“黑手”和神秘组织吗&#xff1f; 近日&#xff0c;山东烟台…

【LeetCode-中等题】59. 螺旋矩阵 II

文章目录 题目方法一&#xff1a;二维数组缩圈填数字方法二&#xff1a; 题目 方法一&#xff1a;二维数组缩圈填数字 定义四个边界条件&#xff0c;每转一圈&#xff0c;把数值填进去&#xff0c;然后缩小一圈&#xff0c;直到不满足条件位置 结束循环条件可以是&#xff1a; …

精彩纷呈!安全狗亮相厦门市第五届网络安全宣传周开幕式

9月5日&#xff0c;厦门市第五届网络安全宣传周开幕式成功举行。 作为国内云原生安全领导厂商&#xff0c;安全狗也受邀参与此次大会。 厦门服云信息科技有限公司&#xff08;品牌名&#xff1a;安全狗&#xff09;成立于2013年&#xff0c;致力于提供云安全、&#xff08;云&a…

技术解码 | GB28181/SIP/SDP 协议--EasyGBS国标GB28181平台国标视频技术SDP解析

EasyGBS去年更换了新内核&#xff0c;新内核版本的平台性能更加稳定&#xff0c;我们也在不断对平台进行持续的功能优化和升级&#xff0c;始终保持EasyGBS平台在安防视频监控市场的技术先进性。EasyGBS拥有视频直播、录像存储、检索与回放、云台控制、告警上报、语音对讲、平台…

React+antd实现可编辑单元格,非官网写法,不使用可编辑行和form验证

antd3以上的写法乍一看还挺复杂&#xff0c;自己写了个精简版 没用EditableRowCell的结构&#xff0c;也不使用Context、高阶组件等&#xff0c;不使用form验证 最终效果&#xff1a; class EditableCell extends React.Component {state {editing: false};toggleEdit () &…

windows10下同时安装两个mysql服务的解决办法

windows10下同时安装两个mysql服务的解决办法 安装MySQL8.0.18版本 安装解压版MySQL8.0.25 &#xff08;1&#xff09; 下载解压包 &#xff08;2&#xff09;配置my.ini文件 [mysqld] port 3307 #mysql安装目录 basedir D:\HuanJing\Mysql\mysql-8.0.25-winx64 #mysql数据存…

WebDAV之π-Disk派盘 + FV管理器

FV管理器是一款清爽简洁的文件管理器。支持Android系统免root访问data和obb目录的工具。通过无线网络管理文件,局域网文件共享。支持jpg,png,gif,bmp,webp,tif,heif,dng,avif,ico,APNG等格式的图片,可能是支持最多图片格式的文件管理App了。 支持zip,rar,7z,iso…

学会制作企业纪念相册,记录企业成长瞬间

企业成长瞬间&#xff0c;美好记忆永存&#xff01; 今天来给大家分享一个超级实用的技能&#xff0c;如何制作企业纪念相册呢&#xff1f; 想要记录下企业成长历程中的每一个美好瞬间&#xff0c;把回忆永久保存下来吗&#xff1f;那就跟着我一起往下看吧&#xff01; 首先&…

分享20+个在线工具网站,60+常用工具

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 今天给大家分享20在线工…

记录一次Docker与Redis冲突

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 报错以及Bug ✨特色专栏&#xff1a; …

知网被处罚5000万,加强合规意识迫在眉睫

近日&#xff0c;国内知名学术搜索平台知网被处罚5000万的消息引起了广泛关注。此次处罚不仅是对知网在数据管理和用户隐私保护方面存在违规行为的警示&#xff0c;也是侧面反映了政府部门对企业合规力度监管的升级&#xff0c;更是提醒企业和个人加强合规意识的重要性。 合规…

mes系统开发和上位机软件开发哪个方向前景更好?

MES系统开发和上位机软件开发都是与工业自动化相关的领域&#xff0c;各自有不同的前景和发展方向。下面是对两者的简要介绍和前景评估&#xff1a;MES系统开发&#xff1a;MES系统&#xff08;制造执行系统&#xff09;是用于实现制造业生产管理和信息化的软件系统。它涵盖了生…