VueJs(16)---Nuxt引入mavon-editor外掛實現markdown功能

雨點的名字發表於2021-06-30
VueJSUX

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、頁面展示編輯器效果

頁面展示效果如下

VueJs(16)---Nuxt引入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、頁面展示效果

VueJs(16)---Nuxt引入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;
  }

然後我們再來看頁面展示效果

VueJs(16)---Nuxt引入mavon-editor外掛實現markdown功能

是不是明顯感覺程式碼已經高亮，整體看去的視覺效果比上面的要好多了。

總結 這裡有關編輯儲存與後臺介面互動的邏輯沒有貼上出來，還有如果使用markdown編輯器上傳圖片這裡也沒有說明，具體的可以看下官方文件。

參考

mavonEditor官方地址



少說多做,句句都會得到別人的重視；多說少做,句句都會受到別人的忽視。(16)

相關文章