Vue + Element UI+springboot使用富文本编辑器

1、下载vue-quill-editor组件

npm install vue-quill-editor 

2、组件引入· 富文本组件

import { quillEditor } from "vue-quill-editor";

3、引入相关css

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

4、注册组件

  created() {
  },
  components: {
    quillEditor
  },

5、组件中使用

         <el-col :span="24">
            <el-form-item label="内容" prop="nContent">
              <quill-editor
                ref="text"
                v-model="form.nContent"
                class="myQuillEditor"
                :options="editorOption"
              />
            </el-form-item>
          </el-col>

6、基本配置

    data() {
	 form: {nContent:undefined},
	 editorOption: {}
	},
	methods: {
	
	}

效果预览

7、VUE页面回显

<p  v-html="form.content">{{form.nContent}}</p>