=============
前端_编辑页面
=============

1 安装Markdown编辑器mavonEditor

IDEA
    终端
        > cnpm install mavon-editor --save

/src/main.js：

...
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
...
Vue.use(mavonEditor)
...

将/node_modules/mavon-editor目录复制到/public目录下。

2 编辑文章

/src/views/Edit.vue：

<template>
  <div>
    <Header/>

    <div class="content">
      <el-form :model="form" :rules="rules" ref="form"
               label-width="100px" class="form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="摘要" prop="description">
          <el-input type="textarea" v-model="form.description" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <mavon-editor :codeStyle="codeStyle"
                        :externalLink="externalLink"
                        v-model="form.content" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">保存</el-button>
          <el-button @click="reset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header"

export default {
  name: "Edit",
  components: {Header},
  data() {
    return {
      form: {
        id: '',
        title: '',
        description: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入摘要', trigger: 'blur' }
        ],
        content: [
          { trequired: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      codeStyle: 'github-dark',
      externalLink: {
        markdown_css: () => '/mavon-editor/dist/markdown/github-markdown.min.css',
        hljs_js: () => '/mavon-editor/dist/highlightjs/highlight.min.js',
        hljs_css: (css) => '/mavon-editor/dist/highlightjs/styles/' + css + '.min.css',
        hljs_lang: (lang) => '/mavon-editor/dist/highlightjs/languages/' + lang + '.min.js',
        katex_js: () => '/mavon-editor/dist/katex/katex.min.js',
        katex_css: () => '/mavon-editor/dist/katex/katex.min.css'
      }
    };
  },
  methods: {
    submit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const _this = this
          this.$axios.post('/blog/save', this.form, {
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(response => {
            console.log(response)

            _this.$alert('保存成功。', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                _this.$router.push("/list")
              }
            });
          })
        }
        else {
          console.log('error submit!');
          return false;
        }
      });
    },
    reset(form) {
      this.$refs[form].resetFields();
    }
  },
  created() {
    const id = this.$route.params.id
    console.log(id)

    if (id) {
      const _this = this
      this.$axios.get('/blog/' + id).then(response => {
        const blog = response.data.data
        _this.form.id = blog.id
        _this.form.title = blog.title
        _this.form.description = blog.description
        _this.form.content = blog.content
      })
    }
  }
}
</script>

<style scoped>
.content {
  text-align: center;
}
</style>