富文本的使用

1，下载富文本插件

npm install vue-quill-editor --save

2，可以直接在页面进行引入，也可以全局挂载，（只展示页面引入）

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

        我使用的是Visual Studio Code（VSC）因此放在mian文件中，效果如下：

3，页面使用（.vue结尾文件）

<template>
  <div>
        <!-- 富文本 -->
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      style="width: 96%; margin: 34px"
    />
    <!-- 公告发布按钮 -->
    <div class="releaseBtn">
      <el-button type="danger" size="medium" style="margin-left:48%" @click="releaseBtn" 
        >发布公告</el-button
      >
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: '', // 这是用于绑定富文本编辑器内容的数据属性
      editorOption: {
        // 这是用于配置富文本编辑器选项的对象
      },
    };
  },
  methods: {
    onEditorBlur(event) {
      // 当编辑器失去焦点时的逻辑
    },
    onEditorFocus(event) {
      // 当编辑器获得焦点时的逻辑
    },
    onEditorReady(editorInstance) {
      // 当编辑器准备就绪时的逻辑
    },
    releaseBtn() {
      // 发布公告按钮点击事件的逻辑
      alert(this.content)
    },
  },
};
</script>

<style>
</style>

 4，运行效果如下

  5，到这一步如果页面需要把所发送的富文本内容展示到前端，可以直接让后端把传过去的内容原封不动的返回到前端（以下为演示）

 

6，页面功能回显

可以直接使用v-html进行页面内容回显，此时拿到后端返回的数据

 <div v-html="this.announcementDetail"></div> //v-html绑定的值为上面输入框中绑定的值

7，前端回显效果