pc端富文本编辑器Vditor库结合vue的使用

效果图

在项目中添加一个word编辑器。下面代码是我在写得时候做的，接口可能不通

主文件

<template>

  <div class="word-order-modal">

    <div class="modal-mask"></div>

    <div class="modal-content">

      <div class="report-preview">

        <div class="report-preview-header">

          <div class="report-preview-title">

            { { templateInfo.name ? `报告名称：${templateInfo.name}` : "报告内容" }}

          </div>

          <div class="report-preview-btn-groups">

            <lc-button type="primary" class="report-preview-btn" @click="handleSave">保存</lc-button>

            <div class="report-preview-btn report-preview-btn--subscribed" @click="handleSubscription">

              <img src="../../../analysis/lc-ftr-report-template/images/subscribed.svg" class="report-preview-btn-icon"

                alt="已订阅" v-if="subscriptionStatus === 1" />

              <img v-else src="../../../analysis/lc-ftr-report-template/images/notSubscribed.svg"

                class="report-preview-btn-icon" alt="订阅" />

              <span class="report-preview-btn-text">{ {

                subscriptionStatus === 1 ? "已订阅" : "订阅"

              }}</span>

            </div>

            <lc-button class="report-preview-btn report-preview-btn-download" @click="handleDown">

              <img src="../../../analysis/lc-ftr-report-template/images/download.svg" alt="下载" />

            </lc-button>

            <div class="report-preview-btn report-preview-btn-divider"></div>

            <lc-button class="report-preview-btn" @click="handleSaveAs">另存为新模板</lc-button>

          </div>

        </div>

        <!-- <div v-if="isOpen2.type === 'edit'" class="report-preview-markdown" ref="vditor">我是要编辑的内容{ { wordcontent }}</div>

      <div v-else class="report-preview-markdown" ref="vditor"></div> -->

        <div class="report-preview-markdown" ref="vditor">{ { wordcontent }}</div>

      </div>

      <div class="btn-box" slot="footer">

        <lc-button type="primary" @click.native="handleSubmit()">确定</lc-button>

        <lc-button @click="closeModal">取消</lc-button>

      </div>

      <!-- 导出报告 -->

      <export-file :visible.sync="showExportFile" :templateName="templateInfo.name" :config="templateInfo.config"

        :templateId="templateInfo.id || ''" />

      <!-- 保存 | 另存为 -->

      <save-as :visible.sync="showSaveAs" :saveType="saveType" :saveLoading="saveContentLoading || saveLoading"

        @handleSave="saveReportTemplate" @closeModal="closeModal" :getnotice="getnotice" />

      <!-- 订阅配置 -->

      <subscription-modal :visible.sync="showSubscriptionModal" :templateName="templateInfo.name"

        :templateId="templateInfo.id" @success="getSubscribeInfo()" />

    </div>

  </div>

</template>

<script>

import axios from 'axios';

import Vditor from 'vditor';

import 'vditor/dist/index.css';

import { SSE } from '@/common/repo/sse/sse';

import { mapState, mapActions, mapMutations } from 'vuex';

import { StoreNamespace } from '@/store/store-namespace.data';

import { LcButton } from '@/iview-shared/lc-button';

import { removeWatermark, setWaterMark } from '../../../core/utils/warterMarkVue';

import SaveAs from '../../../analysis/lc-ftr-report-template/lc-ftr-report-template-create/components/report-preview/save-as';

import ExportFile from '../../../analysis/lc-ftr-report-template/lc-ftr-report-template-create/components/report-preview/export-file';

import SubscriptionModal from '../../../analysis/lc-ftr-report-template/lc-ftr-report-template-create/components/report-preview/subscription-modal';

import toDateD from '../date';

export default {

  name: 'wordOrderModal',

  components: {

    LcButton,

    SaveAs,

    ExportFile,

    SubscriptionModal,

  },

  data() {

    return {

      editorInstance: null, // 添加一个编辑器实例变量

      subscriptionStatus: false,

      saveContentLoading: false,

      saveLoading: false,

      showSaveAs: false,

      showExportFile: false,

      saveType: 'save',

      modalVisible: false,

      showSubscriptionModal: false,

      wordcontent: '',

      reportId: '',

      abcValuesString: '',

      editcontent: '',

      pdfUrl: '', // 下载所需的入参

      reportContent: '',

    };

  },

  props: {

    isOpen2: {

      type: Object,

      required: true,

    },

    showModal: {

      type: Boolean,

      required: true,

    },

  },

  created() {

  },

  computed: {

    ...mapState(StoreNamespace.LC_FTR_LOGIN_STORE_MODULE, {

      userId: state => state.user.userId,

    }),

    ...mapState(StoreNamespace.LC_FTR_REPORT_TEMPLATE_CREATE_STORE_MODULE, {

      templateInfo: state => state.templateInfo,

      freshMDReview: state => state.freshMDReview,

    }),

  },

  activated() {

    if (this.templateInfo.id) {

      this.getSubscribeInfo();

    }

  },

  async mounted() {

    try {

      const response = await axios.post('/maxs/pm/dict/getSysDict', { type: 'WF-WATERMARK' }, {

        // 请求体的内容

      });

      const abcValues = response.data.data.map(item => item.name);

      const abcValuesstring = abcValues.join(', '); // 使用逗号和空格连接数组元素

      this.abcValuesString = abcValuesstring;

    } catch (error) {

      console.log(error, '456');

    }

    setWaterMark(this.abcValuesString, '');

    await this.getid();

    // await this.getstartReportContentFromApi(); // 获取报告内容

    if (this.isOpen2.type === 'add') {

      if (localStorage.getItem('pdfUrl')) {

        localStorage.removeItem('pdfUrl');

      }

      this.createEditor();

      console.log('进入新增状态');

      this.getstartReportContentFromApi().then((reportContent) => {

        this.wordcontent = reportContent;

        this.reportContent = reportContent;

        this.editorInstance.setValue(reportContent);

      }).catch((error) => {

        console.error('获取报告内容失败', error);

      });

      // if (this.templateInfo.id || this.templateInfo.config) {

      //   this.getSubscribeInfo();

      //   this.showVditor = true;

      //   this.$nextTick(() => {

      //     this.createEditor(() => {

      //       this.editorInstance.setValue(