vue-element-admin 的使用記錄

vue-element-admin與vue 的學習使用記錄（一）
vue-element-admin與vue 的學習使用記錄（二）
vue-element-admin與vue 的學習使用記錄（三）
vue-element-admin與vue 的學習使用記錄（四）

項目場景：

前兩節基本熟悉了一下vue-element-admin，下面就要開始進行自定義的功能了。
首先需要集成一個MarkDown編輯器，項目自帶了基于tui-editor 的MarkDown，但是看起來不是特別的炫酷，更換一個，開干！

解決方案：

Editor.md一個開源的在線MarkDown編輯器，為什么選用它呢，功能強大（亂七八糟的功能很多啦），界面炫酷，黑白色的界面看起來很炫的喔。

通過 NPM 安裝：
npm install editor.md

安裝完成后,我們直接將遠MarkDown組件內容替換，引入editor.md，按照示例配置好，一運行
發現報錯了，嘗試了各種姿勢都不對，去GitHub看了一下，很多人都說不能直接impot導入，進入editor.js中
一看，都沒有export，import肯定會失敗啊，但是又不想通過引入js的方式來實現，畢竟我可是最求完美的男人！

4.不能import那我們就自己動手封裝一下，先把我們npm安裝目錄中的editor.md文件夾全部復制到\public\static\目錄下
5.找到項目中原來的MarkdownEditor文件夾，修改index.vue為

<template><div class="markdown-editor-box"><link rel="stylesheet" href="/static/editor.md/css/editormd.css"><div :id="editorId"></div></div> </template> <script>import scriptjs from 'scriptjs';import { defaultConfig, codeThemes } from './default-options'export default {props: {editorId: {'type': String,'default': 'markdown-editor',},onchange: { // 內容改變時回調，返回（html, markdown, text）type: Function},config: { // 編輯器配置type: Object},codeTheme: { // 代碼高亮主題'type': String,'default': 'vibrant-ink.min.css'},initData: {'type': String},initDataDelay: {'type': Number, // 延遲初始化數據時間，單位毫秒'default': 0}},data: function() {return {editor: null,codeThemes,editorLoaded: false,};},methods: {fetchScript: function(url) {return new Promise((resolve) => {scriptjs(url, () => {resolve();});});},getConfig: function () {return {...defaultConfig, ...this.config };},initEditor: function () {(async () => {await this.fetchScript('/static/editor.md/jquery.min.js');await this.fetchScript('/static/editor.md/editormd.js');// await this.fetchScript('/static/editor.md/editormd.js');this.$nextTick(() => {let editor = window.editormd(this.editorId, this.getConfig());editor.on('load', () => {setTimeout(() => { // hack bug: 一個頁面多個編輯器只能初始化其中一個數據問題this.editorLoaded = true;this.initData && editor.setMarkdown(this.initData);}, this.initDataDelay);});this.onchange && editor.on('change', () => {let html = editor.getPreviewedHTML();this.onchange({markdown: editor.getMarkdown(),html: html,text: window.$(html).text()});});this.editor = editor;});})();}},mounted: function() {this.initEditor();},watch: {'initData': function (newVal) {if(newVal) {this.editorLoaded && this.editor.setMarkdown(newVal);}}}} </script>

default-options.js內容修改為

const defaultConfig = {width: "100%",height: 650,path: '/static/editor.md/lib/',// Editor.md theme, default or dark, change at v1.5.0// You can also custom css class .editormd-preview-theme-xxxxtheme: 'dark',// Preview container theme, added v1.5.0// You can also custom css class .editormd-preview-theme-xxxx// previewTheme: 'default',previewTheme: 'dark',// Added @v1.5.0 & after version is CodeMirror (editor area) themeeditorTheme: '3024-night',// markdown: "默認填充內容", // 默認填充內容lineWrapping: true, // 編輯框不換行codeFold: true, // 代碼折疊placeholder: '小黃瓜要吃飯-MarkDown',syncScrolling: true,imageUpload: true,imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],imageUploadURL: process.env.VUE_APP_API_BASE_URL + '/blogApi/MarkDown/UpImage', //修改了image.js的提交方式saveHTMLToTextarea: true, // 保存 HTML 到 TextareasearchReplace: true,watch: true, // 實時預覽// htmlDecode: "style,script,iframe|on*", // 開啟 HTML 標簽解析，為了安全性，默認不開啟toolbar: true, //工具欄previewCodeHighlight: true, // 預覽 HTML 的代碼塊高亮，默認開啟emoji: true,taskList: true,tocm: true, // Using [TOCM]tex: true, // 開啟科學公式TeX語言支持，默認關閉flowChart: true, // 開啟流程圖支持，默認關閉sequenceDiagram: true, // 開啟時序/序列圖支持，默認關閉,// dialogLockScreen: false, // 設置彈出層對話框不鎖屏，全局通用，默認為true// dialogShowMask: false, // 設置彈出層對話框顯示透明遮罩層，全局通用，默認為true// dialogDraggable: false, // 設置彈出層對話框不可拖動，全局通用，默認為true// dialogMaskOpacity: 0.4, // 設置透明遮罩層的透明度，全局通用，默認值為0.1// dialogMaskBgColor: "#000", // 設置透明遮罩層的背景顏色，全局通用，默認為#fff// imageUpload: false,// imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],// imageUploadURL: "./php/upload.php",// onload: function() {// // this.fullscreen();// // this.unwatch();// // this.watch().fullscreen();// // this.setMarkdown("#PHP");// // this.width("100%");// // this.height(480);// // this.resize("100%", 640);// }, }; const codeThemes = [{label: 'monokai',value: 'monokai.min.css',},{label: 'atelier-cave-dark',value: 'atelier-cave-dark.min.css',},{label: 'atelier-cave-light',value: 'atelier-cave-light.min.css',},{label: 'atelier-dune-dark',value: 'atelier-dune-dark.min.css',},{label: 'atelier-dune-light',value: 'atelier-dune-light.min.css',},{label: 'atelier-estuary-dark',value: 'atelier-estuary-dark.min.css',},{label: 'atelier-estuary-light',value: 'atelier-estuary-light.min.css',},{label: 'atelier-forest-dark',value: 'atelier-forest-dark.min.css',},{label: 'atelier-forest-light',value: 'atelier-forest-light.min.css',},{label: 'atelier-heath-dark',value: 'atelier-heath-dark.min.css',},{label: 'atelier-heath-light',value: 'atelier-heath-light.min.css',},{label: 'atelier-lakeside-dark',value: 'atelier-lakeside-dark.min.css',},{label: 'atelier-lakeside-light',value: 'atelier-lakeside-light.min.css',},{label: 'atelier-plateau-dark',value: 'atelier-plateau-dark.min.css',},{label: 'atelier-plateau-light',value: 'atelier-plateau-light.min.css',},{label: 'atelier-savanna-dark',value: 'atelier-savanna-dark.min.css',},{label: 'atelier-savanna-light',value: 'atelier-savanna-light.min.css',},{label: 'atelier-seaside-dark',value: 'atelier-seaside-dark.min.css',},{label: 'atelier-seaside-light',value: 'atelier-seaside-light.min.css',},{label: 'atelier-sulphurpool-dark',value: 'atelier-sulphurpool-dark.min.css',},{label: 'atelier-sulphurpool-light',value: 'atelier-sulphurpool-light.min.css',},{label: 'github',value: 'github.min.css',},{label: 'github-v2',value: 'github-v2.min.css',},{label: 'hemisu-dark',value: 'hemisu-dark.min.css',},{label: 'hemisu-light',value: 'hemisu-light.min.css',},{label: 'tomorrow',value: 'tomorrow.min.css',},{label: 'tomorrow-night',value: 'tomorrow-night.min.css',},{label: 'tomorrow-night-blue',value: 'tomorrow-night-blue.min.css',},{label: 'tomorrow-night-bright',value: 'tomorrow-night-bright.min.css',},{label: 'tomorrow-night-eighties',value: 'tomorrow-night-eighties.min.css',},{label: 'tranquil-heart',value: 'tranquil-heart.min.css',},{label: 'vibrant-ink',value: 'vibrant-ink.min.css',}, ]; export {defaultConfig,codeThemes, };

這樣我們就封裝好了一個自己的基于editor.md的MarkDown組件，去src\views\components-demo目錄下找到markdown.vue文件，修改原來的markkown組件內容為

<div class="editor-container"><el-tag class="tag-title">Basic:</el-tag><markdown-editor v-model="content1" height="300px" /></div>

其實就是刪除掉以前的其他三個組件引用，只留下一個，這樣再回到頁面，我們就只留下了一個我們需要的MarkDown組件了。

接下來就是排除bug了，先看第一個報錯：

editormd.js:4120 GET
https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css
net::ERR_CERT_AUTHORITY_INVALID

訪問一下這個地址，網站證書過期了，換一個或者直接下載到本地，我選擇換一個cdn，去 editormd.js中，將下圖注釋的部分替換掉，OK，不報錯了搞定。

// // 使用國外的CDN，加載速度有時會很慢，或者自定義URL// // You can custom KaTeX load url.// editormd.katexURL = {// css : "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min",// js : "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min"// };editormd.katexURL = {css: "https://cdn.bootcdn.net/ajax/libs/KaTeX/0.1.0/katex.min",js: "https://cdn.bootcdn.net/ajax/libs/KaTeX/0.1.0/katex.min"};

檢驗一下我們的組件是否和官方的組件支持的功能一模一樣，可能由于cdn或者其他原因，部分參數或數學公式的格式不支持，我們去editor官網，找到完整示例，將內容全部拷到我們自己的組件中，檢測功能是否全部支持，如果兩邊一致說明全部支持。一模一樣啊！包括Emoji表情打不開都一樣

一看是表情包的地址報錯，本來打算換一個cdn地址（http://www.emoji-cheat-sheet.com/graphics/emojis/
無法使用，https://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/
也無法使用 尷了個尬），結果找了好幾個都不可以用，算了自己下一個吧emoji下載地址！

將下載好的表情包文件放在static中，修改editormd.js中的地址為我們的靜態文件如下

// Emoji graphics files url patheditormd.emoji = {path : "../static/emoji/",ext : ".png"};

到此為止全部搞定 收工！（其實后面還有很多坑）

`

總結

以上是生活随笔為你收集整理的vue-element-admin 的使用记录（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。