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";

let ClassicEditor;
if (process.client) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
}

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

  },
  data(){
    return {
      editor: ClassicEditor,
      editorData: '<p>文章内容</p>',
      editorConfig: {
        language: "zh-cn"
      }
    }
  }
}
</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 :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</div>
</template>

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