解决vue-element-admin 组件Markdown 预览窗口太小问题

问题展示

最近在使用 vue-element-admin ，然后当在使用Markdown 编辑器的时候发现了Markdown 输出样式有问题，如图：

修复后的效果

 

问题解释

大致意思是vue-element-admin master 分支使用的markdown 编辑器是基于tui.editor 这个库。

• Markdown is based on tui.editor ，simply wrapped with Vue. Documentation
• Originally used simplemde-markdown-editor as the markdown editor, but this library has not been updated and maintained for a long time, and there is also the risk of xss. So after the v3.9.3+ version, use tui.editor as the new editor. All the next documents are Based on tui.editor it. More Content.

翻译下就是：

最初使用simplemde-markdown-editor作为markdown编辑器，但是该库很长时间没有更新和维护，并且还存在xss的风险。 因此，在v3.9.3 +版本之后，请使用 tui.editor 作为新编辑器。 接下来的所有文档都基于tui.editor它。

但是tui.editor在后来的版本更新中改名成了@toast-ui/editor

问题解决

1.修改package.json

方法一：修改package.json

// 1.将package.json中的
"dependencies": {
    "tui-editor": "1.3.3",
}
// 替换为
"dependencies": {
    "@toast-ui/editor": "^2.2.0",
}
// 2.删除node_modules文件
// 3.重新安装依赖
npm i

 方法二：使用命令行

// 1.删除node_modules文件夹

// 2.卸载有问题的插件
npm uninstall tui-editor

// 3.安装@toast-ui/editor
npm i @toast-ui/editor

// 4.重新安装依赖
npm i 

2.更改组件内容

components/MarkdownEditor/index.vue

<template>
  <div :id="id" />
</template>

<script>
// deps for editor
import "codemirror/lib/codemirror.css"; // Editor's Dependency Style
import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style

// import Editor from 'tui-editor' 有markdown预览窗口问题
import Editor from "@toast-ui/editor"; // 新版
import defaultOptions from "./default-options"; // 导入默认选项参数

export default {
  name: "MarkdownEditor",
  props: {
    value: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      required: false, // 是否必须设置
      default() {
        return (
          "markdown-editor-" +
          +new Date() +
          ((Math.random() * 1000).toFixed(0) + "")
        );
      },
    },
    options: {
      // 创建tui-editor初始化参数
      type: Object,
      default() {
        return defaultOptions;
      },
    },
    mode: {
      // 默认模式为markdown格式
      type: String,
      default: "markdown",
    },
    height: {
      // 高度
      type: String,
      required: false, // 是否必须设置
      default: "300px", // 默认高度
    },
    language: {
      // 语言
      type: String,
      required: false, // 是否必须设置
      default: "en_US", // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  computed: {
    // 编辑器选项
    editorOptions() {
      // Object.assign(): 用于将所有可枚举属性的值从一个或多个源对象分配到目标对象
      const options = Object.assign({}, defaultOptions, this.options);

      // 设置默认编辑类型
      options.initialEditType = this.mode;

      // 设置高度
      options.height = this.height;

      // 设置语言
      options.language = this.language;
      return options;
    },
  },
  watch: {
    // 监控value发生改变后执行方法
    value(newValue, preValue) {
      if (newValue !== preValue && newValue !== this.editor.getValue()) {
        // 设置当前编辑新值
        this.editor.setValue(newValue);
      }
    },
    // 语言发生改变执行方法
    language(val) {
      // 重置编辑器
      this.destroyEditor();
      // 初始化编辑器
      this.initEditor();
    },
    // 高度发生改变执行
    height(newValue) {
      // 设置新的高度
      this.editor.height(newValue);
    },
    // 模式发生改变执行
    mode(newValue) {
      // 不更改原有参数，创建新的参数存储模式
      this.editor.changeMode(newValue);
    },
  },
  // 页面初始化执行
  mounted() {
    this.initEditor();
  },
  // 退出时执行
  destroyed() {
    this.destroyEditor();
  },
  methods: {
    // 初始化编辑器
    initEditor() {
      // 创建一个tui-editor对象，并赋值给当然的editor
      this.editor = new Editor({
        // 绑定编辑器的id
        el: document.getElementById(this.id),
        // 设置初始化参数
        ...this.editorOptions,
      });
      // 判断当前value是否为空
      if (this.value) {
        // 不为空设置编辑的内容
        this.editor.setMarkdown(this.value);
      }
      // 子组件可以使用 $emit 触发父组件的自定义事件
      // 为editor属性绑定change事件
      this.editor.on("change", () => {
        // 触发当前实例上的事件，获取编辑属性中的内容
        this.$emit("input", this.editor.getMarkdown());
      });
    },
    // 销毁编辑器
    destroyEditor() {
      // 如果为空return
      if (!this.editor) return;

      // 从事件类型解除绑定change事件
      this.editor.off("change");
      // 删除工具栏项
      this.editor.remove();
    },
    setValue(value) {
      // 设置内容
      this.editor.setMarkdown(value);
    },
    getValue() {
      // 获取内容
      return this.editor.getMarkdown();
    },
    setHtml(value) {
      // 设置html
      this.editor.setHtml(value);
    },
    getHtml() {
      // 获取html
      return this.editor.getHtml();
    },
  },
};
</script>

components/MarkdownEditor/default-options

// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
// 默认选项
export default {
  minHeight: "200px", // 最小高度
  previewStyle: "vertical", // 预览风格   vertical 垂直
  useCommandShortcut: true, // 使用命令快捷键
  useDefaultHTMLSanitizer: true, // 使用默认html清洁
  usageStatistics: false, // 使用情况统计
  hideModeSwitch: false, // 隐藏模式开关
  toolbarItems: [
    // 工具栏选项按钮布局顺序
    "heading", // 文字标题
    "bold", // 文字加粗
    "italic", // 文字倾斜
    "strike", // 文字删除线
    "divider", // 分割线
    "hr", // 水平分隔线
    "quote", // 引述
    "divider", // 分割线
    "ul", // 无序列表
    "ol", // 有序列表
    "task", // 任务
    "indent", // 向右缩进
    "outdent", // 向左缩进
    "divider", // 分割线
    "table", // 插入表格
    "image", // 插入图标
    "link", // 引用链接
    "divider", // 分割线
    "code", // 代码
    "codeblock", // 代码块
  ],
};

最后npm run dev运行代码即可