Topwo博客-Vue、Nuxt整合Editor.md编辑器

Topwo博客

您现在的位置是：Topwo博客>>JavaScript文章

Vue、Nuxt整合Editor.md编辑器

发布时间：2021-12-14作者：Topwo来源：原创点击：437

**Editor.md**是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

## 一、所用工具说明
1. Vue或者Nuxt
2. Editor.md

## 二、前期准备
1. 下载Editor.md编辑器，官网地址: [https://github.com/pandao/editor.md](https://github.com/pandao/editor.md)
2. 创建Vue或者Nuxt项目

## 三、创建Editor.md编辑器组件
### 1.将已经下载好的Editor.md编辑器文件解压，重命名为editor.md
### 2.将editor.md文件夹复制到Vue项目的public目录下（或者Nuxt项目的static目录下）
### 3.Vue项目需要用到scriptjs来加载js，执行下面命令安装（Nuxt项目可以不用）:

```shell
npm install --save scriptjs
```

### 4.Nuxt项目配置nuxt.config.js来加载js
```javascritpt
module.exports = {
    env: {
        NUXT_APP_BASE_URL: "",
    },
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'Powered by Topwo',
        htmlAttrs: {
            lang: 'en'
        },
        meta: [
        ],
        link: [
            { rel: 'stylesheet', href: '/libs/editor.md/css/editormd.min.css' },
        ],
        script: [
            { src: '/libs/editor.md/jquery.min.js', async: false, defer: true  /* 延迟加载 */ },
            { src: '/libs/editor.md/lib/marked.min.js', async: false, defer: true },
            { src: '/libs/editor.md/lib/prettify.min.js', async: false, defer: true },
            { src: '/libs/editor.md/lib/raphael.min.js', async: false, defer: true },
            { src: '/libs/editor.md/lib/underscore.min.js', async: false, defer: true },
            { src: '/libs/editor.md/editormd.min.js', async: false, defer: true },
        ]
    },

// Global CSS: https://go.nuxtjs.dev/config-css
};
```

### 5.为Editor.md创建组件 EditormdCompo.vue

```javascript
<template>
    <div :id="editormdId" class="editormd-compo">
        <link rel="stylesheet" :href="editormdPath + '/css/editormd.min.css'">
        <textarea style="display:none;" v-model="editormdContent"></textarea>
    </div>
</template>

<script>
/*Nuxt项目注释以下3行*/
if (typeof window !== 'undefined') {
    var scriptjs = require('scriptjs');
}
export default {
    name: 'EditormdCompo',
    props: {
        editormdType: {
            type: String,
            default: 'editor'
        },
        editormdId: {
            type: String,
            default: 'editormd'
        },
        editormdContent: {
            type: String,
            default: ''
        },
        editormdPath: {
            type: String,
            default: process.env.BASE_URL + '/libs/editor.md', // Vue项目
            // default: process.env.NUXT_APP_BASE_URL + '/libs/editor.md', // NUXT项目，可以在nuxt.config.js中定义个NUXT_APP_BASE_URL
        },
        editormdConfig: { // 编辑器配置
            type: Object,
            default() {
                return {
                    width: "100%",
                    height: 600,
                    path: process.env.BASE_URL + 'libs/editor.md' + '/lib/',
                    // theme: 'dark',
                    // previewTheme: 'dark',
                    // editorTheme: 'pastel-on-dark',
                    markdown: '',      // 默认填充内容
                    lineWrapping: true, // 编辑框不换行
                    codeFold: true,                 // 代码折叠
                    placeholder: '请输入...',
                    syncScrolling: 'single',
                    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: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL: "/api/backapi/admin/uploadfileeditormd",
                    /*
                    上传的后台只需要返回一个 JSON 数据，结构如下：
                    {
                        success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                        message : "提示的信息，上传成功或上传失败及错误信息等。",
                        url     : "图片地址"        // 上传成功时才返回
                    }
                    */
                    // onload: () => {
                    // },
                    // onchange: () => {
                    // }
                };
            },
        },
    },
    emits: {
        onChange: null,
    },
    data() {
        return {
            editormdInstance: null,
        };
    },
    mounted() {
        //加载依赖
        scriptjs([
            `${this.editormdPath}/jquery.min.js`,
            `${this.editormdPath}/lib/marked.min.js`,
            `${this.editormdPath}/lib/prettify.min.js`,
            `${this.editormdPath}/lib/raphael.min.js`,
            `${this.editormdPath}/lib/underscore.min.js`,
        ], () => {
            scriptjs(`${this.editormdPath}/editormd.min.js`, () => {
                this.$nextTick(() => {
                    if (window.editormd) {
                        // this.editormdConfig.onload = () => {
                        //     this.editormdInstance.setMarkdown(this.editormdContent);
                        // };
                        this.editormdConfig.onchange = () => {
                            this.$emit('onChange', this.editormdInstance.getMarkdown(), this.editormdInstance.getPreviewedHTML());
                        }
                        //editormdType等于editor是编辑，否则展示数据
                        if (this.editormdType == 'editor'){
                            this.editormdInstance = window.editormd(this.editormdId, this.editormdConfig);
                        } else {
                            this.editormdInstance = window.editormd.markdownToHTML(this.editormdId, this.editormdConfig)
                        }
                    }
                });
            });
        });
    }
};
</script>
```

## 四、组件的使用
```javascript
<template>
    <div>
        <EditormdCompo editormdType="editor" :editormdContent="initContentData" :editormdId="editormdId"/*指定自己的editormdId，前台可能需要，后台一般可以省略*/ @onChange="syncContent"/*后台编辑需要，前台没有编译功能可以省略*/></EditormdCompo>
    </div>
</template>

<script>
  import EditormdCompo from "../../components/EditormdCompo";
  export default {
    components: { EditormdCompo },
    data() {
        initContentData:''//这里是初始化是编辑器回显内容	
    },
    methods: {
        //当编辑器内容改变时候，会触发该事件，并返回一个html和markdown文本
        syncContent(html, text) {
        }
    }
</script>
```

上一篇：操作task之applicationVariants

下一篇：什么是挂载，Linux挂载详解