创新设计记录-5：博客功能-前端

创新设计记录-5：博客功能-前端

工具介绍：vditor

Vditor——一款开源的markdown在线编辑工具

介绍：

vditor可以在线编辑渲染markdown文件，可以支持分屏编辑，也可以像Typora那样所见即所得，并且支持他自己的快捷键模式。

使用方法：

<script>
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!')
      },
    })
  },
})
</script>

创建一个变量contentEditor，在页面监听Dom挂载的时候，创建一个Vditor实例，

new Vidtor('vditor', option?)第一个参数为DOM标签的id，后面的是这个编辑器的配置。

代码

 <div id="vditor" class="vditor"></div>
<script>
 mounted() {
     this.vidtor = new Vditor('vditor', {
         "height": 500,
         "width": 1200,
         "mode": "wysiwyg",
         "cache": {
             "enable": false
         },
         "preview": {
             "markdown": {
                 "autoSpace": true
             }
         },
         "outline": {
             "enable": true
         },
         "counter": {
             "enable": true
         },
         "mode": "ir",
         "preview": {
             "mode": "both"
         },
         "value": this.content
     })

 },
</script>

在初始的时候显示一个，将一个div标签渲染成为一个vditor编辑器，编辑器的高度宽度，显示模式等等配置都如上图所示。

博客的提交：

 async submit() {
     if (!this.title) {
         ElMessage({
             message: '请填写标题',
             type: 'error'
         })

     } else {
         let data = {
             blog_id: this.id,
             content: this.vidtor.getValue(),
             title: this.title,
             user_id: localStorage.getItem('user_id'),
             save_to_kb: this.save_to_kb
         }
         // this.upload_loading = true
         let loading_ins = ElLoading.service({
             target: document.getElementById('vditor'),
             text: '文件上传中……',
         })
         // console.log('blog_editor:submit:', data);
         // 编辑和添加公用
         await add_blog(data)
             .then(res => {
             // console.log('blog_editor:addblog:', res);
             if (res.data.code == 200) {
                 let msg = this.id == '' ? '添加成功' : '修改成功'
                 ElMessage({
                     message: msg,
                     type: 'success'
                 })
             }
             loading_ins.close()
             // this.upload_loading = false
             this.$router.back()
         })
     }

 },

利用vditor的GetValue()方法，将编辑器中的的原始内容获取出来，发送给后端，对其进行保存。

编辑&删除博客

标签栏中，在每个博客的后面，有编辑和删除两个操作。

编辑操作就是，获取该博客的信息，路由到编辑器界面，对其进行修改&保存。

删除操作就是，在点击删除按钮之后出现一个确认删除的弹窗，确认之后就会删除

<script>
//删除
delete_blog() {
    if (this.blog_id != '') {
        ElMessageBox.confirm(
            '确定删除该博客吗',
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            delete_blog(this.blog_id).then(() => {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                this.init_bloglist()
                this.blog_id = ''
            })
        })
    }
},
//编辑 
 edit_blog() {
     if (this.blog_id != '') {
         let blog = this.bloglist[this.bloglist.findIndex(item => item.id === this.blog_id)]
         this.$router.push({
             path: '/blog_editor',
             query: {
                 blog_id: this.blog_id,
                 content: blog.content,
                 title: blog.title
             }
         })
     }
 }       

博客评论和论坛部分的内容相关，留到论坛部分讲解。