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

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，但是看起来不是特别的炫酷，更换一个，开干！

解决方案：

1. Editor.md一个开源的在线MarkDown编辑器，为什么选用它呢，功能强大（乱七八糟的功能很多啦），界面炫酷，黑白色的界面看起来很炫的喔。
   
2. 通过 NPM 安装：
   npm install editor.md
   
3. 安装完成后,我们直接将远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-xxxx
    theme: '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) theme
      editorTheme: '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 到 Textarea
    searchReplace: 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,
};

6. 这样我们就封装好了一个自己的基于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组件了。

7. 接下来就是排除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"
    };

8. 检验一下我们的组件是否和官方的组件支持的功能一模一样，可能由于cdn或者其他原因，部分参数或数学公式的格式不支持，我们去editor官网，找到完整示例，将内容全部拷到我们自己的组件中，检测功能是否全部支持，如果两边一致说明全部支持。一模一样啊！包括Emoji表情打不开都一样

9. 一看是表情包的地址报错，本来打算换一个cdn地址（http://www.emoji-cheat-sheet.com/graphics/emojis/
   无法使用，https://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/
   也无法使用 尴了个尬），结果找了好几个都不可以用，算了自己下一个吧emoji下载地址！

10. 将下载好的表情包文件放在static中，修改editormd.js中的地址为我们的静态文件如下

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

到此为止全部搞定 收工！（其实后面还有很多坑）

`