Vue中集成MarkDown和富文本编辑器

markdown 编辑器：tui.editor

1. 安装tui.editor。

npm install @toast-ui/editor@3.2.2 --save

2. 构建HTML容器，用户展示编辑器内容。

<template>
  <el-card>
    <!-- 用于展示编辑器 -->
    <div ref="markdownBox"></div>
  </el-card>
</template>

3. 初始化和加载编辑器editor，并且处理国际化内容

import MkEditor from '@/toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/zh-cn';
import { onMounted,ref } from 'vue';
import store from '@/store';

let mkEditor;
const markdownBox = ref(null);

// 调用初始化方法
onMounted(()=>{
  initEditor();
});

// 编辑器的初始化和加载
const initEditor = ()=> {
  mkEditor = new MkEditor({
    markdownBox.value,
    height:'500px',
    previewStyle: 'vertical',
    // 国际化信息存储在store中
    language: store.getters.language === 'zh' ? 'zh-CN' : 'en'
  })
  // 渲染编辑器
  mkEditor.getMarkdown();
}

// 伪代码，用于监听语言的变化，并做编辑器的销毁和重新加载
// 因为在改变语言的时候，markdown不重新加载，无法实现语言的切换
const watchLanguage = () => {
  // 先记录编辑器内的内容
  const htmlStr = mkEditor.getHTML();
  // 销毁编辑器
  mkEditor.destroy();
  // 初始化编辑器
  initEditor();
  // 将记录的编辑器内容赋值到编辑器中
  mkEditor.setHTML(htmlStr);
}

// 伪代码，保存编辑器中的内容
const commitContent = async () => {
  // 获取编辑器内容
  const content = mkEditor.getHTML();
  // 调用保存接口，保存数据
  const res = await saveContent(content);
  // 清空编辑器内容
  mkEditor.setHTML('');
  // 页面跳转，route.path('/home');
  // ……
}

富文本编辑器：wangEditor

1. 安装wangEditor。

npm install wangeditor --save

2. 构建HTML容器，用户展示编辑器内容。

<template>
  <el-card>
    <!-- 用于展示编辑器 -->
    <div ref="wangeditorBox"></div>
  </el-card>
</template>

3. 初始化和加载编辑器editor

import E from "wangeditor";
import { onMounted, ref } from "vue";

let weditor;
const wangeditorBox = ref(null);

onMounted(() => {
  initEditor();
});

// 初始化和加载编辑器
const initEditor = () => {
  // 创建编辑器
  weditor = new E(wangeditorBox.value);
  weditor.config.zIndex = 1;
  // 菜单栏提示
  weditor.config.showMenuTooltips = true;
  weditor.config.menuTooltipPosition = "down";
  // 加载编辑器
  weditor.create();
};

4. 国际化处理，wangEditor的国际化使用的是i18next。

• 安装i18next

npm install i18next --save

• 对wangEditor进行国际化处理

import i18next from "i18next";
import store from "@/store";

// 在上面的initEditor中加入国际化处理相关配置
const initEditor = () => {
  // ……
  // 国际化处理
  weditor.config.lang = store.getters.language === "zh" ? "zh-CN" : "en";
  weditor.i18next = i18next;

  weditor.create();
};

5. 获取编辑器中的内容，并提交。

const commitContent = async () => {
  // 获取内容
  const content = weditor.txt.html();
  // 提交内容
  const res = await saveContent(content);
};

编辑器的选择标准

markdown 编辑器和富文本编辑器插件有很多，该如何选择。

• 首先选择使用人比较多的，能够基本保证这个插件功能比较完善，而且 bug 较少。
• 另外就是选择还在更新的，也就意味着此编辑器还有维护，持续 bug 修复，后续使用将会更稳定。
• 最后就是需要注意编辑器使用的开源协议，这个是为了避免后续因为版权导致各种问题，一般选择MIT和BSD协议的开源项目就可以啦。

这种选择标准同样适用于其他的插件的选择。