hfysite/pages/manger/news/add.vue

<script>
// import editor from "@ckeditor/ckeditor5-build-classic";
// import "@ckeditor/ckeditor5-build-classic/build/translations/ja.js";
// import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

// 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;
if (process.client) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
}


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-cn"
      },
      imagePopShow: false,
      imagePopLoading: false,
    }
  },
  methods:{
    okHandle(fileData){
      console.log('okHandle');
      console.log(fileData);
      this.imagePopShow = false;
      // this.$refs.ckeditor.editor.execute('imageInsert', {
      //   source: fileData.url,
      //   alt: fileData.name
      // });
    },
  }
}
</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">
      <a-button @click="imagePopShow = true">插入图片</a-button>
    <ckeditor ref="ckeditor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
  <pop :show="imagePopShow" :loading="imagePopLoading">
      <image-table
        class="w-full h-full"
        @
        @ok="okHandle">

      </image-table>


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

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