vue2 使用 markdown插件 v-md-editor
效果
编辑时
发布后预览
配置
1、npm安装插件
npm i @kangc/v-md-editor -S
2、main.js 全局引入插件
/* v-md-editor 编辑器 start */
/* 1、v-md-editor 基础引用 */
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
Prism,
});
/* 2、v-md-editor 代码块关键字高亮 */
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// 引入所有语言包
import hljs from 'highlight.js';
VueMarkdownEditor.use(githubTheme, {
Hljs: hljs,
});
Vue.use(VueMarkdownEditor);
/* 3、v-md-editor 二次封装 */
import mdEditor from '@/components/v-md-editor/index';
Vue.component('MdEditor', mdEditor);
/* v-md-editor 编辑器 end */
3、二次封装插件
1、二次封装
2、main.js 全局引入( 第二部已加入)
在 components 目录下创建 v-md-editor 文件夹并创建文件 index.vue
index.vue 代码如下
<template>
<div>
<v-md-editor
v-model="editorValue"
:disabled-menus="[]"
@upload-image="handleUploadImage"
height="calc(100vh - 150px)"></v-md-editor>
</div>
</template>
<script>
export default {
name: 'mdEditor',
data() {
return {
editorValue: this.content != null ? this.content : "",
}
},
props: {
// 接收值父组件传递值
content: String
},
methods: {
// v-md-editor 文件上传
handleUploadImage(event, insertImage, files) {
// console.log(files);
// 上传
for (let i = 0; i < files.length; i++) {
this.crud.upload(files[i], "image/vMdEditor/").then(res => {
// 获取返回数据
let data = res.data.data;
// 添加图片到内容
insertImage({
url: data.url,
desc: data.name
});
});
}
},
},
watch: {
editorValue: function (newNum, oldNum) {
// 修改调用者传入的值
this.$emit('update:content', newNum)
}
},
}
</script>
<style>
</style>
4、使用
在任意地方使用
<MdEditor :content.sync="obj.content"></MdEditor>
5、关于编辑无法回显
初始化 MdEditor 编辑器过早, 可能导致数据无法正常回显
通过 v-if 控制 MdEditor 加载时间 (如下：在调用接口获取数据完成之后修改 initSuccess = true)
以上代码参考的这位朋友，有些地方我做出来修改。
vue2 使用 markdown插件 v-md-editor
以上代码功能，左边markdown右边预览。纯预览功能如下：
1、预览组件
<!-- preview-class 为主题的样式类名，例如vuepress就是vuepress-markdown-body -->
<v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
data() {
return {
html: '',
};
},
2、全局配置main.js添加如下代码：
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import '@kangc/v-md-editor/lib/style/preview-html.css';
// 引入使用主题的样式
// import '@kangc/v-md-editor/lib/theme/style/vuepress';
Vue.use(VMdPreviewHtml);
注意
组件渲染的是markdown格式的数据，存数据库要存html结构的数据，这个需要做转化。
将html的数据转为markdown的数据格式
1、安装turndown
npm install turndown
2、转换js代码
const TurndownService = require("turndown").default;
var turndownService = new TurndownService();
// this.html为数据库保存的html格式，转换成了markdown格式
var markdown = turndownService.turndown(this.html);
this.content = markdown;
将markdown的数据转为html的数据格式
import VueMarkdownEditor, {
xss } from '@kangc/v-md-editor';
// 调用方法将 markdown 转换成 html 并使用 xss 过滤
const html = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render(markdown));
this.html = html;
