添加源码

package.json

@@ -13,6 +13,8 @@
     "build:test": "vite build --mode test",
     "build:pre": "vite build --mode staging",
     "preview": "vite preview",
+    "dev:ckeditor5": "pnpm -C src/components/external/ckeditor5 dev",
+    "build:ckeditor5": "pnpm -C src/components/external/ckeditor5 build",
     "lint:eslint": "eslint --fix --ext .js,.ts, .tsx,.vue ./src",
     "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:lint-staged": "lint-staged"
@@ -42,7 +44,8 @@
     "vue-i18n": "^9.2.2",
     "vue-ls": "^4.2.0",
     "vue-router": "^4.2.1",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "webpack": "^5.91.0"
   },
   "devDependencies": {
     "@types/js-md5": "^0.7.0",

src/components/external/ckeditor5/.eslintrc.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* eslint-env node */
+
+'use strict'
+
+module.exports = {
+  rules: {
+    'ckeditor5-rules/ckeditor-imports': 'off'
+  }
+}

src/components/external/ckeditor5/___webpack.config.js

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+'use strict'
+
+/* eslint-env node */
+
+const path = require('path')
+const webpack = require('webpack')
+const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils')
+const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+
+module.exports = {
+  devtool: 'source-map',
+  performance: { hints: false },
+
+  entry: path.resolve(__dirname, 'src', 'ckeditor.js'),
+
+  output: {
+    // The name under which the editor will be exported.
+    library: 'CKEDITOR',
+
+    path: path.resolve(__dirname, 'build'),
+    filename: 'ckeditor.js',
+    libraryTarget: 'umd'
+  },
+
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        sourceMap: true,
+        terserOptions: {
+          output: {
+            // Preserve CKEditor 5 license comments.
+            comments: /^!/
+          }
+        },
+        extractComments: false
+      })
+    ]
+  },
+
+  plugins: [
+    new CKEditorWebpackPlugin({
+      // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+      // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+      language: 'en',
+      additionalLanguages: 'all'
+    }),
+    new webpack.BannerPlugin({
+      banner: bundler.getLicenseBanner(),
+      raw: true
+    })
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: ['raw-loader']
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              injectType: 'singletonStyleTag',
+              attributes: {
+                'data-cke': true
+              }
+            }
+          },
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: styles.getPostCssConfig({
+                themeImporter: {
+                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
+                },
+                minify: true
+              })
+            }
+          }
+        ]
+      },
+      {
+        test: /\.ts$/,
+        use: ['ts-loader']
+      }
+    ]
+  },
+
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+}

src/components/external/ckeditor5/build/translations/af.js

@@ -0,0 +1 @@
+!function(e){const n=e.af=e.af||{};n.dictionary=Object.assign(n.dictionary||{},{"%0 of %1":"%0 van %1","Align center":"Belyn in die middel","Align left":"Belyn links","Align right":"Belyn regs","Block quote":"Verwysingsaanhaling",Bold:"Vet",Cancel:"Kanselleer","Cannot upload file:":"Lêer nie opgelaai nie:",Italic:"Kursief",Justify:"Belyn beide kante","Remove color":"Verwyder kleur","Rich Text Editor. Editing area: %0":"",Save:"Stoor","Show more items":"Wys meer items",Strikethrough:"Deurstreep","Text alignment":"Teksbelyning","Text alignment toolbar":"Teksbelyning nutsbank",Underline:"Onderstreep"}),n.getPluralForm=function(e){return 1!=e}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/translations/bs.js

@@ -0,0 +1 @@
+!function(i){const a=i.bs=i.bs||{};a.dictionary=Object.assign(a.dictionary||{},{"%0 of %1":"%0 od %1","Align center":"Centrirati","Align left":"Lijevo poravnanje","Align right":"Desno poravnanje",Big:"","Block quote":"Citat",Bold:"Podebljano","Break text":"",Cancel:"Poništi","Cannot upload file:":"Nije moguće učitati fajl:","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",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 image":"Umetni sliku",Italic:"Zakrivljeno",Justify:"","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","Rich Text Editor. Editing area: %0":"","Right aligned image":"Desno poravnata slika",Save:"Sačuvaj","Show more items":"Prikaži više stavki","Side image":"",Small:"",Strikethrough:"Precrtano","Text alignment":"Poravnanje teksta","Text alignment toolbar":"Traka za poravnanje teksta","Text alternative":"ALT atribut",Tiny:"",Underline:"Podcrtano","Upload failed":"Učitavanje slike nije uspjelo","Wrap text":"Prelomi tekst"}),a.getPluralForm=function(i){return i%10==1&&i%100!=11?0:i%10>=2&&i%10<=4&&(i%100<10||i%100>=20)?1:2}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/translations/es-co.js

@@ -0,0 +1 @@
+!function(e){const a=e["es-co"]=e["es-co"]||{};a.dictionary=Object.assign(a.dictionary||{},{"%0 of %1":"%0 de %1","Align center":"Centrar","Align left":"Alinear a la izquierda","Align right":"Alinear a la derecha","Block quote":"Cita de bloque",Bold:"Negrita",Cancel:"Cancelar","Cannot upload file:":"No se pudo cargar el archivo:",Italic:"Cursiva",Justify:"Justificar","Remove color":"Quitar color","Rich Text Editor. Editing area: %0":"Editor de texto enriquecido. Área de edición: %0",Save:"Guardar","Show more items":"Mostrar más elementos",Strikethrough:"Tachado","Text alignment":"Alineación de texto","Text alignment toolbar":"Herramientas de alineación de texto",Underline:"Subrayado","Upload in progress":"Carga en progreso"}),a.getPluralForm=function(e){return 1==e?0:0!=e&&e%1e6==0?1:2}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/translations/gu.js

@@ -0,0 +1 @@
+!function(o){const i=o.gu=o.gu||{};i.dictionary=Object.assign(i.dictionary||{},{"%0 of %1":"","Block quote":" વિચાર ટાંકો",Bold:"ઘાટુ - બોલ્ડ્",Cancel:"","Cannot upload file:":"ફાઇલ અપલોડ ન થઇ શકી",Italic:"ત્રાંસુ - ઇટલિક્","Remove color":"","Rich Text Editor. Editing area: %0":"",Save:"","Show more items":"",Strikethrough:"",Underline:"નીચે લિટી - અન્ડરલાઇન્"}),i.getPluralForm=function(o){return 1!=o}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/translations/kk.js

@@ -0,0 +1 @@
+!function(n){const t=n.kk=n.kk||{};t.dictionary=Object.assign(t.dictionary||{},{"Align center":"Ортадан туралау","Align left":"Солға туралау","Align right":"Оңға туралау",Justify:"","Text alignment":"Мәтінді туралау","Text alignment toolbar":"Мәтінді туралау құралдар тақтасы"}),t.getPluralForm=function(n){return 1!=n}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/translations/oc.js

@@ -0,0 +1 @@
+!function(o){const i=o.oc=o.oc||{};i.dictionary=Object.assign(i.dictionary||{},{"%0 of %1":"",Bold:"Gras",Cancel:"Anullar","Cannot upload file:":"",Italic:"Italica","Remove color":"","Rich Text Editor. Editing area: %0":"",Save:"Enregistrar","Show more items":"",Strikethrough:"",Underline:""}),i.getPluralForm=function(o){return o>1}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/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:"","Cannot upload file:":"ගොනුව යාවත්කාලීන කළ නොහැක:","Caption for image: %0":"","Caption for the image":"","Centered image":"","Change image text alternative":"",Circle:"",Decimal:"","Decimal with leading zero":"",Disc:"","Enter image caption":"","Full size image":"","Image resize list":"","Image toolbar":"","image widget":"","In line":"","Insert image":"පින්තූරය ඇතුල් කරන්න",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":"","Reversed order":"","Rich Text Editor. Editing area: %0":"","Right aligned image":"",Save:"","Show more items":"","Side image":"",Square:"","Start at":"","Start index must be greater than 0.":"",Strikethrough:"","Text alternative":"","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:"අහෝසි කරන්න","Upload failed":"උඩුගත කිරීම අසාර්ථක විය","Upper-latin":"","Upper-roman":"","Wrap text":""}),t.getPluralForm=function(e){return 1!=e}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/build/translations/sl.js

@@ -0,0 +1 @@
+!function(a){const o=a.sl=a.sl||{};o.dictionary=Object.assign(o.dictionary||{},{"%0 of %1":"","Align center":"Sredinska poravnava","Align left":"Poravnava levo","Align right":"Poravnava desno",Aquamarine:"Akvamarin",Big:"Veliko",Black:"Črna","Block quote":"Blokiraj citat",Blue:"Modra",Bold:"Krepko",Cancel:"Prekliči","Cannot upload file:":"Ni možno naložiti datoteke:","Choose heading":"Izberi naslov",Default:"Privzeto","Dim grey":"Temno siva","Document colors":"Barve dokumenta","Dropdown toolbar":"","Edit block":"","Editor block content toolbar":"","Editor contextual toolbar":"","Editor editing area: %0":"","Editor toolbar":"","Font Background Color":"Barva ozadja pisave","Font Color":"Barva pisave","Font Family":"Vrsta oz. tip pisave","Font Size":"Velikost pisave",Green:"Zelena",Grey:"Siva",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:"Ogromno",Italic:"Poševno",Justify:"Postavi na sredino","Light blue":"Svetlo modra","Light green":"Svetlo zelena","Light grey":"Svetlo siva",Next:"",Orange:"Oranžna",Paragraph:"Odstavek",Previous:"",Purple:"Vijolična",Red:"Rdeča","Remove color":"Odstrani barvo","Rich Text Editor":"","Rich Text Editor. Editing area: %0":"",Save:"Shrani","Show more items":"",Small:"Majhna",Strikethrough:"Prečrtano","Text alignment":"Poravnava besedila","Text alignment toolbar":"Orodna vrstica besedila",Tiny:"Drobna",Turquoise:"Turkizna",Underline:"Podčrtaj",White:"Bela",Yellow:"Rumena"}),o.getPluralForm=function(a){return a%100==1?0:a%100==2?1:a%100==3||a%100==4?2:3}}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

src/components/external/ckeditor5/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@ckeditor/ckeditor5-build-decoupled-document",
+  "version": "35.3.1",
+  "description": "The document editor build of CKEditor 5 – the best browser-based rich text editor.",
+  "keywords": [
+    "ckeditor5-build",
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "wysiwyg",
+    "rich text",
+    "editor",
+    "html",
+    "contentEditable",
+    "editing",
+    "operational transformation",
+    "ot",
+    "collaboration",
+    "collaborative",
+    "real-time",
+    "framework"
+  ],
+  "main": "./build/ckeditor.js",
+  "files": [
+    "build",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^35.3.1",
+    "@ckeditor/ckeditor5-alignment": "^35.3.1",
+    "@ckeditor/ckeditor5-autoformat": "^35.3.1",
+    "@ckeditor/ckeditor5-basic-styles": "^35.3.1",
+    "@ckeditor/ckeditor5-block-quote": "^35.3.1",
+    "@ckeditor/ckeditor5-ckbox": "^35.3.1",
+    "@ckeditor/ckeditor5-ckfinder": "^35.3.1",
+    "@ckeditor/ckeditor5-cloud-services": "^35.3.1",
+    "@ckeditor/ckeditor5-easy-image": "^35.3.1",
+    "@ckeditor/ckeditor5-editor-decoupled": "^35.3.1",
+    "@ckeditor/ckeditor5-essentials": "^35.3.1",
+    "@ckeditor/ckeditor5-font": "^35.3.1",
+    "@ckeditor/ckeditor5-heading": "^35.3.1",
+    "@ckeditor/ckeditor5-image": "^35.3.1",
+    "@ckeditor/ckeditor5-indent": "^35.3.1",
+    "@ckeditor/ckeditor5-link": "^35.3.1",
+    "@ckeditor/ckeditor5-list": "^35.3.1",
+    "@ckeditor/ckeditor5-media-embed": "^35.3.1",
+    "@ckeditor/ckeditor5-paragraph": "^35.3.1",
+    "@ckeditor/ckeditor5-paste-from-office": "^35.3.1",
+    "@ckeditor/ckeditor5-table": "^35.3.1",
+    "@ckeditor/ckeditor5-typing": "^35.3.1",
+    "@ckeditor/ckeditor5-ui": "^35.4.0"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-core": "^35.3.1",
+    "@ckeditor/ckeditor5-dev-utils": "^31.0.0",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.3.1",
+    "css-loader": "^5.2.7",
+    "postcss-loader": "^4.3.0",
+    "raw-loader": "^4.0.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^9.3.0",
+    "webpack": "^5.58.1",
+    "webpack-cli": "^4.10.0"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=5.7.1"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://ckeditor.com/ckeditor-5",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-build-decoupled-document"
+  },
+  "scripts": {
+    "dev": "webpack --mode development --watch",
+    "build": "webpack --mode production",
+    "preversion": "npm run build"
+  }
+}

src/components/external/ckeditor5/sample/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CKEditor 5 – document editor build – development sample</title>
+  <style>
+      body {
+          max-width: 1000px;
+          margin: 20px auto;
+      }
+  </style>
+</head>
+<body>
+
+<h1>CKEditor 5 – document editor build – development sample</h1>
+
+<h2>The toolbar</h2>
+<div class="toolbar-container"></div>
+
+<h2>The editable</h2>
+<div class="editable-container"></div>
+
+<style>
+    .editable-container,
+    .toolbar-container {
+        position: relative;
+        border: 1px solid #ddd;
+        background: #eee;
+    }
+
+    .toolbar-container {
+        padding: 1em;
+    }
+
+    .editable-container {
+        padding: 3em;
+        overflow-y: scroll;
+        max-height: 500px;
+    }
+
+    .editable-container .ck-content {
+        min-height: 21cm;
+        padding: 2em;
+        border: 1px #D3D3D3 solid;
+        border-radius: var(--ck-border-radius);
+        background: white;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    }
+</style>
+
+<script src="../build/ckeditor.js"></script>
+<script>
+  const editorData = `<h2>Sample</h2>
+		<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#document-editor">document editor build</a>.</p>
+		<figure class="image">
+			<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		</figure>
+		<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/custom-builds.html">custom build</a> works fine.</p>`;
+
+  CKEDITOR.default.DecoupledEditor.create( editorData )
+    .then( editor => {
+      window.editor = editor;
+
+      document.querySelector( '.toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+      document.querySelector( '.editable-container' ).appendChild( editor.ui.view.editable.element );
+    } )
+    .catch( error => {
+      console.error( 'There was a problem initializing the editor.', error );
+    } );
+</script>
+
+</body>
+</html>

src/components/external/ckeditor5/src/ckeditor.js

@@ -0,0 +1,305 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import DecoupledEditorBase from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize'
+import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor'
+import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor'
+import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'
+import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'
+// import CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox';
+// import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+// import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading'
+import Image from '@ckeditor/ckeditor5-image/src/image'
+import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
+import Indent from '@ckeditor/ckeditor5-indent/src/indent'
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'
+import Link from '@ckeditor/ckeditor5-link/src/link'
+import List from '@ckeditor/ckeditor5-list/src/list'
+import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties'
+// import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
+import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'
+import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'
+import Table from '@ckeditor/ckeditor5-table/src/table'
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'
+import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'
+// import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
+import DropdownButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview'
+import DropdownPanelView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownpanelview'
+import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview'
+import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler'
+import fontColorIcon from '@ckeditor/ckeditor5-font/theme/icons/font-color.svg'
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'
+class DecoupledEditor extends DecoupledEditorBase {}
+function overrideDropdownPositionsToNorth (editor, toolbarView) {
+  const {
+    south, north, southEast, southWest, northEast, northWest,
+    southMiddleEast, southMiddleWest, northMiddleEast, northMiddleWest
+  } = DropdownView.defaultPanelPositions
+
+  let panelPositions
+
+  if (editor.locale.uiLanguageDirection !== 'rtl') {
+    panelPositions = [
+      northEast, northWest, northMiddleEast, northMiddleWest, north,
+      southEast, southWest, southMiddleEast, southMiddleWest, south
+    ]
+  } else {
+    panelPositions = [
+      northWest, northEast, northMiddleWest, northMiddleEast, north,
+      southWest, southEast, southMiddleWest, southMiddleEast, south
+    ]
+  }
+
+  for (const item of toolbarView.items) {
+    if (!(item instanceof DropdownView)) {
+      continue
+    }
+
+    item.on('change:isOpen', () => {
+      if (!item.isOpen) {
+        return
+      }
+
+      item.panelView.position = DropdownView._getOptimalPosition({
+        element: item.panelView.element,
+        target: item.buttonView.element,
+        fitInViewport: true,
+        positions: panelPositions
+      }).name
+    })
+  }
+}
+function overrideTooltipPositions (toolbarView) {
+  for (const item of toolbarView.items) {
+    if (item.buttonView) {
+      item.buttonView.tooltipPosition = 'n'
+    } else if (item.tooltipPosition) {
+      item.tooltipPosition = 'n'
+    }
+  }
+}
+class FormattingOptions extends Plugin {
+  /**
+   * @inheritDoc
+   */
+  static get pluginName () {
+    return 'FormattingOptions'
+  }
+
+  /**
+   * @inheritDoc
+   */
+  constructor (editor) {
+    super(editor)
+
+    editor.ui.componentFactory.add('formattingOptions', locale => {
+      const t = locale.t
+      const buttonView = new DropdownButtonView(locale)
+      const panelView = new DropdownPanelView(locale)
+      const dropdownView = new DropdownView(locale, buttonView, panelView)
+      const toolbarView = this.toolbarView = dropdownView.toolbarView = new ToolbarView(locale)
+
+      // Accessibility: Give the toolbar a human-readable ARIA label.
+      toolbarView.set({
+        ariaLabel: t('Formatting options toolbar')
+      })
+
+      // Accessibility: Give the dropdown a human-readable ARIA label.
+      dropdownView.set({
+        label: t('Formatting options')
+      })
+
+      // Toolbars in dropdowns need specific styling, hence the class.
+      dropdownView.extendTemplate({
+        attributes: {
+          class: ['ck-toolbar-dropdown']
+        }
+      })
+
+      // Accessibility: If the dropdown panel is already open, the arrow down key should focus the first child of the #panelView.
+      dropdownView.keystrokes.set('arrowdown', (data, cancel) => {
+        if (dropdownView.isOpen) {
+          toolbarView.focus()
+          cancel()
+        }
+      })
+
+      // Accessibility: If the dropdown panel is already open, the arrow up key should focus the last child of the #panelView.
+      dropdownView.keystrokes.set('arrowup', (data, cancel) => {
+        if (dropdownView.isOpen) {
+          toolbarView.focusLast()
+          cancel()
+        }
+      })
+
+      // The formatting options should not close when the user clicked:
+      // * the dropdown or it contents,
+      // * any editing root,
+      // * any floating UI in the "body" collection
+      // It should close, for instance, when another (main) toolbar button was pressed, though.
+      dropdownView.on('render', () => {
+        clickOutsideHandler({
+          emitter: dropdownView,
+          activator: () => dropdownView.isOpen,
+          callback: () => { dropdownView.isOpen = false },
+          contextElements: [
+            dropdownView.element,
+            ...[...editor.ui.getEditableElementsNames()].map(name => editor.ui.getEditableElement(name)),
+            document.querySelector('.ck-body-wrapper')
+          ]
+        })
+      })
+
+      // The main button of the dropdown should be bound to the state of the dropdown.
+      buttonView.bind('isOn').to(dropdownView, 'isOpen')
+      buttonView.bind('isEnabled').to(dropdownView)
+
+      // Using the font color icon to visually represent the formatting.
+      buttonView.set({
+        tooltip: t('Formatting options'),
+        icon: fontColorIcon
+      })
+
+      dropdownView.panelView.children.add(toolbarView)
+
+      toolbarView.fillFromConfig(
+        editor.config.get('formattingOptions'),
+        editor.ui.componentFactory
+      )
+
+      return dropdownView
+    })
+  }
+}
+const defaultConfig = {
+  toolbar: {
+    items: [
+      'heading',
+      '|',
+      'fontfamily',
+      'fontsize',
+      'fontColor',
+      'fontBackgroundColor',
+      '|',
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      '|',
+      'alignment',
+      '|',
+      'numberedList',
+      'bulletedList',
+      '|',
+      'outdent',
+      'indent',
+      '|',
+      'link',
+      'blockquote',
+      'uploadImage',
+      'insertTable',
+      '|',
+      'undo',
+      'redo'
+    ]
+  },
+  image: {
+    resizeUnit: 'px',
+    toolbar: [
+      'imageStyle:inline',
+      'imageStyle:wrapText',
+      'imageStyle:breakText',
+      '|',
+      'toggleImageCaption',
+      'imageTextAlternative'
+    ]
+  },
+  table: {
+    contentToolbar: [
+      'tableColumn',
+      'tableRow',
+      'mergeTableCells'
+    ]
+  },
+  list: {
+    properties: {
+      styles: true,
+      startIndex: true,
+      reversed: true
+    }
+  },
+  // This value must be kept in sync with the language defined in webpack.config.js.
+  language: 'en'
+}
+const builtinPlugins = [
+  Essentials,
+  Alignment,
+  FontSize,
+  FontFamily,
+  FontColor,
+  FontBackgroundColor,
+  UploadAdapter,
+  Autoformat,
+  Bold,
+  Italic,
+  Strikethrough,
+  Underline,
+  BlockQuote,
+  // CKBox,
+  // CKFinder,
+  // CloudServices,
+  // EasyImage,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Indent,
+  IndentBlock,
+  Link,
+  List,
+  ListProperties,
+  // MediaEmbed,
+  Paragraph,
+  PasteFromOffice,
+  PictureEditing,
+  Table,
+  TableToolbar,
+  TextTransformation
+]
+
+// ClassicEditor.builtinPlugins = builtinPlugins
+// ClassicEditor.defaultConfig = defaultConfig
+DecoupledEditor.builtinPlugins = builtinPlugins
+DecoupledEditor.defaultConfig = defaultConfig
+export default {
+  // ClassicEditor,
+  DecoupledEditor,
+  plugins: {
+    FormattingOptions
+  },
+  utils: {
+    overrideDropdownPositionsToNorth,
+    overrideTooltipPositions
+  }
+}

src/components/external/ckeditor5/webpack.config.js

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+'use strict'
+
+/* eslint-env node */
+
+const path = require('path')
+const webpack = require('webpack')
+const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils')
+const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+// console.log(process.argv)
+// console.log(process.env.NODE_ENV === 'development')
+module.exports = (env, argv) => {
+  const config = {
+    // devtool: 'source-map',
+    // devtool: false,
+    performance: { hints: false },
+
+    entry: path.resolve(__dirname, 'src', 'ckeditor.js'),
+    experiments: {
+      outputModule: true
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          sourceMap: true,
+          terserOptions: {
+            output: {
+              // Preserve CKEditor 5 license comments.
+              comments: /^!/
+            }
+          },
+          extractComments: false
+        })
+      ]
+    },
+
+    plugins: [
+      new CKEditorWebpackPlugin({
+        // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+        // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
+        language: 'en',
+        additionalLanguages: 'all'
+      }),
+      new webpack.BannerPlugin({
+        banner: bundler.getLicenseBanner(),
+        raw: true
+      })
+    ],
+
+    module: {
+      rules: [
+        {
+          test: /\.svg$/,
+          use: ['raw-loader']
+        },
+        {
+          test: /\.css$/,
+          use: [
+            {
+              loader: 'style-loader',
+              options: {
+                injectType: 'singletonStyleTag',
+                attributes: {
+                  'data-cke': true
+                }
+              }
+            },
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: styles.getPostCssConfig({
+                  themeImporter: {
+                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
+                  },
+                  minify: true
+                })
+              }
+            }
+          ]
+        },
+        {
+          test: /\.ts$/,
+          use: ['ts-loader']
+        }
+      ]
+    },
+
+    resolve: {
+      extensions: ['.ts', '.js', '.json']
+    }
+  }
+  if (argv.mode === 'development') {
+    config.output = {
+      library: 'CKEDITOR',
+      path: path.resolve(__dirname, 'build'),
+      filename: 'ckeditor.js',
+      libraryTarget: 'umd'
+    }
+    config.output = {
+      library: 'CKEDITOR',
+      path: path.resolve(__dirname, 'build'),
+      filename: 'ckeditor.js',
+      libraryTarget: 'umd'
+    }
+  } else {
+    config.output = {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'ckeditor.js',
+      libraryTarget: 'module'
+    }
+  }
+  return config
+}

src/components/packages/ckeditor/__index.jsx

@@ -0,0 +1,194 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global window, console */
+import CKEDITOR from '/external/ckeditor5/build/ckeditor.js'
+import { h, markRaw, defineComponent } from 'vue'
+import { debounce } from 'lodash-es'
+
+const SAMPLE_READ_ONLY_LOCK_ID = 'Integration Sample'
+const INPUT_EVENT_DEBOUNCE_WAIT = 300
+
+export default defineComponent({
+  name: 'ckeditor',
+
+  created () {
+    const { CKEDITOR_VERSION } = window
+
+    // Starting from v34.0.0, CKEditor 5 introduces a lock mechanism enabling/disabling the read-only mode.
+    // As it is a breaking change between major releases of the integration, the component requires using
+    // CKEditor 5 in version 34 or higher.
+    if (CKEDITOR_VERSION) {
+      const [major] = CKEDITOR_VERSION.split('.').map(Number)
+
+      if (major < 34) {
+        console.warn('The <CKEditor> component requires using CKEditor 5 in version 34 or higher.')
+      }
+    } else {
+      console.warn('Cannot find the "CKEDITOR_VERSION" in the "window" scope.')
+    }
+  },
+
+  render () {
+    return h(this.tagName)
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    tagName: {
+      type: String,
+      default: 'div'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      // Don't define it in #props because it produces a warning.
+      // https://v3.vuejs.org/guide/component-props.html#one-way-data-flow
+      instance: null,
+
+      lastEditorData: {
+        type: String,
+        default: ''
+      }
+    }
+  },
+
+  mounted () {
+    // Clone the config first so it never gets mutated (across multiple editor instances).
+    // https://github.com/ckeditor/ckeditor5-vue/issues/101
+    const editorConfig = Object.assign({}, this.config)
+
+    if (this.modelValue) {
+      editorConfig.initialData = this.modelValue
+    }
+
+    CKEDITOR.ClassicEditor.create(this.$el, editorConfig)
+      .then(editor => {
+        // Save the reference to the instance for further use.
+        this.instance = markRaw(editor)
+
+        this.setUpEditorEvents()
+
+        // Synchronize the editor content. The #modelValue may change while the editor is being created, so the editor content has
+        // to be synchronized with these potential changes as soon as it is ready.
+        if (this.modelValue !== editorConfig.initialData) {
+          editor.setData(this.modelValue)
+        }
+
+        // Set initial disabled state.
+        if (this.disabled) {
+          editor.enableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
+        }
+
+        // Let the world know the editor is ready.
+        this.$emit('ready', editor)
+      })
+      .catch(error => {
+        console.error(error)
+      })
+  },
+
+  beforeUnmount () {
+    if (this.instance) {
+      this.instance.destroy()
+      this.instance = null
+    }
+
+    // Note: By the time the editor is destroyed (promise resolved, editor#destroy fired)
+    // the Vue component will not be able to emit any longer. So emitting #destroy a bit earlier.
+    this.$emit('destroy', this.instance)
+  },
+
+  watch: {
+    modelValue (value) {
+      // Synchronize changes of #modelValue. There are two sources of changes:
+      //
+      //                External modelValue change      ──────╮
+      //                                                      ╰─────> ┏━━━━━━━━━━━┓
+      //                                                              ┃ Component ┃
+      //                                                      ╭─────> ┗━━━━━━━━━━━┛
+      //                   Internal data change         ──────╯
+      //             (typing, commands, collaboration)
+      //
+      // Case 1: If the change was external (via props), the editor data must be synced with
+      // the component using instance#setData() and it is OK to destroy the selection.
+      //
+      // Case 2: If the change is the result of internal data change, the #modelValue is the
+      // same as this.lastEditorData, which has been cached on #change:data. If we called
+      // instance#setData() at this point, that would demolish the selection.
+      //
+      // To limit the number of instance#setData() which is time-consuming when there is a
+      // lot of data we make sure:
+      //    * the new modelValue is at least different than the old modelValue (Case 1.)
+      //    * the new modelValue is different than the last internal instance state (Case 2.)
+      //
+      // See: https://github.com/ckeditor/ckeditor5-vue/issues/42.
+      if (this.instance && value !== this.lastEditorData) {
+        this.instance.setData(value)
+      }
+    },
+
+    // Synchronize changes of #disabled.
+    disabled (readOnlyMode) {
+      if (readOnlyMode) {
+        this.instance.enableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
+      } else {
+        this.instance.disableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
+      }
+    }
+  },
+
+  methods: {
+    setUpEditorEvents () {
+      const editor = this.instance
+
+      // Use the leading edge so the first event in the series is emitted immediately.
+      // Failing to do so leads to race conditions, for instance, when the component modelValue
+      // is set twice in a time span shorter than the debounce time.
+      // See https://github.com/ckeditor/ckeditor5-vue/issues/149.
+      const emitDebouncedInputEvent = debounce(evt => {
+        // Cache the last editor data. This kind of data is a result of typing,
+        // editor command execution, collaborative changes to the document, etc.
+        // This data is compared when the component modelValue changes in a 2-way binding.
+        const data = this.lastEditorData = editor.getData()
+
+        // The compatibility with the v-model and general Vue.js concept of input–like components.
+        this.$emit('update:modelValue', data, evt, editor)
+        this.$emit('input', data, evt, editor)
+      }, INPUT_EVENT_DEBOUNCE_WAIT, { leading: true })
+
+      // Debounce emitting the #input event. When data is huge, instance#getData()
+      // takes a lot of time to execute on every single key press and ruins the UX.
+      //
+      // See: https://github.com/ckeditor/ckeditor5-vue/issues/42
+      editor.model.document.on('change:data', emitDebouncedInputEvent)
+
+      editor.editing.view.document.on('focus', evt => {
+        this.$emit('focus', evt, editor)
+      })
+
+      editor.editing.view.document.on('blur', evt => {
+        this.$emit('blur', evt, editor)
+      })
+    }
+  }
+})

src/components/packages/ckeditor/index.jsx

@@ -0,0 +1,237 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global window, console */
+import { ElMessage } from 'element-plus'
+import CKEDITOR from '/external/ckeditor5/build/ckeditor.js'
+import { h, markRaw, defineComponent, onMounted, defineEmits, ref, onBeforeUnmount, watch } from 'vue'
+import { debounce } from 'lodash-es'
+import './style/index.js'
+import hooks from '@ER/hooks'
+const SAMPLE_READ_ONLY_LOCK_ID = 'Integration Sample'
+const INPUT_EVENT_DEBOUNCE_WAIT = 300
+const ns = hooks.useNamespace('Main', 'ckeditor')
+
+class MyUploadAdapter {
+  constructor (editor, loader) {
+    this.loader = loader
+    this.editor = editor
+  }
+
+  upload () {
+    const editor = this.editor
+    return this.loader.file
+      .then(file => new Promise((resolve, reject) => {
+        // console.log(editor)
+        const {
+          action,
+          maxSize
+        } = editor.config.get('ER.params')
+        if (file.size > maxSize) {
+          ElMessage({
+            message: `文件大小不能超过 ${maxSize / 1024 / 1024} MB`,
+            type: 'warning'
+          })
+          reject()
+        } else {
+          this._initRequest(action)
+          this._initListeners(resolve, reject, file)
+          this._sendRequest(file)
+        }
+      }))
+  }
+
+  abort () {
+    if (this.xhr) {
+      this.xhr.abort()
+    }
+  }
+
+  _initRequest (action) {
+    const xhr = this.xhr = new XMLHttpRequest()
+    xhr.open('POST', action, true)
+    xhr.responseType = 'json'
+  }
+
+  _initListeners (resolve, reject, file) {
+    const xhr = this.xhr
+    const loader = this.loader
+    const genericErrorText = `Couldn't upload file: ${file.name}.`
+    xhr.addEventListener('error', () => reject(genericErrorText))
+    xhr.addEventListener('abort', () => reject())
+    xhr.addEventListener('load', () => {
+      const response = xhr.response
+      if (!response || response.error) {
+        return reject(response && response.error ? response.error.message : genericErrorText)
+      }
+      resolve({
+        default: response.data[0].url
+      })
+    })
+    if (xhr.upload) {
+      xhr.upload.addEventListener('progress', evt => {
+        if (evt.lengthComputable) {
+          loader.uploadTotal = evt.total
+          loader.uploaded = evt.loaded
+        }
+      })
+    }
+  }
+
+  _sendRequest (file) {
+    // Prepare the form data.
+    const data = new FormData()
+
+    data.append('file', file)
+    this.xhr.send(data)
+  }
+}
+function MyCustomUploadAdapterPlugin (editor) {
+  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+    // Configure the URL to the upload script in your back-end here!
+    return new MyUploadAdapter(editor, loader)
+  }
+}
+export default defineComponent({
+  name: 'ckeditor',
+  inheritAttrs: false,
+  customOptions: {},
+  props: {
+    platform: {
+      type: String,
+      default: 'pc'
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    action: {
+      type: String,
+      required: true
+    },
+    maxSize: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup (props, { emit }) {
+    const { CKEDITOR_VERSION } = window
+    if (CKEDITOR_VERSION) {
+      const [major] = CKEDITOR_VERSION.split('.').map(Number)
+
+      if (major < 34) {
+        console.warn('The <CKEditor> component requires using CKEditor 5 in version 34 or higher.')
+      }
+    } else {
+      console.warn('Cannot find the "CKEDITOR_VERSION" in the "window" scope.')
+    }
+    let instance = null
+    let lastEditorData = {
+      type: String,
+      default: ''
+    }
+    const element = ref('')
+    const toolbar = ref('')
+    const container = ref('')
+    const setUpEditorEvents = () => {
+      const editor = instance
+      const emitDebouncedInputEvent = debounce(evt => {
+        const data = lastEditorData = editor.getData()
+        emit('update:modelValue', data, evt, editor)
+        emit('input', data, evt, editor)
+      }, INPUT_EVENT_DEBOUNCE_WAIT, { leading: true })
+      editor.model.document.on('change:data', emitDebouncedInputEvent)
+      editor.editing.view.document.on('focus', evt => {
+        emit('focus', evt, editor)
+      })
+      editor.editing.view.document.on('blur', evt => {
+        emit('blur', evt, editor)
+      })
+    }
+    watch(() => props.modelValue, (value) => {
+      if (instance && value !== lastEditorData) {
+        instance.setData(value)
+      }
+    })
+    watch(() => props.disabled, (readOnlyMode) => {
+      if (readOnlyMode) {
+        instance.enableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
+      } else {
+        instance.disableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
+      }
+    })
+    watch(() => props.config.placeholder, (newVal) => {
+      if (instance) {
+        instance.sourceElement.querySelector('.ck-placeholder').dataset.placeholder = newVal
+      }
+    })
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy()
+        instance = null
+      }
+      emit('destroy', instance)
+    })
+    onMounted(() => {
+      const editorConfig = Object.assign({
+        list: {
+          properties: {
+            styles: true,
+            startIndex: true,
+            reversed: true
+          }
+        },
+        ER: {
+          params: {
+            action: props.action,
+            maxSize: props.maxSize
+          }
+        },
+        extraPlugins: [MyCustomUploadAdapterPlugin]
+      }, props.config)
+      if (props.modelValue) {
+        editorConfig.initialData = props.modelValue
+      }
+      if (props.platform === 'mobile') {
+        // console.log(CKEDITOR)
+        editorConfig.extraPlugins.push(CKEDITOR.plugins.FormattingOptions)
+      }
+      CKEDITOR.DecoupledEditor.create(element.value, editorConfig)
+        .then(editor => {
+          toolbar.value.appendChild(editor.ui.view.toolbar.element)
+          container.value.appendChild(editor.ui.view.editable.element)
+          instance = markRaw(editor)
+          setUpEditorEvents()
+          if (props.modelValue !== editorConfig.initialData) {
+            editor.setData(props.modelValue)
+          }
+          if (props.disabled) {
+            editor.enableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
+          }
+          emit('ready', editor)
+        })
+        .catch(error => {
+          console.error(error)
+        })
+    })
+    return () => {
+      return (
+        <div class={[ns.b(), props.platform === 'mobile' && ns.e('mobile'), 'formatted']}>
+          <div class={[ns.e('toolbar')]} ref={toolbar}></div>
+          <div class={[ns.e('container')]} ref={container}></div>
+          <div ref={element}></div>
+        </div>
+      )
+    }
+  }
+})

src/components/packages/ckeditor/style/index.js

@@ -0,0 +1,2 @@
+import '@ER/theme/icon.scss'
+import '@ER/theme/ckeditor/index.scss'

src/components/packages/formEditor/components/CompleteButton.vue

@@ -0,0 +1,55 @@
+<script>
+import { ref, unref, inject } from 'vue'
+import _ from 'lodash-es'
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-CompleteButton'
+}
+</script>
+<script setup>
+const ER = inject('Everright')
+const props = defineProps({
+  handle: {
+    type: Object
+  },
+  mode: {
+    type: String,
+    default: 'edit'
+  }
+})
+const ns = hooks.useNamespace('CompleteButton')
+const {
+  state,
+  isPc
+} = hooks.useTarget()
+const element = ref('')
+const handleClick = async (type) => {
+  if (props.mode === 'preview') return false
+  try {
+    await Promise.resolve(unref(props.handle).validate())
+    // await ER.checkFieldsValidation()
+    ER.fireEvent('submit', ER.getData())
+  } catch (e) {
+    console.log(e)
+  }
+}
+const dataset = process.env.NODE_ENV === 'test' ? { 'data-test': 'er-complete-button' } : {}
+</script>
+<template>
+  <div v-bind="dataset">
+    <div v-if="isPc" style="text-align: center;">
+      <el-button @click="handleClick" :color="state.config[state.platform].completeButton.backgroundColor" type="primary">
+        <span :style="{color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>
+      </el-button>
+    </div>
+    <div v-else>
+      <van-button @click="handleClick" round block type="primary" :color="state.config[state.platform].completeButton.backgroundColor">
+        <span :style="{color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/DeviceSwitch.vue

@@ -0,0 +1,38 @@
+<script>
+import { ref, inject } from 'vue'
+import hooks from '@ER/hooks'
+import Icon from '@ER/icon'
+export default {
+  name: 'er-DeviceSwitch'
+}
+</script>
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: 'pc'
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+// const ER = inject('Everright')
+const ns = hooks.useNamespace('DeviceSwitch')
+// const {
+//   state
+// } = hooks.useTarget()
+// const element = ref('')
+// defineExpose({
+//   $el: element
+// })
+</script>
+<template>
+  <div :class="[ns.b()]">
+    <Icon @click="() => emit('update:modelValue', 'pc')" icon="PC" :class="[ns.e('icon'), props.modelValue === 'pc' && 'active']"></Icon>
+    <Icon @click="() => emit('update:modelValue', 'mobile')" icon="cellphone" :class="[ns.e('icon'), props.modelValue === 'mobile' && 'active']"></Icon>
+<!--    <Icon @click="() => ER.switchPlatform('pc')" icon="PC" :class="[ns.e('icon'), state.platform === 'pc' && 'active']"></Icon>-->
+<!--    <Icon @click="() => ER.switchPlatform('mobile')" icon="cellphone" :class="[ns.e('icon'), state.platform === 'mobile' && 'active']"></Icon>-->
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Cascader/mobile.vue

@@ -0,0 +1,38 @@
+<script>
+import { computed, ref, nextTick } from 'vue'
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-cascader',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesCascader_mobile')
+const onClear = () => {
+  props.data.options.defaultValue = []
+}
+</script>
+<template>
+  <van-field
+    readonly
+    :class="[ns.b()]"
+    v-bind="params"
+  >
+    <template #input>
+      <el-cascader
+        v-model="data.options.defaultValue"
+        v-bind="params"
+        :popper-class="ns.e('cascader')"
+      />
+    </template>
+    <template v-if="data.options.defaultValue && data.options.defaultValue.length && params.clearable" #button>
+      <van-icon @touchstart.stop="onClear" name="clear" />
+    </template>
+  </van-field>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Cascader/pc.vue

@@ -0,0 +1,23 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-cascader',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesCascader_pc')
+</script>
+<template>
+  <el-cascader
+    :class="[ns.b()]"
+    v-model="data.options.defaultValue"
+    v-bind="params"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Checkbox/mobile.vue

@@ -0,0 +1,37 @@
+<script>
+import hooks from '@ER/hooks'
+import { ref } from 'vue'
+export default {
+  name: 'er-checkbox',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesCheckbox')
+const element = ref()
+</script>
+<template>
+  <van-field
+    readonly
+    v-bind="params"
+    ref="element"
+  >
+    <template #input>
+      <el-checkbox-group
+        @change="element.resetValidation()"
+        :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+        v-model="data.options.defaultValue"
+        v-bind="params">
+        <el-checkbox v-for="item in params.options" :key="item.value" :label="item.value">
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </template>
+  </van-field>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Checkbox/pc.vue

@@ -0,0 +1,26 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-checkbox',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesCheckbox')
+</script>
+<template>
+  <el-checkbox-group
+    :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+    v-model="data.options.defaultValue"
+    v-bind="params">
+    <el-checkbox v-for="item in params.options" :key="item.value" :label="item.value">
+      {{ item.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Date/mobile.vue

@@ -0,0 +1,146 @@
+<script>
+import dayjs from 'dayjs'
+import arraySupport from 'dayjs/plugin/arraySupport.js'
+import hooks from '@ER/hooks'
+import { ref, computed, watch } from 'vue'
+import _ from 'lodash-es'
+dayjs.extend(arraySupport)
+export default {
+  name: 'er-date',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const {
+  t
+} = hooks.useI18n()
+const props = defineProps(['data', 'params'])
+const showPicker = ref(false)
+const currentDate = ref('')
+const currentTime = ref('')
+const calendar = ref()
+const element = ref()
+const columnsType = ['hour', 'minute', 'second']
+watch([() => props.params.type, () => props.data.options.defaultValue], (newVal) => {
+  if (newVal[0] === 'date') {
+    currentDate.value = (newVal[1] ? dayjs.unix(newVal[1]) : dayjs()).format('YYYY/MM/DD').split('/')
+  } else if (newVal[0] === 'datetime') {
+    let date = ''
+    if (newVal[1]) {
+      date = dayjs.unix(newVal[1])
+    } else {
+      date = dayjs()
+    }
+    currentDate.value = date.format('YYYY/MM/DD').split('/')
+    currentTime.value = date.format('HH:mm:ss').split(':')
+  }
+}, {
+  immediate: true
+})
+const currentValue = computed({
+  get () {
+    let result = ''
+    if (props.data.options.defaultValue) {
+      if (props.params.type === 'date') {
+        result = dayjs.unix(props.data.options.defaultValue).format(props.data.options.format)
+      } else if (props.params.type === 'dates') {
+        result = props.data.options.defaultValue.map((e) => dayjs.unix(e).format(props.data.options.format)).join(',')
+      } else if (props.params.type === 'daterange') {
+        const [start, end] = props.data.options.defaultValue
+        result = `${dayjs.unix(start).format(props.data.options.format)} - ${dayjs.unix(end).format(props.data.options.format)}`
+      } else if (props.params.type === 'datetime') {
+        result = dayjs.unix(props.data.options.defaultValue).format(props.data.options.format)
+      }
+    }
+    return result
+  },
+  set (value) {
+    if (props.params.type === 'date') {
+      props.data.options.defaultValue = String(dayjs(value).unix())
+    } else if (props.params.type === 'dates') {
+      props.data.options.defaultValue = value.map(e => String(dayjs(e).unix()))
+    } else if (props.params.type === 'daterange') {
+      props.data.options.defaultValue = value.map(e => String(dayjs(e).unix()))
+    } else if (props.params.type === 'datetime') {
+      props.data.options.defaultValue = String(dayjs(`${value[0].join('/')} ${value[1].join(':')}`, 'YYYY/MM/DD HH:mm:ss').unix())
+    }
+  }
+})
+const onConfirm = (value) => {
+  showPicker.value = false
+  if (props.params.type === 'date') {
+    currentValue.value = currentDate.value
+  } else if (props.params.type === 'dates') {
+    currentValue.value = value
+  } else if (props.params.type === 'daterange') {
+    currentValue.value = value
+  } else if (props.params.type === 'datetime') {
+    currentValue.value = [value[0].selectedValues, value[1].selectedValues]
+  }
+}
+const onCancel = () => {
+  showPicker.value = false
+}
+const onClear = () => {
+  props.data.options.defaultValue = ''
+  if (/^(dates|daterange)$/.test(props.params.type)) {
+    calendar.value.reset()
+  }
+  element.value.validate()
+}
+</script>
+<template>
+  <van-field
+    ref="element"
+    readonly
+    v-model="currentValue"
+    v-bind="params"
+    @click="!params.disabled && (showPicker = true)"
+  >
+    <template v-if="!params.disabled && currentValue && params.clearable" #button>
+      <van-icon @click.stop="onClear" name="clear" />
+    </template>
+    <template #input>
+      <input
+        v-if="!data.options.defaultValue"
+        :placeholder="params.placeholder"
+        class="van-field__control"
+        readonly
+        type="text">
+      <template v-else>
+        {{currentValue}}
+      </template>
+    </template>
+  </van-field>
+  <van-popup v-if="params.type === 'date'" v-model:show="showPicker" round position="bottom">
+    <van-date-picker
+      v-bind="params"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+      v-model="currentDate"
+    />
+  </van-popup>
+  <van-popup v-if="params.type === 'datetime'" v-model:show="showPicker" round position="bottom">
+    <van-picker-group
+      v-if="params.type === 'datetime'"
+      :tabs="[t('er.form.selectDate'), t('er.form.selectTime')]"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    >
+      <van-date-picker
+        v-model="currentDate"
+        v-bind="params"
+      />
+      <van-time-picker
+        :columns-type="columnsType"
+        v-model="currentTime" />
+    </van-picker-group>
+  </van-popup>
+  <van-calendar ref="calendar" v-if="params.type === 'dates'" v-bind="params" v-model:show="showPicker" type="multiple" @confirm="onConfirm" />
+  <van-calendar ref="calendar" v-if="params.type === 'daterange'" v-bind="params" v-model:show="showPicker" type="range" @confirm="onConfirm" />
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Date/pc.vue

@@ -0,0 +1,23 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-date',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesDate_pc')
+</script>
+<template>
+  <el-date-picker
+    :class="[ns.b()]"
+    v-model="data.options.defaultValue"
+    v-bind="params"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Divider/mobile.vue

@@ -0,0 +1,31 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-divider',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+</script>
+<template>
+  <van-field
+    readonly
+    :label="params.label"
+    :required="params.required"
+  >
+    <template #input>
+      <van-divider
+        v-bind="params"
+        style="width: 100%;"
+      >
+        {{data.options.defaultValue}}
+      </van-divider>
+    </template>
+  </van-field>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Divider/pc.vue

@@ -0,0 +1,22 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-divider',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesDivider_pc')
+</script>
+<template>
+  <el-divider
+    :class="[ns.b()]"
+    v-bind="params"
+  >{{data.options.defaultValue}}</el-divider>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Html/mobile.vue

@@ -0,0 +1,70 @@
+<script>
+import { ElMessage } from 'element-plus'
+import hooks from '@ER/hooks'
+import { ref, computed, watch, nextTick } from 'vue'
+import CKEditor from '@ER/ckeditor'
+export default {
+  name: 'er-html',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const {
+  t
+} = hooks.useI18n()
+const props = defineProps(['data', 'params'])
+const dialogVisible = ref(false)
+const popup = ref()
+const ns = hooks.useNamespace('FormTypesHtml_mobile')
+const currentValue = computed({
+  get () {
+    let result = ''
+    if (props.data.options.defaultValue) {
+      result = t('er.form.filled')
+    } else {
+      result = t('er.form.notFilled')
+    }
+    return result
+  }
+})
+const handleAction = async (type) => {
+  dialogVisible.value = false
+}
+</script>
+<template>
+<!--  />-->
+  <van-field
+    readonly
+    v-model="currentValue"
+    @click="!params.disabled && (dialogVisible = true)"
+    v-bind="params" />
+  <van-popup
+    ref="popup"
+    :lock-scroll="false"
+    :class="ns.e('popup')"
+    teleport="body"
+    v-model:show="dialogVisible"
+    position="right"
+    :style="{ width: '100%', height: '100vh' }"
+    :safe-area-inset-bottom="true"
+  >
+    <van-nav-bar
+      :left-text="t('er.public.back')"
+      left-arrow
+      @click-left="handleAction(1)">
+      <template #right>
+        <span @click="handleAction(2)" class="van-nav-bar__text">{{ t('er.public.save') }}</span>
+      </template>
+    </van-nav-bar>
+    <CKEditor
+      platform="mobile"
+      v-model="data.options.defaultValue"
+      v-bind="params"
+    ></CKEditor>
+  </van-popup>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Html/pc.vue

@@ -0,0 +1,30 @@
+<script>
+import hooks from '@ER/hooks'
+// import * as dd from '/external/ckeditor5/build/ckeditor.js'
+// import CKEDITOR from '/external/ckeditor5/build/ckeditor.js'
+// import { component } from '@ckeditor/ckeditor5-vue'
+import CKEditor from '@ER/ckeditor'
+export default {
+  name: 'er-html',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const han = () => {
+  // console.log(123123123123)
+}
+</script>
+<template>
+  <CKEditor
+    v-model="data.options.defaultValue"
+    style="width: 100px;"
+    @ready="han"
+    v-bind="params"
+  ></CKEditor>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Input/mobile.vue

@@ -0,0 +1,20 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-input',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+</script>
+<template>
+  <van-field
+    v-model="data.options.defaultValue"
+    v-bind="params" />
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Input/pc.vue

@@ -0,0 +1,24 @@
+<script>
+import { watch } from 'vue'
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-input',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+</script>
+<template>
+  <el-input
+    v-model="data.options.defaultValue"
+    v-bind="params">
+    <template #prepend v-if="params.prepend">{{params.prepend}}</template>
+    <template #append v-if="params.append">{{params.append}}</template>
+  </el-input>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Number/mobile.vue

@@ -0,0 +1,39 @@
+<script>
+import hooks from '@ER/hooks'
+import { computed } from 'vue'
+
+export default {
+  name: 'er-number',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const model = computed({
+  get () {
+    return props.data.options.defaultValue === null ? '' : props.data.options.defaultValue
+  },
+  set (value) {
+    props.data.options.defaultValue = value
+  }
+})
+</script>
+<template>
+  <van-field
+    readonly
+    v-bind="params"
+  >
+    <template #input>
+
+      <van-stepper
+        v-model="model"
+        v-bind="params"
+      />
+    </template>
+  </van-field>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Number/pc.vue

@@ -0,0 +1,23 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-number',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesNumber_pc')
+</script>
+<template>
+  <el-input-number
+    :class="[ns.b()]"
+    v-model="data.options.defaultValue"
+    v-bind="params"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Radio/mobile.vue

@@ -0,0 +1,37 @@
+<script>
+import hooks from '@ER/hooks'
+import { ref } from 'vue'
+export default {
+  name: 'er-radio',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesRadio')
+const element = ref()
+</script>
+<template>
+  <van-field
+    readonly
+    v-bind="params"
+    ref="element"
+  >
+    <template #input>
+      <el-radio-group
+        @change="element.resetValidation()"
+        v-model="data.options.defaultValue"
+        :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+        v-bind="params">
+        <el-radio v-for="item in params.options" :key="item.value" :label="item.value">
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </template>
+  </van-field>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Radio/pc.vue

@@ -0,0 +1,30 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-radio',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+const ns = hooks.useNamespace('FormTypesRadio')
+const {
+  isEditModel
+} = hooks.useTarget()
+</script>
+<template>
+  <el-radio-group
+    :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+    v-model="data.options.defaultValue"
+    v-bind="params">
+<!--    <el-radio v-for="item in params.options" :key="item.value" :label="isEditModel ? item.id : item.value">-->
+    <el-radio v-for="item in params.options" :key="item.value" :label="item.value">
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Rate/mobile.vue

@@ -0,0 +1,28 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-rate',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+</script>
+<template>
+  <van-field
+    readonly
+    v-bind="params"
+  >
+    <template #input>
+      <van-rate
+        v-model="data.options.defaultValue"
+        v-bind="params"
+      />
+    </template>
+  </van-field>
+</template>
+
+<style scoped>
+
+</style>

src/components/packages/formEditor/components/FormTypes/Rate/pc.vue

@@ -0,0 +1,21 @@
+<script>
+import hooks from '@ER/hooks'
+export default {
+  name: 'er-rate',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const props = defineProps(['data', 'params'])
+</script>
+<template>
+  <el-rate
+    v-model="data.options.defaultValue"
+    v-bind="params"
+  />
+</template>
+
+<style scoped>
+
+</style>