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 的使用记录（三）相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
Vue + Element UI——侧边栏LOGO设计DEMO
GitHub https://github.com/PanJiaChen/vue-element-admin DEMO https://panjiachen.github.io/vue-element ...
RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element
有一段时间没有推荐 admin 框架了,若依这款后台框架很强大,提供了 vue 版本,很实用,推荐给大家. 关于若依 RuoYi 中文名称叫若依,名字十分二次元,是一个后台管理系统,后端基于经典技术组 ...
vue+element 后台管理系统（三）树形图
<!DOCTYPE html> <html class="over_hidd"> <head><meta charset="UT ...

vue-element-admin 的使用记录（三）

vue-element-admin 的使用记录

项目场景：

解决方案：

vue-element-admin 的使用记录（三）相关推荐

最新文章

热门文章