关于内容保存和展示的问题！！

[demigodliu]

需求：编辑器保存内容为html到数据库，便于前端网页直接展示看文章内容。

问题：数据库保存的是html，如果要修改文章，我把html代码放在编辑器内，显示的依然是html代码，怎么让他还原成markdown语法内容？？？

[bbbBBBSG]

大佬，我也遇到这个问题，还有一个就是我用md编写保存为html，在网页上加载出来的样式有些不一样

[demigodliu]

第一：最好把markdown语法内容和html代码都保存数据库。 第二：根据后台返回的markdown内容，直接绑定到mavon的v-model上。 第三：网页上预览文章，直接用后台返回的html代码，而不是用markdown内容。 第四：文章html没有样式的，请引入这个文件https://github.com/hinesboy/mavonEditor/blob/3a97f3fb8d0a586de6635debb9d830bd8931f00b/src/lib/css/markdown.css

第五：代码没有高亮的，在highlight的样式文件里，https://github.com/highlightjs/highlight.js/tree/master/src/styles 在这里面选择自己喜欢的风格，放在项目了，就可以完美使用了。

[bbbBBBSG]

我代码这样的

<template lang="html">
  <div class="detail">
    <div class="container">
      <h1 class="title">{{detailData.title}}</h1>

      <p v-html="detailData.content" style="margin-top: 15px"></p>
    </div>
  </div>
</template>
<script>
  export default {
    created() {
      this.detailId = this.$route.params.id
      this.initData();
    },
    data() {
      return {
        detailData: {
          id: "",
          title: "",
          intro: "",
          createDate: 1554274818529,
          thumb: "",
          typeOne: "11",
          typeTwo: null,
          typeTwoName: null,
          typeOneName: "",
          likes: 0,
          content: "",
          shareUrl: ""
        },
        loading: false,
        detailId: ''
      }
    },
    methods: {
      initData() {
        const self = this;
        self.url = self.$global.baseUrl + "detail/getNewsDetail?id=" + this.detailId;
        console.log(self.url);
        this.loading = true;
        self.$axios.get(self.url).then((response) => {
          if (response.data.error_code === '0') {
            self.detailData = response.data.result;
          } else {
            this.$message.error(response.data.reason);
          }
          this.loading = false;
        }).catch((error) => {
          this.loading = false;
          this.$message.error('加载失败，后台bug');
        });
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "../../../static/css/markdown.css";
  @import "../../../static/css/idea.css";
  .detail {
    overflow: hidden;
    background: none repeat scroll 0 0 #e6ffe3;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    width: auto;
    box-sizing: border-box;
    overflow-y: auto;
    min-width: 1200px;
  }

  .container {
    padding: 60px;
    border: 1px solid #d4d4d4;
    width: 800px;
    margin: 0 auto;
    background-image: linear-gradient(#fff,#e5eecc 100px);
    min-height: 700px;
  }
  .container p {
    line-height: 1.4em;
    width: 98%;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #d4d4d4;
    font-size: 110%;
    font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;
    word-break: break-all;
    word-wrap: break-word;
  }
  .title {
    font-size: 24px;
    font-weight: bold;
  }

</style>

效果是这样的，还是有问题呀 JIZHODNQT7~6UPEX7AM.png

[demigodliu]

不要觉得引入了markdown.css就可以了，都没看过里面css怎么写的吗？里面有个markdown-body好像，你不把这个class加在你要渲染的div上，别人怎么会渲染？

[bbbBBBSG]

可以了，谢谢啦，我只是一个初学者

[demigodliu]

客气了~

[ShawshankLin]

第一：最好把markdown语法内容和html代码都保存数据库。 第二：根据后台返回的markdown内容，直接绑定到mavon的v-model上。 第三：网页上预览文章，直接用后台返回的html代码，而不是用markdown内容。 第四：文章html没有样式的，请引入这个文件https://github.com/hinesboy/mavonEditor/blob/3a97f3fb8d0a586de6635debb9d830bd8931f00b/src/lib/css/markdown.css

第五：代码没有高亮的，在highlight的样式文件里，https://github.com/highlightjs/highlight.js/tree/master/src/styles 在这里面选择自己喜欢的风格，放在项目了，就可以完美使用了。

请问支持直接读服务器的目录文件，然后修改保存吗？