change:

ckeditor 添加 自定义按钮 customButton,用于执行传入的callback ,
配置参数
customFunction: 要执行的回调 ,
customText: 按钮显示文字
pop 窗口层级增加

components/public/pop.vue

@@ -1,6 +1,6 @@
 <template>
 <div
-    class=" w-screen h-screen fixed left-0 top-0 flex overflow-hidden justify-center items-center"
+    class=" w-screen h-screen fixed left-0 top-0 z-50 flex overflow-hidden justify-center items-center"
     v-if="show"
 >
   <div
@@ -47,4 +47,4 @@ export default {
     background-color: #000;
     opacity: 0.3;
   }
-</style>
+</style>

model/ckeditor/ckeditor.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
+import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
+import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { FontSize } from '@ckeditor/ckeditor5-font';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { Highlight } from '@ckeditor/ckeditor5-highlight';
+import { Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
+import { Indent } from '@ckeditor/ckeditor5-indent';
+import { Link } from '@ckeditor/ckeditor5-link';
+import { List } from '@ckeditor/ckeditor5-list';
+import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
+import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
+import { TextTransformation } from '@ckeditor/ckeditor5-typing';
+import MyCustomPlugin from './customPluugs';
+declare class Editor extends ClassicEditor {
+    static builtinPlugins: (typeof Autoformat | typeof BlockQuote | typeof Bold | typeof CloudServices | typeof Essentials | typeof FontSize | typeof Heading | typeof Highlight | typeof Image | typeof ImageCaption | typeof ImageResize | typeof ImageStyle | typeof ImageToolbar | typeof ImageUpload | typeof Indent | typeof Italic | typeof Link | typeof List | typeof MediaEmbed | typeof Paragraph | typeof PasteFromOffice | typeof Table | typeof TableToolbar | typeof TextTransformation)[];
+    static defaultConfig: {
+        toolbar: {
+            items: string[];
+        };
+        language: string;
+        image: {
+            toolbar: string[];
+        };
+        table: {
+            contentToolbar: string[];
+        };
+        extraPlugins: (typeof MyCustomPlugin)[];
+    };
+}
+export default Editor;

model/ckeditor/customPluugs.d.ts

@@ -0,0 +1,4 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+export default class MyCustomPlugin extends Plugin {
+    init(): void;
+}

model/ckeditor/translations/af.js

@@ -0,0 +1 @@
+!function(e){const r=e.af=e.af||{};r.dictionary=Object.assign(r.dictionary||{},{"%0 of %1":"%0 van %1","Block quote":"Verwysingsaanhaling",Bold:"Vet",Cancel:"Kanselleer",Code:"Bronkode",Italic:"Kursief","Remove color":"Verwyder kleur","Restore default":"Herstel verstek",Save:"Stoor","Show more items":"Wys meer items",Strikethrough:"Deurstreep",Subscript:"Onderskrif",Superscript:"Boskrif",Underline:"Onderstreep"}),r.getPluralForm=function(e){return 1!=e}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

model/ckeditor/translations/bs.js

@@ -0,0 +1 @@
+!function(e){const i=e.bs=e.bs||{};i.dictionary=Object.assign(i.dictionary||{},{"%0 of %1":"%0 od %1",Big:"","Block quote":"Citat",Bold:"Podebljano","Break text":"",Cancel:"Poništi","Caption for image: %0":"","Caption for the image":"","Centered image":"Centrirana slika","Change image text alternative":"Promijeni ALT atribut za sliku","Choose heading":"Odaberi naslov",Code:"Kod",Default:"Zadani","Document colors":"","Enter image caption":"Unesi naziv slike","Font Background Color":"Boja pozadine","Font Color":"Boja","Font Family":"Font","Font Size":"Veličina fonta","Full size image":"",Heading:"Naslov","Heading 1":"Naslov 1","Heading 2":"Naslov 2","Heading 3":"Naslov 3","Heading 4":"Naslov 4","Heading 5":"Naslov 5","Heading 6":"Naslov 6",Huge:"","Image resize list":"Lista veličina slike","Image toolbar":"","image widget":"","In line":"",Insert:"Umetni","Insert image":"Umetni sliku","Insert image via URL":"Umetni sliku preko URLa",Italic:"Zakrivljeno","Left aligned image":"Lijevo poravnata slika",Original:"Original",Paragraph:"Paragraf","Remove color":"Ukloni boju","Resize image":"Promijeni veličinu slike","Resize image to %0":"","Resize image to the original size":"Postavi originalnu veličinu slike","Restore default":"Vrati na zadano","Right aligned image":"Desno poravnata slika",Save:"Sačuvaj","Show more items":"Prikaži više stavki","Side image":"",Small:"",Strikethrough:"Precrtano",Subscript:"",Superscript:"","Text alternative":"ALT atribut",Tiny:"","Type or paste your content here.":"Unesite ili zalijepite vaš sadržaj ovdje","Type your title":"Unesite naslov",Underline:"Podcrtano",Update:"Ažuriraj","Update image URL":"Ažuriraj URL slike","Upload failed":"Učitavanje slike nije uspjelo","Wrap text":"Prelomi tekst"}),i.getPluralForm=function(e){return e%10==1&&e%100!=11?0:e%10>=2&&e%10<=4&&(e%100<10||e%100>=20)?1:2}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

model/ckeditor/translations/es-co.js

@@ -0,0 +1 @@
+!function(e){const o=e["es-co"]=e["es-co"]||{};o.dictionary=Object.assign(o.dictionary||{},{"%0 of %1":"%0 de %1","Block quote":"Cita de bloque",Bold:"Negrita",Cancel:"Cancelar",Code:"Código",Italic:"Cursiva","Remove color":"Quitar color","Restore default":"Restaurar valores predeterminados",Save:"Guardar","Show more items":"Mostrar más elementos",Strikethrough:"Tachado",Subscript:"Subíndice",Superscript:"Superíndice",Underline:"Subrayado","Upload in progress":"Carga en progreso"}),o.getPluralForm=function(e){return 1==e?0:0!=e&&e%1e6==0?1:2}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

model/ckeditor/translations/gu.js

@@ -0,0 +1 @@
+!function(o){const e=o.gu=o.gu||{};e.dictionary=Object.assign(e.dictionary||{},{"%0 of %1":"","Block quote":" વિચાર ટાંકો",Bold:"ઘાટુ - બોલ્ડ્",Cancel:"",Code:"",Italic:"ત્રાંસુ - ઇટલિક્","Remove color":"","Restore default":"",Save:"","Show more items":"",Strikethrough:"",Subscript:"",Superscript:"",Underline:"નીચે લિટી - અન્ડરલાઇન્"}),e.getPluralForm=function(o){return 1!=o}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

model/ckeditor/translations/oc.js

@@ -0,0 +1 @@
+!function(o){const r=o.oc=o.oc||{};r.dictionary=Object.assign(r.dictionary||{},{"%0 of %1":"",Bold:"Gras",Cancel:"Anullar",Code:"",Italic:"Italica","Remove color":"","Restore default":"",Save:"Enregistrar","Show more items":"",Strikethrough:"",Subscript:"",Superscript:"",Underline:""}),r.getPluralForm=function(o){return o>1}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

model/ckeditor/translations/si.js

@@ -0,0 +1 @@
+!function(e){const t=e.si=e.si||{};t.dictionary=Object.assign(t.dictionary||{},{"%0 of %1":"",Bold:"තදකුරු","Break text":"","Bulleted List":"බුලටිත ලැයිස්තුව","Bulleted list styles toolbar":"",Cancel:"","Caption for image: %0":"","Caption for the image":"","Centered image":"","Change image text alternative":"",Circle:"",Code:"",Decimal:"","Decimal with leading zero":"",Disc:"","Enter image caption":"","Full size image":"","Image resize list":"","Image toolbar":"","image widget":"","In line":"",Insert:"","Insert image":"පින්තූරය ඇතුල් කරන්න","Insert image via URL":"",Italic:"ඇලකුරු","Left aligned image":"","List properties":"","Lower-latin":"","Lower–roman":"","Numbered List":"අංකිත ලැයිස්තුව","Numbered list styles toolbar":"",Original:"",Redo:"නැවත කරන්න","Remove color":"","Resize image":"","Resize image to %0":"","Resize image to the original size":"","Restore default":"","Reversed order":"","Right aligned image":"",Save:"","Show more items":"","Side image":"",Square:"","Start at":"","Start index must be greater than 0.":"",Strikethrough:"",Subscript:"",Superscript:"","Text alternative":"","To-do List":"","Toggle the circle list style":"","Toggle the decimal list style":"","Toggle the decimal with leading zero list style":"","Toggle the disc list style":"","Toggle the lower–latin list style":"","Toggle the lower–roman list style":"","Toggle the square list style":"","Toggle the upper–latin list style":"","Toggle the upper–roman list style":"",Underline:"",Undo:"අහෝසි කරන්න",Update:"","Update image URL":"","Upload failed":"උඩුගත කිරීම අසාර්ථක විය","Upper-latin":"","Upper-roman":"","Wrap text":""}),t.getPluralForm=function(e){return 1!=e}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

nuxt.config.js

@@ -58,8 +58,10 @@ export default {
         '@nuxtjs/axios',
         // '@nuxtjs/style-resources',
     ],
+    // 加入axios 插件
     plugins: [
       "@plugins/svg-icon.js",
+
       { src: "@plugins/ckeditor.js", mode: "client" ,ssr: false}
       // {src: '~/plugins/vue-pdf.js', ssr: false}
     ],

pages/manger/news/add.vue

@@ -1,17 +1,22 @@
 <script>
-// import editor from "@ckeditor/ckeditor5-build-classic";
-// import "@ckeditor/ckeditor5-build-classic/build/translations/ja.js";
-// import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 
+
+// 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('@ckeditor/ckeditor5-build-classic')
+  ClassicEditor = require('../../../model/ckeditor/ckeditor');
+  // ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
+    console.log(ClassicEditor);
+  // MyCustomPlugin = require('../../../until/customCkeditorPlugin');
 }
 
 
@@ -28,23 +33,39 @@ export default {
   data(){
     return {
       editor: ClassicEditor,
-      editorData: '<p>文章内容</p>',
+      editorData: '<p>在此输入文章内容</p>',
       editorConfig: {
-        language: "zh-cn"
+        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.$refs.ckeditor.editor.execute('imageInsert', {
-      //   source: fileData.url,
-      //   alt: fileData.name
-      // });
+      // 将图片新增至编辑器中,允许调整图片大小
+      this.editorData += `<img src="${fileData.filePath}" alt="${fileData.fileName}">`;
+      console.log(this.editorData);
     },
   }
 }
@@ -59,17 +80,20 @@ export default {
         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">
+    <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>

plugins/ckeditor.js

@@ -1,4 +1,5 @@
 
 import Vue from 'vue'
 import CKEditor from '@ckeditor/ckeditor5-vue2'
+
 Vue.use(CKEditor)