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