hfysite/pages/manger/news/add.vue

<script>


// import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
// Vue.use( CKEditor );
import RoundedTitle from "../../../components/public/roundedTitle.vue";
import PopCard from "../../../components/public/popCard.vue";
import ImageTable from "../../../components/public/imageTable.vue";
import Pop from "../../../components/public/pop.vue";



let ClassicEditor;
// let MyCustomPlugin;
if (process.client) {
  ClassicEditor = require('../../../model/ckeditor/ckeditor');
  // ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
    console.log(ClassicEditor);
  // MyCustomPlugin = require('../../../until/customCkeditorPlugin');
}


export default {
  name: "add",
  components: {
    Pop,
    ImageTable,
    PopCard,
    RoundedTitle
    // Use the <ckeditor> component in this view.

  },
  data(){
    return {
      editor: ClassicEditor,
      editorData: '<p>在此输入文章内容</p>',
      editorConfig: {
        language: 'zh',
        customText: "插入图片",
      },
      imagePopShow: false,
      imagePopLoading: false,
    }
  },
  beforeMount() {
    // this.editorConfig.toolbar.push('customButton');
    // 插入toolbar

    this.editorConfig.customFunction = () => {
      console.log('customFunction2');
      this.openImageSelect();
    };
  },
  mounted() {
    // 插入按钮
  },
  methods:{
    openImageSelect(){
      console.log('尝试打开图片选择窗口');
      this.imagePopShow = true;
    },
    okHandle(fileData){
      console.log('okHandle');
      console.log(fileData);
      this.imagePopShow = false;
      // 将图片新增至编辑器中,允许调整图片大小
      this.editorData += `<img src="${fileData.filePath}" alt="${fileData.fileName}">`;
      console.log(this.editorData);
    },
  }
}
</script>

<template>
<div class="w-full p-2">
  <rounded-title class="text-xl">
    <span>新增文章</span>
    <a href="/manger/news"
       class="px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer
        hover:text-orange-500 ">文章中心</a>
  </rounded-title>
  <div class="page-content-box w-full mt-2 p-0.5  rounded bg-white">
    <ckeditor ref="ckeditor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
  <pop :show="imagePopShow" :loading="imagePopLoading">
    <pop-card>
      <template slot="header">
        <span>选择需要插入的图片</span>
      </template>
      <image-table
        class="w-full h-full"
        @cancel="imagePopShow = false"
        @ok="okHandle">

      </image-table>
    </pop-card>

  </pop>
</div>
</template>

<style scoped>
.page-content-box{
  min-height: 500px;
}
</style>