Vue引入mavon-editor插件实现markdown功能

blmius
• 阅读 2378

Vue引入mavon-editor插件实现markdown功能

===================================

说明 mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引入mavon-editor插件,如果你只是采用了

Vue,没有用Nuxt框架,那么你可以看mavon-editor官方文档,有详细说明,其实它们只有在引入mavon-editor方式有细微差别,使用都是一样的。mavonEditor官方地址

一、Nuxt引入mavon-editor插件

1、安装

通过命令安装插件

npm install mavon-editor --save

2、在plugins中创建vueMarkdown.js

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor)

3、在nuxt.config.js中引入

  plugins: [
    '~/plugins//vueMarkdown.js',
  ],

这三步也是Nuxt新增插件的标准3步曲了。既然插件已经添加完成,那么接下来就是使用了,使用应该包含两部分:1)编辑markdown文档并保存。2)回显markdown数据

二、使用mavon-editor编辑

1、源码

<template>
  <div class="home">
    <mavon-editor
            ref="md"
            placeholder="请输入文档内容..."
            :boxShadow="false"
            style="z-index:1;border: 1px solid #d9d9d9;height:50vh"
            v-model="content"
            :toolbars="toolbars"
          />
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      content: "",
      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: false, // 保存(触发events中的save事件)
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  methods: {
    // 上传图片方法
    $imgAdd(pos, $file) {
      console.log(pos, $file);
    }
  }
};
</script>

2、页面展示编辑器效果

页面展示效果如下

Vue引入mavon-editor插件实现markdown功能

我们可以看到我们已经可以正常使用markdown编辑器了,说明当前插件安装成功,可以用。

三、使用mavon-editor回显

上一步是已经可以编辑,但我们还需要将我们编辑好已经存在数据库的数据,回显在页面。

1、源码

          <no-ssr>
          <mavon-editor
            v-highlight
            class="md"
            :value="content"
            :subfield = "false"
            :defaultOpen = "'preview'"
            :toolbarsFlag = "false"
            :editable="false"
            :scrollStyle="true"
           ></mavon-editor>
        </no-ssr>

属性解释

:value="content":引入要转换的内容
:subfield = "false":开启单栏模式
:defaultOpen = "'preview'":默认展示预览区域
:toolbarsFlag = "false":关闭工具栏
:editable="false":不允许编辑
scrollStyle="true":开启滚动条样式(暂时仅支持chrome)

2、页面展示效果

Vue引入mavon-editor插件实现markdown功能

这样一来整个编辑回显的效果这里都展示出来了。

四、代码高亮

上面展示的时候确实已经可以正常回显markdown文档,但还不美观,我们想要的就是只要是代码都能高亮的显示出来,你可以用highlight.js插件,但我在使用中并没有达到我

自己喜欢的样式,所以我这边自己修改了部分css样式。这里把css样式展示如下。


  .markdown-body .lang- {
    display: block;
    overflow: auto;
    padding: 1.3em 2em !important;
    font-size: 16px !important;
    background: #272822 !important;
    color: #FFF;
    max-height: 700px;
  }

  .markdown-body .hljs {
    display: block;
    overflow: auto;
    padding: 1.3em 2em !important;
    font-size: 16px !important;
    background: #272822 !important;
    color: #FFF;
    max-height: 700px;
  }

  .hljs,
  .hljs-tag,
  .hljs-subst {
    color: #f8f8f2 !important;
  }

  .hljs-strong,
  .hljs-emphasis {
    color: #a8a8a2 !important;
  }

  .hljs-bullet,
  .hljs-quote,
  .hljs-number,
  .hljs-regexp,
  .hljs-literal,
  .hljs-link {
    color: #ae81ff !important;
  }

  .hljs-code,
  .hljs-title,
  .hljs-section,
  .hljs-selector-class {
    color: #a6e22e !important;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-name,
  .hljs-attr {
    color: #f92672 !important;
  }

  .hljs-symbol,
  .hljs-attribute {
    color: #66d9ef !important;
  }

  .hljs-params,
  .hljs-class .hljs-title {
    color: #f8f8f2 !important;
  }

  .hljs-string,
  .hljs-type,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-selector-id,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-addition,
  .hljs-variable,
  .hljs-template-variable {
    color: #e6db74 !important;
  }

  .hljs-comment,
  .hljs-deletion,
  .hljs-meta {
    color: #75715e !important;
  }

然后我们再来看页面展示效果

Vue引入mavon-editor插件实现markdown功能

是不是明显感觉代码已经高亮,整体看去的视觉效果比上面的要好多了。

总结 这里有关编辑保存与后台接口交互的逻辑没有粘贴出来,还有如果使用markdown编辑器上传图片这里也没有说明,具体的可以看下官方文档。

参考

mavonEditor官方地址

少说多做,句句都会得到别人的重视;多说少做,句句都会受到别人的忽视。(16)

本文转自 https://www.cnblogs.com/qdhxhz/p/14865995.html,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这