Node系列学习之简单博客前台(六)

这是我参与更文挑战的第27天，活动详情查看：更文挑战

在Node系列学习之简单博客前台(五) 中将编辑器改为了markdown, 但是还有很多不完善的地方, 今天完善一下~

获取markdown中的内容

getValue()	获取 Markdown 内容
getHTML()	获取 HTML 内容

• markdown

  this.contentEditor.getValue()
  

• html

  this.contentEditor.getHTML()
  

获取到编辑的markdown内容后, 可以跟随表单一起传递给后端, 然后在文章详情页面获取markdown内容后解析

文章详情页面

先在列表页面添加下跳转方法

toBlogDetail(item) {
    this.$router.push({
        name: 'Blog-detail',
        query: {
            articleID: item.id
        }
    })
}

然后预览的话, 还是使用 vditor, 看一下官方文档如何设置预览:

static methods

• 不需要进行编辑操作时，仅需引入 method.min.js 后如下直接调用

Vditor.mermaidRender(document)
import VditorPreview from 'vditor/dist/method.min'
VditorPreview.mermaidRender(document)

• 需要对页面中的 Markdown 进行渲染时可直接调用 preview 方法，参数如下：

previewElement: HTMLDivElement,   // 使用该元素进行渲染
markdown: string,  // 需要渲染的 markdown 原文
options?: IPreviewOptions {
  mode: "dark" | "light";
  anchor?: number;  // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0
  customEmoji?: { [key: string]: string };    // 自定义 emoji，默认为 {}
  lang?: (keyof II18nLang);    // 语言，默认为 'zh_CN'
  emojiPath?: string;    // 表情图片路径
  hljs?: IHljs; // 参见 options.preview.hljs
  speech?: {  // 对选中后的内容进行阅读
    enable?: boolean,
  };
  math?: IMath; // 数学公式渲染配置
  cdn?: string; // 自建 CDN 地址
  transform?(html: string): string; // 在渲染前进行的回调方法
  after?(); // 渲染完成后的回调
  lazyLoadImage?: string; // 设置为 Loading 图片地址后将启用图片的懒加载
  markdown?: options.preview.markdown;
  theme?: options.preview.theme;
  renderers?: ILuteRender; // 自定义渲染 https://ld246.com/article/1588412297062
}

根据官方文档, 开始搞:

BlogList/blog-detail.vue

<!--
 * @Author: Tmier
 * @Date: 2021-06-27 23:03:38
 * @LastEditTime: 2021-06-27 23:56:22
 * @Description: 
 * @LastModifiedBy: Tmier
-->
<template>
  <div class="blog-detail">
    <div class="markdown-preview" ref="markdown-preview" style="height: 900px;" id="markdown-preview"></div>
  </div>
</template>

<script>
//import x from ''
import VditorPreview from 'vditor/dist/method.min'
VditorPreview.mermaidRender(document)
export default {
  components: {},
  data() {
    return {
      contentEditor: '',
      markdownString: `### 文章标题

> 嘿嘿哈`
    }
  },
  mounted() {
    this.editInit()
  },
  computed: {
    editorHeidghtAuto() {
      return 'calc(100vh)'
    }
  },
  methods: {
    // 编辑器初始化
    editInit() {
      VditorPreview.preview(document.querySelector('.markdown-preview'), this.markdownString)
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()
.blog-detail {
  padding: 20px;
}
</style>

然后可以简单看一下效果, 基本OK~