twitterblogvue引入mavonEditor编辑文章

引入 mavonEditor 进行文章编辑，前端部分大概成形
ArticleEdit.vue

<template>
  <div class="container">
    <div class="header">
      <div class="title-input">
        <blog-input placeholder="请输入文章标题" width="100%" height="30" fontSize="18" v-model="msg"></blog-input>
      </div>
      <div class="push-article">
        <blog-button info="发布文章" @click="saveArticle" type="primary"></blog-button>
      </div>
    </div>
    <div class="body">
      <mavon-editor v-model="content" :toolbars="toolbars"></mavon-editor>
    </div>
  </div>
</template>
<script lang='ts'>
import {Component, Vue, Watch, Prop} from "vue-property-decorator";
import BlogButton from "@/components/BlogButton.vue";
import BlogInput from "@/components/BlogInput.vue";
@Component({
  components: {
    BlogButton,
    BlogInput
  }
})
export default class extends Vue {
  private msg = "";
  private content = "";
  private toolbars = {
    bold: true, // 粗体
    italic: true, // 斜体
    header: true, // 标题
    underline: true, // 下划线
    mark: true, // 标记
    superscript: true, // 上角标
    quote: true, // 引用
    ol: true, // 有序列表
    link: true, // 链接
    imagelink: true, // 图片链接
    help: true, // 帮助
    code: true, // code
    subfield: true, // 是否需要分栏
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    /* 1.3.5 */
    undo: true, // 上一步
    trash: true, // 清空
    save: true, // 保存（触发 events 中的 save 事件）/* 1.4.2 */
    navigation: true // 导航目录
  };
  private saveArticle() {console.log("1111111111111");
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  .header {
    background-color: #ffffff;
    height: 10%;
    display: flex;
    align-items: center;
    .title-input {
      margin-left: 20px;
      height: 36px;
      width: 80%;
      display: inline-block;
    }
    .push-article {
      margin-left: 10px;
      height: 36px;
      width: 10%;
      display: inline-block;
    }
  }
  .body {
    width: 100%;
    height: 90%;
    .markdown-body {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

效果展示

项目地址

https://github.com/pppercyWan…