文本----简单编写文章的方法（上），自己编写好页面就上传到自己的服务器上，使用富文本编辑器进行编辑

<template>
  <div>
    你好世界
    <div class="editor">
      <quill-editor theme="snow"></quill-editor>
    </div>
  </div>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
  components: {
    QuillEditor
  }
}
</script>

1. <el-form-item>
2. <quill-editor></quill-editor>
3. </el-form-item>

<script>
export default {
  data() {
    return {
      // 表单的数据对象
      pubForm: {
        title: '',
        cate_id: '',
        content: '' // 文章的内容
      }
    }
  }
}
</script>

    <div class="editor">
      <quill-editor theme="snow"></quill-editor>
    </div>

<template>
  <div>
    你好世界
    <div class="editor">
      <quill-editor theme="snow" v-model:content="articleModel.content"></quill-editor>
    </div>
    <div>{{ articleModel.content }}</div>
  </div>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
  data() {
    return {
      articleModel: [{
        content: ''
      }]
    }
  },
  components: {
    QuillEditor
  }
}
 
</script>
<style lang="less">
.editor {
  width: 100%;
 
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
 
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
nav {
  padding: 30px;
}
 
nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
nav a.router-link-exact-active {
  color: #42b983;
}
</style>