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&nbsp;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文件,此处只实现了部分标签,还有需要特殊处理的标签,以及有些样式没有实现

 

posted @   lijun12138  阅读(3630)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示