简单实现一个目标： 点击a链接，就能够看到展示文章：
第一步：这里我们要用到富文本编辑器，参考视频资源：
第二步：先打开我们的Vue项目，把Vue项目给跑起来：
第三步 全局组件中引入富文本编辑器，这种写法自己搞不定，先采取局部导入富文本编辑器吧！！！
<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>
第四步 在一个Vue页面中，使用富文本编辑器：这是没有写editor的样子
1. <el-form-item> 2. <quill-editor></quill-editor> 3. </el-form-item>
第五步 使用v-model绑定content数据。v-model="content"
第六步：在文章的data中添加数据参数：
<script> export default { data() { return { // 表单的数据对象 pubForm: { title: '', cate_id: '', content: '' // 文章的内容 } } } } </script>
第七步： 放入富文本编辑器的组件，这样我们就可以看到样式了：
<div class="editor"> <quill-editor theme="snow"></quill-editor> </div>
第八步：这样就可以看到富文本编辑器的
第九步：接下来想办法，如何能够将里面的内容，能够传入到数据库里
第十步：富文本编辑器如何绑定数据呢？这里用到的方法，是参考视频资料：
第十一步：这里使用了v-model作为数据绑定
第十二步 v-mode，看一下v-model,数据绑定的写法在script的标签中的写法：
<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>
这样富文本就能写东西了
