vue结合wangeditor富文本编辑器转化html和md文件
1.nodejs将md文件转化为html,以及将html文件转化为md
const { marked } = require("marked");
const express = require("express");
const fs = require("fs");
//html转md
var { Sitdown } = require("sitdown");
var sitdown = new Sitdown();
const app = express();
... app.get("/md", (req, res) => { //读取文件 const readMe = fs.readFileSync("./static/md/my.md", "utf-8"); //转化为html const markdownReadMe = marked(readMe); res.send(markdownReadMe); });
app.get("/save", (req, res) => {
const html = req.query.html;//此处使用get传输数据,post使用body-parser接收参数涉及对象转换问题,目前没有解决
var md = sitdown.HTMLToMD(html);
try {
fs.writeFileSync("./static/md/my.md", md, "utf-8");
res.send({ states: "ok", data: html });
} catch (err) {
res.send(err);
}
});
app.listen(4000, () => {
console.log("4000服务器开启了");
});
注意:此处的保存涉及到的数据传输使用的是get请求
2.前端Vue页面,参照wangeditor官网的案例demo加以改造
<template> <div> <div> <button @click="disableHandler">修改</button> <button @click="submit">保存</button> </div> <div style="border: 1px solid #ccc; margin-top: 10px;"> <!-- 工具栏 --> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /> <!-- 编辑器 --> <Editor ref="edit" style="height: 400px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="html" @onChange="onChange" @onCreated="onCreated" /> </div> <div style="margin-top: 10px;"> <textarea v-model="html" readonly style="width: 100%; height: 200px; outline: none;"></textarea> </div> </div> </template> <script> import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import axios from 'axios' export default { name: 'MyEditor', components: { Editor, Toolbar }, data() { return { editor: null, html: '<p>hello world</p>', toolbarConfig: { // toolbarKeys: [ /* 显示哪些菜单,如何排序、分组 */ ], // excludeKeys: [ /* 隐藏哪些菜单 */ ], }, editorConfig: { placeholder: '请输入内容...', // autoFocus: false, // 所有的菜单配置,都要在 MENU_CONF 属性下 MENU_CONF: {} } } }, async created() {
//获取数据 const { data } = await axios.get('/api/md') this.html = data //禁用修改 const editor = this.editor if (editor == null) return editor.disable() }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错 }, async onChange(editor) { // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容 this.html = editor.getHtml() }, async submit() { // console.log(typeof this.html, this.html) const { data } = await axios.get('/api/save', { params: { html: this.html } }) if (data.states === 'ok') { alert('保存成功') this.html = data.data const editor = this.editor if (editor == null) return //禁用修改 editor.disable() } }, disableHandler() { const editor = this.editor if (editor == null) return //启用修改 editor.enable() } }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时,及时销毁 editor ,重要!!! } } </script> <style src="@wangeditor/editor/dist/css/style.css"></style>
my.md文件
页面效果:
点击修改可以进行编辑,保存会相应保存到md文件,此处只实现了部分标签,还有需要特殊处理的标签,以及有些样式没有实现
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」