拆分通知中心的富文本编辑器

web/src/components/NotificationRichTextEditor.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+import {
+  AutoLink,
+  BlockQuote,
+  Bold,
+  ClassicEditor,
+  Essentials,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageInsert,
+  ImageInsertViaUrl,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  Italic,
+  Link,
+  LinkImage,
+  List,
+  Paragraph,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableProperties,
+  TableToolbar,
+  type EditorConfig,
+} from 'ckeditor5'
+import 'ckeditor5/ckeditor5.css'
+
+const model = defineModel<string>({ required: true })
+
+const editorConfig: EditorConfig = {
+  licenseKey: import.meta.env.VITE_CKEDITOR_LICENSE_KEY || 'GPL',
+  plugins: [
+    Essentials, Paragraph, Heading, Bold, Italic, Link, AutoLink, List, BlockQuote,
+    Image, ImageCaption, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle,
+    ImageToolbar, LinkImage, Table, TableCaption, TableCellProperties,
+    TableColumnResize, TableProperties, TableToolbar,
+  ],
+  toolbar: {
+    items: [
+      'heading', '|', 'bold', 'italic', 'link', '|', 'insertTable', 'insertImage',
+      '|', 'bulletedList', 'numberedList', 'blockQuote', '|', 'undo', 'redo',
+    ],
+    shouldNotGroupWhenFull: false,
+  },
+  heading: {
+    options: [
+      { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
+      { model: 'heading2', view: 'h2', title: '标题', class: 'ck-heading_heading2' },
+      { model: 'heading3', view: 'h3', title: '小标题', class: 'ck-heading_heading3' },
+    ],
+  },
+  link: { addTargetToExternalLinks: true, defaultProtocol: 'https://' },
+  image: {
+    insert: { integrations: ['insertImageViaUrl'] },
+    toolbar: [
+      'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline',
+      'imageStyle:wrapText', 'imageStyle:breakText', '|', 'resizeImage', 'linkImage',
+    ],
+  },
+  table: {
+    contentToolbar: [
+      'tableColumn', 'tableRow', 'mergeTableCells', 'toggleTableCaption',
+      'tableProperties', 'tableCellProperties',
+    ],
+  },
+}
+</script>
+
+<template>
+  <Ckeditor
+    v-model="model"
+    :editor="ClassicEditor"
+    :config="editorConfig"
+  />
+</template>