vue2实现markdown编辑器,实现同步滚动,实时预览等功能

简介: vue2实现markdown编辑器,实现同步滚动,实时预览等功能

效果图



网络异常,图片无法展示
|


依赖:v-md-editor

中文文档:v-md-editor

本文使用的是进阶版


1. 先安装v-md-editor


# use npm
npm i @kangc/v-md-editor -S
# use yarn
yarn add @kangc/v-md-editor
复制代码


2. Quick Start


import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
VueMarkdownEditor.use(vuepressTheme);
Vue.use(VueMarkdownEditor);
复制代码


3. 使用


<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
复制代码


4. 引入vuepress 主题


扩展 markdown-it


import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
  extend(md) {
    // md为 markdown-it 实例,可以在此处进行修改配置,并使用 plugin 进行语法扩展
    // md.set(option).use(plugin);
  },
});
复制代码


扩展代码高亮语言包


请通过babel-plugin-prismjs (opens new window)插件按需引入对应的语言包。

安装 babel-plugin-prismjs 插件


# yarn
yarn add babel-plugin-prismjs --dev
# npm
npm install babel-plugin-prismjs
复制代码


按需引入语言包(推荐)


// babel.config.js
module.exports = {
  plugins: [
    [
      'prismjs',
      {
        languages: ['json'],
      },
    ],
  ],
};
复制代码


5. 加上图片上传功能(上传本地图片)


原理:上传图片至文件服务器,上传成功后将返回的图片相关信息插入编辑区域。


网络异常,图片无法展示
|


注意

上传图片菜单默认为禁用状态 设置disabled-menus 为空数组可以开启。`

示例代码


<template>
  <v-md-editor
    v-model="text"
    left-toolbar="undo redo | image"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="500px"
  />
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器,然后向编辑框中插入对应的内容
      console.log(files);
      // 此处只做示例
      insertImage({
        url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠',
        // width: 'auto',
        // height: 'auto',
      });
    },
  },
};
</script>
复制代码


最后总结:


代码汇总并讲解


<template>
    <vue-markdown-editor
      v-model="editor"
      height="100%"
      :disabled-menus="[]"
      @upload-image="onUploadImage"
      ></vue-markdown-editor>
  </template>
  <script>
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import Prism from 'prismjs'
import axios from 'axios'
import auth from '@/utils/auth'
VueMarkdownEditor.use(vuepressTheme, { Prism, extend(md) {} })
  export default {
    data() {
      return {
        editor: '',
      }
    },
    components: { VueMarkdownEditor },
    mounted() {
        document.querySelector('.v-md-editor').style.height = document.body.offsetHeight - 50 + 'px'
    },
    methods: {
         // 上传图片
        onUploadImage(event, insertImage, files) {
            const file = files[0],
                  path = process.env.VUE_APP_BASE_API,
                  index = path.lastIndexOf("\/")
            let param = new FormData()
            param.append('image', file)
            const config = { headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': auth.getToken()
            } }
            axios.post(`${path}doc/uploadfile/`, param, config).then(r => {
                if(r.data.code == 200) {
                  const last = path.slice(0, index)
                  insertImage({
                      url: last + r.data.data.url,
                      desc: files[0].name
                  })
                }
            }).catch(e => {
                this.Toast(2, '图片上传出了点小问题,请稍后重试')
            })
        }
    }
  };
  </script>
  <style>
.vuepress-markdown-body h1{ font-size: 28px; }
.vuepress-markdown-body h2{ font-size: 26px; }
.vuepress-markdown-body h3{ font-size: 24px; }
.vuepress-markdown-body h4{ font-size: 22px; }
.vuepress-markdown-body h5{ font-size: 20px; }
.vuepress-markdown-body:not(.custom){padding: 5px 10px!important;}
  </style>
复制代码


  1. document.querySelector('.v-md-editor').style.height = document.body.offsetHeight - 50 + 'px' 这步是为了markdown编辑器可以跟body元素高度一致,确保铺满屏幕
  2. style的字体设置,是因为我有base样式库,h标签的大小等,已处理过,所以这里要重新处理一下
  3. onUploadImage这是图片上传的方法
相关文章
|
16天前
|
JavaScript
vue 钟表功能:动态显示实时时间(时间格式化插件dayjs)
vue 钟表功能:动态显示实时时间(时间格式化插件dayjs)
|
17天前
|
存储 JavaScript 前端开发
使用Strve.js来搭建一款 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
|
18天前
|
存储 JSON JavaScript
在Vue 3中使用useStorage轻松实现localStorage功能
VueUse是基于Vue3的Composition API的实用函数的集合,useStorage是其中的一个函数。我们可以使用useStorage来实现我们的localStorage功能。
|
22天前
|
Linux Docker 容器
Linux本地搭建StackEdit Markdown编辑器结合内网穿透实现远程访问
Linux本地搭建StackEdit Markdown编辑器结合内网穿透实现远程访问
20 0
|
22天前
|
JSON JavaScript 前端开发
VUE&Element,能够进行简单的 Element 页面修改, 能够完成查询所有功能, 能够完成添加功能
VUE&Element,能够进行简单的 Element 页面修改, 能够完成查询所有功能, 能够完成添加功能
29 0
|
29天前
|
JavaScript
vue中实现锚点定位功能
vue中实现锚点定位功能
11 0
|
1月前
|
存储
Vue3 实现 PDF 文件在线预览功能
Vue3 实现 PDF 文件在线预览功能
47 0
|
1月前
|
移动开发 JavaScript 前端开发
vue实现调用手机拍照、录像功能
vue实现调用手机拍照、录像功能
66 0
|
1月前
|
前端开发 JavaScript
vue3实现验证码校验的功能
最近想实现使用vue3实现一个简易的前端验证码校验的功能,就花了点时间实现了,这只是一个简易版的,但是用在项目中是没有啥问题的,废话不多说,先来看下最终实现的效果。写着玩的 哈哈
|
1月前
|
JavaScript
VUE组件:什么是Vue的功能组件?
VUE组件:什么是Vue的功能组件?
33 5