问题展示
最近在使用 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运行代码即可