vue2.0使用md-edit編輯器的過程

更新時間：2024年02月06日 10:49:17 作者：源碼plus

這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

前言：小劉開發(fā)過程中，如果是博客項目一般是會用到富文本。眾多富文本中，小劉選擇了markdown，并記錄分享了下來。

 # 使用 npm
npm i @kangc/v-md-editor -S
main.js基本配置
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';
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
/* 2、v-md-editor 代碼塊關鍵字高亮  */
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// 引入所有語言包
import hljs from 'highlight.js';
VueMarkdownEditor.use(githubTheme, {
  Hljs: hljs,
});
/**
 * 3.創(chuàng)建行號
 */
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
VueMarkdownEditor.use(createLineNumbertPlugin());
Vue.use(VueMarkdownEditor);

頁面加載使用

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

特別注意：當步驟到行號的時候，會出現(xiàn)依賴有問題；
類似：* @babel/runtime/helpers/interopRequireDefault in ./node_modules/@kangc/v-md-editor/lib/plugins/line-number/index.js To install it, you can run: npm install --save @babel/runtime/helpers/interopRequireDefault Error from chokidar (C:): Error: EBUSY: reso。。。。。。。
這種錯誤；

解決方案：

當使用 babel 轉換 es 6出現(xiàn)下面錯誤時：

Module not found: Error: Can’t resolve
‘@babel/runtime/helpers/interopRequireDefault’ 我們可以重新安裝一下：

npm i @babel/runtime --save-dev

至此：github主題的markdown編輯器基本用法完成了。

運行demo效果：

圖片上傳功能：將圖片上傳到服務器，然后回顯圖片

:disabled-menus="[]"
@upload-image="handleUploadImage"

注意

上傳圖片菜單默認為禁用狀態(tài) 設置 disabled-menus 為空數(shù)組可以開啟。

 handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上傳到文件服務器，然后向編輯框中插入對應的內(nèi)容
      console.log(files);
      // 此處只做示例
      insertImage({
        url:
          'https://pic.rmb.bdstatic.com/bjh/down/a477f2b15e2039b9fc7e2282791a9897.jpeg',
        desc: '七龍珠',
        // width: 'auto',
        // height: 'auto',
      });
    },

測試效果如下