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

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

昨天在新建博客的页面使用了 wangEditor 编辑器, 这个编辑器相比较来讲是比较简洁好用的, 很符合我的审美, 但是平常我记笔记写博客都是用的Typora 写的markdown 笔记, 如果切换到富文本编辑器的话, 总是有些不适应, 所以经过考虑与调研, 还是决定使用 markdown 编辑器，编辑器名为： Vditor 。

Vditor简单介绍

• 简介

  Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular、Svelte。

• 官方地址

• 使用

  • 安装

    npm install vditor --save
    复制代码

  • 使用

    import Vditor from 'vditor'
    import "~vditor/src/assets/scss/index"
    
    const vditor = new Vditor(id, {options...})
    复制代码

  • demo

    new Vue({
      el: '#app',
      data: {
        contentEditor: '',
      },
      mounted () {
        this.contentEditor = new Vditor('vditor', {
          height: 360,
          toolbarConfig: {
            pin: true,
          },
          cache: {
            enable: false,
          },
          after: () => {
            this.contentEditor.setValue('hello, Vditor + Vue!')
          },
        })
      },
    })
    复制代码

    

  • API

    不多说了, 可以去看官网的API 传送阵

页面代码

src/views/NewBlog/index.vue

<!--
 * @Author: Tmier
 * @Date: 2021-06-24 22:48:18
 * @LastEditTime: 2021-06-25 23:43:10
 * @Description: 
 * @LastModifiedBy: Tmier
-->
<template>
  <div class="new-blog">
    <el-button type="primary" class="common-btn" @click="goBack">返回</el-button>
    <div class="blog-box">
      <el-form ref="formRef" :model="formModel" label-width="90px" label-position="right" :rules="formRules">
        <el-form-item label="标题: " prop="title">
          <el-input v-model.trim="formModel.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <!-- <el-form-item label="文章封面: ">
          <div class="news-upload showPic" @click="toUploadPic" v-if="picURL" v-loading="upLoadingFlag">
            <img :src="https://juejin.cn/post/picURL" alt />
          </div>
          <div class="news-upload" @click="toUploadPic" v-else>
            <div class="plus"></div>
          </div>
        </el-form-item>-->
        <!-- <el-form-item label="文章类型: " prop="type">
          <el-select v-model="formModel.type" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="摘要: " prop="abstract">
          <el-input v-model.trim="formModel.abstract" placeholder="请输入摘要"></el-input>
        </el-form-item>
        <el-form-item label="正文: " prop="content">
          <div class="contentBody" id="contentBody"></div>
        </el-form-item>
      </el-form>
      <div class="footBlock">
        <el-button class="common-btn" @click="goBack">返回</el-button>
        <el-button class="light" @click="toAsDraft">存为草稿</el-button>
        <!-- <el-button class="light">保存草稿</el-button> -->
        <el-button type="primary" @click="toPublic" class="common-btn">发布</el-button>
        <!-- <el-button class="deep" @click="toPublish" v-else>发布</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import Vditor from 'vditor'
import '../../../node_modules/vditor/dist/index.css'
export default {
  name: 'new-blog',
  components: {},
  data() {
    return {
      contentEditor: '',
      formModel: {
        title: '',
        abstract: '',
        recomindex: 9,
        content: '',
        cover: '',
        tags: []
      },
      formRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        abstract: [{ required: true, message: '请输入博文摘要', trigger: 'blur' }],
        content: [{ required: true, message: '请输入正文', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  mounted() {
    this.editInit()
  },
  methods: {
    // 存为草稿
    toAsDraft() {
      this.$message.info('待开发...')
    },
    // 点击发布
    toPublic() {
      console.log('this.formModel: ', this.formModel)
    },
    // 编辑器初始化
    editInit() {
      this.contentEditor = new Vditor('contentBody', {
        height: 630,
        toolbarConfig: {
          pin: true
        },
        cache: {
          enable: false
        },
        after: () => {
          this.contentEditor.setValue('hello, Vditor + Vue!')
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()
.new-blog {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .blog-box {
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    .footBlock {
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
复制代码

看一下效果:

好了, 编辑器更换完成~

明天见~