VUE 使用 editor.md （二）

接前一篇文章，前面说我的预览界面，实际上就是编辑组件的界面，只是把编辑预览时的closed按钮给隐藏了。

后面发现每次加载的时候，总会在上面空出一段编辑栏的空白区域。于是后面又花时间重新研究预览组件，最后还是弄出来了。

上代码

<template>
  <div class="markdown-view-box">
    <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css">
    <link rel="stylesheet" href="/static/editor.md/examples/css/style.css" />
    <link rel="stylesheet" href="/static/editor.md/css/editormd.preview.min.css" />
    <div id="markdown-view">
      <textarea style="display: none;">{{doc.content}}</textarea>
    </div>
  </div>
</template>
<script>
  import scriptjs from 'scriptjs'
  import { defaultConfig } from '../../config/editor.md'
  export default {
    props: {
      viewId: {
        'type': String,
        'default': 'markdown-view'
      },
      config: { // 编辑器配置
        type: Object
      },
      initData: {
        'type': String
      },
      initDataDelay: {
        'type': Number, // 延迟初始化数据时间，单位毫秒
        'default': 0
      }
    },
    data: function () {
      return {
        doc: {},
        editor: null
      }
    },
    methods: {
      fetchScript: function (url) {
        return new Promise((resolve) => {
          scriptjs(url, () => {
            resolve()
          })
        })
      },
      getDoc: function () {
        return this.doc
      },
      getConfig: function () {
        return { ...defaultConfig, ...this.config }
      },
      forceUpdate: function () {
        this.$forceUpdate()
      },
      initView: function () {
        (async () => {
          await this.fetchScript('/static/editor.md/jquery.min.js')
          await this.fetchScript('/static/editor.md/lib/marked.min.js')
          await this.fetchScript('/static/editor.md/lib/prettify.min.js')
          await this.fetchScript('/static/editor.md/lib/raphael.min.js')
          await this.fetchScript('/static/editor.md/lib/underscore.min.js')
          await this.fetchScript('/static/editor.md/lib/sequence-diagram.min.js')
          await this.fetchScript('/static/editor.md/lib/flowchart.min.js')
          await this.fetchScript('/static/editor.md/lib/jquery.flowchart.min.js')
          await this.fetchScript('/static/editor.md/editormd.min.js')
          this.$nextTick(() => {
            this.editor = window.editormd.markdownToHTML(this.viewId, this.getConfig())
          })
        })()
      },
      setDoc (doc) {
        if (doc) {
          let vm = this
          vm.doc = doc
          let markdownViewDiv = document.getElementById('markdown-view')
          if (markdownViewDiv) {
            markdownViewDiv.innerHTML = '<textarea style="display: none;"></textarea>'
            vm.initView()
            if (doc.content) {
              markdownViewDiv.getElementsByTagName('textarea')[0].innerHTML = doc.content
            }
          }
        }
      },
      showContent (id) {
        let vm = this
        vm.$store.state.editor.isEditing = false
        vm.axios.get('/interfaceApi/getDocById/' + id)
          .then(function (response) {
            if (response.data && response.data.pageInfo && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
              let doc = response.data.pageInfo.list[0]
              if (doc) {
                vm.doc = doc
                let markdownViewDiv = document.getElementById('markdown-view')
                if (markdownViewDiv) {
                  markdownViewDiv.innerHTML = '<textarea style="display: none;"></textarea>'
                  vm.initView()
                  if (doc.content) {
                    markdownViewDiv.getElementsByTagName('textarea')[0].innerHTML = doc.content
                  }
                }
              }
            }
          })
          .catch(function (error) {
            vm.$message({
              message: error.data.serverResult.resultMessage,
              type: 'error'
            })
          })
      }
    },
    mounted: function () {
      let vm = this
      let docId = vm.$router.currentRoute.name
      vm.showContent(docId)
    }
  }
</script>

在页面中使用，通过一个页面布尔变量来控制编辑、预览组件的切换：

      <tw-markdown-view v-if="!editor.isEditing" ref="markdownView"></tw-markdown-view>
      <tw-markdown-editor v-if="editor.isEditing" ref="markdown"></tw-markdown-editor>

配置文件使用编辑组件同一个配置文件，这里不再贴出，可以参考第一篇文章。

 

代码说明：

每次切换到预览时，先通过接口获取预览展示的文档内容，然后根据  markdown-view  这个id，获取页面中展示文档内容的div，然后将div中的 textarea 标签替换成空白状态。再调用当前预览组件的初始化方法initView，进行一次初始化，然后将文档内容，放入textarea中去，这样就可以将markdown格式的文档，通过editor.md转化成html展示到页面上去。

我这个组件也是在网上参考了好多例子才写出来的，具体参考了哪些已经搞不太清了，只能默默的感谢下那些作者了。