feat(codeEditor): add type and config && add use case (#3829)

* chore(codeEditor): add type and config && add use case

* type(codeEditor): perf the config

* fix annotate

* fix annotate

src/components/CodeEditor/src/CodeEditor.vue

@@ -6,6 +6,7 @@
       :mode="mode"
       :readonly="readonly"
       :bordered="bordered"
+      :config="config"
     />
   </div>
 </template>
@@ -14,7 +15,7 @@
   import CodeMirrorEditor from './codemirror/CodeMirror.vue';
   import { isString } from '@/utils/is';
   import { MODE } from './typing';
-
+  import type { EditorConfiguration } from 'codemirror';
   const props = defineProps({
     value: { type: [Object, String] as PropType<Record<string, any> | string> },
     mode: {
@@ -28,6 +29,7 @@
     readonly: { type: Boolean },
     autoFormat: { type: Boolean, default: true },
     bordered: { type: Boolean, default: false },
+    config: { type: Object as PropType<EditorConfiguration>, default: {} },
   });
 
   const emit = defineEmits(['change', 'update:value', 'format-error']);

src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -22,15 +22,22 @@
   import { useDebounceFn } from '@vueuse/core';
   import { useAppStore } from '@/store/modules/app';
   import CodeMirror from 'codemirror';
-  import { MODE } from './../typing';
+  import type { EditorConfiguration } from 'codemirror';
+  import { MODE, parserDynamicImport } from './../typing';
   // css
-  import './codemirror.css';
+  import 'codemirror/lib/codemirror.css';
   import 'codemirror/theme/idea.css';
   import 'codemirror/theme/material-palenight.css';
-  // modes
-  import 'codemirror/mode/javascript/javascript';
-  import 'codemirror/mode/css/css';
-  import 'codemirror/mode/htmlmixed/htmlmixed';
+
+  // 代码段折叠功能
+  import 'codemirror/addon/fold/foldgutter.css';
+  import 'codemirror/addon/fold/foldcode.js';
+  import 'codemirror/addon/fold/foldgutter';
+  import 'codemirror/addon/fold/brace-fold';
+  import 'codemirror/addon/fold/comment-fold';
+  import 'codemirror/addon/fold/markdown-fold';
+  import 'codemirror/addon/fold/xml-fold';
+  import 'codemirror/addon/fold/indent-fold';
 
   const props = defineProps({
     mode: {
@@ -44,6 +51,7 @@
     value: { type: String, default: '' },
     readonly: { type: Boolean, default: false },
     bordered: { type: Boolean, default: false },
+    config: { type: Object as PropType<EditorConfiguration>, default: {} },
   });
 
   const emit = defineEmits(['change']);
@@ -66,7 +74,8 @@
     { flush: 'post' },
   );
 
-  watchEffect(() => {
+  watchEffect(async () => {
+    await parserDynamicImport(props.mode)();
     editor?.setOption('mode', props.mode);
   });
 
@@ -96,7 +105,7 @@
       autoCloseBrackets: true,
       autoCloseTags: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers'],
+      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     };
 
     editor = CodeMirror(el.value!, {
@@ -108,6 +117,7 @@
       lineWrapping: true,
       lineNumbers: true,
       ...addonOptions,
+      ...props.config,
     });
     editor?.setValue(props.value);
     setTheme();

src/components/CodeEditor/src/codemirror/codemirror.css

@@ -1,529 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  --base: #545281;
-  --comment: hsl(210deg 25% 60%);
-  --keyword: #af4ab1;
-  --variable: #0055d1;
-  --function: #c25205;
-  --string: #2ba46d;
-  --number: #c25205;
-  --tags: #d00;
-  --qualifier: #ff6032;
-  --important: var(--string);
-
-  position: relative;
-  height: auto;
-  height: 100%;
-  overflow: hidden;
-  font-family: var(--font-code);
-  background: white;
-  direction: ltr;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  min-height: 1px; /* prevents collapsing before first draw */
-  padding: 4px 0; /* Vertical padding around content */
-  cursor: text;
-}
-
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  min-height: 100%;
-  white-space: nowrap;
-  background-color: transparent;
-  border-right: 1px solid #ddd;
-}
-
-.CodeMirror-linenumber {
-  min-width: 20px;
-  padding: 0 3px 0 5px;
-  color: var(--comment);
-  text-align: right;
-  white-space: nowrap;
-  opacity: 0.6;
-}
-
-.CodeMirror-guttermarker {
-  color: black;
-}
-
-.CodeMirror-guttermarker-subtle {
-  color: #999;
-}
-
-/* FOLD GUTTER */
-
-.CodeMirror-foldmarker {
-  font-family: arial;
-  line-height: 0.3;
-  color: #414141;
-  text-shadow:
-    #f96 1px 1px 2px,
-    #f96 -1px -1px 2px,
-    #f96 1px -1px 2px,
-    #f96 -1px 1px 2px;
-  cursor: pointer;
-}
-
-.CodeMirror-foldgutter {
-  width: 0.7em;
-}
-
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
-  cursor: pointer;
-}
-
-.CodeMirror-foldgutter-open::after,
-.CodeMirror-foldgutter-folded::after {
-  position: relative;
-  top: -0.1em;
-  display: inline-block;
-  font-size: 0.8em;
-  content: '>';
-  opacity: 0.8;
-  transform: rotate(90deg);
-  transition: transform 0.2s;
-}
-
-.CodeMirror-foldgutter-folded::after {
-  transform: none;
-}
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  position: absolute;
-  width: 0;
-  pointer-events: none;
-  border-right: none;
-  border-left: 1px solid black;
-}
-
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  background: #7e7;
-  border: 0 !important;
-}
-
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-
-.cm-fat-cursor-mark {
-  background-color: rgb(20 255 20 / 50%);
-  animation: blink 1.06s steps(1) infinite;
-}
-
-.cm-animate-fat-cursor {
-  width: auto;
-  background-color: #7e7;
-  border: 0;
-  animation: blink 1.06s steps(1) infinite;
-}
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
-
-.cm-tab {
-  display: inline-block;
-  text-decoration: inherit;
-}
-
-.CodeMirror-rulers {
-  position: absolute;
-  top: -50px;
-  right: 0;
-  bottom: -20px;
-  left: 0;
-  overflow: hidden;
-}
-
-.CodeMirror-ruler {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-left: 1px solid #ccc;
-}
-
-/* DEFAULT THEME */
-.cm-s-default.CodeMirror {
-  background-color: transparent;
-}
-
-.cm-s-default .cm-header {
-  color: blue;
-}
-
-.cm-s-default .cm-quote {
-  color: #090;
-}
-
-.cm-negative {
-  color: #d44;
-}
-
-.cm-positive {
-  color: #292;
-}
-
-.cm-header,
-.cm-strong {
-  font-weight: bold;
-}
-
-.cm-em {
-  font-style: italic;
-}
-
-.cm-link {
-  text-decoration: underline;
-}
-
-.cm-strikethrough {
-  text-decoration: line-through;
-}
-
-.cm-s-default .cm-atom,
-.cm-s-default .cm-def,
-.cm-s-default .cm-property,
-.cm-s-default .cm-variable-2,
-.cm-s-default .cm-variable-3,
-.cm-s-default .cm-punctuation {
-  color: var(--base);
-}
-
-.cm-s-default .cm-hr,
-.cm-s-default .cm-comment {
-  color: var(--comment);
-}
-
-.cm-s-default .cm-attribute,
-.cm-s-default .cm-keyword {
-  color: var(--keyword);
-}
-
-.cm-s-default .cm-variable {
-  color: var(--variable);
-}
-
-.cm-s-default .cm-bracket,
-.cm-s-default .cm-tag {
-  color: var(--tags);
-}
-
-.cm-s-default .cm-number {
-  color: var(--number);
-}
-
-.cm-s-default .cm-string,
-.cm-s-default .cm-string-2 {
-  color: var(--string);
-}
-
-.cm-s-default .cm-type {
-  color: #085;
-}
-
-.cm-s-default .cm-meta {
-  color: #555;
-}
-
-.cm-s-default .cm-qualifier {
-  color: var(--qualifier);
-}
-
-.cm-s-default .cm-builtin {
-  color: #7539ff;
-}
-
-.cm-s-default .cm-link {
-  color: var(--flash);
-}
-
-.cm-s-default .cm-error {
-  color: #ff008c;
-}
-
-.cm-invalidchar {
-  color: #ff008c;
-}
-
-.CodeMirror-composing {
-  border-bottom: 2px solid;
-}
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {
-  color: #0b0;
-}
-
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: #a22;
-}
-
-.CodeMirror-matchingtag {
-  background: rgb(255 150 0 / 30%);
-}
-
-.CodeMirror-activeline-background {
-  background: #e8f2ff;
-}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror-scroll {
-  position: relative;
-  height: 100%;
-  padding-bottom: 30px;
-  margin-right: -30px;
-
-  /* 30px is the magic margin used to hide the element's real scrollbars */
-
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -30px;
-  overflow: scroll !important; /* Things will break if this is overridden */
-  outline: none; /* Prevent dragging from highlighting the element */
-}
-
-.CodeMirror-sizer {
-  position: relative;
-  margin-bottom: 20px !important;
-  border-right: 30px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar,
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-}
-
-.CodeMirror-vscrollbar {
-  top: 0;
-  right: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.CodeMirror-hscrollbar {
-  bottom: 0;
-  left: 0;
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-
-.CodeMirror-scrollbar-filler {
-  right: 0;
-  bottom: 0;
-}
-
-.CodeMirror-gutter-filler {
-  bottom: 0;
-  left: 0;
-}
-
-.CodeMirror-gutter {
-  display: inline-block;
-  height: 100%;
-  margin-bottom: -30px;
-  white-space: normal;
-  vertical-align: top;
-}
-
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-
-.CodeMirror-gutter-elt {
-  position: absolute;
-  z-index: 4;
-  cursor: default;
-}
-
-.CodeMirror-gutter-wrapper ::selection {
-  background-color: transparent;
-}
-
-.CodeMirrorwrapper ::selection {
-  background-color: transparent;
-}
-
-.CodeMirror pre {
-  position: relative;
-  z-index: 2;
-  padding: 0 4px; /* Horizontal padding of content */
-  margin: 0;
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  word-wrap: normal;
-  white-space: pre;
-  background: transparent;
-  border-width: 0;
-
-  /* Reset some styles that the rest of the page might have set */
-  border-radius: 0;
-  -webkit-tap-highlight-color: transparent;
-  font-variant-ligatures: contextual;
-}
-
-.CodeMirror-wrap pre {
-  word-break: normal;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-rtl pre {
-  direction: rtl;
-}
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-measure pre {
-  position: static;
-}
-
-div.CodeMirror-cursors {
-  position: relative;
-  z-index: 3;
-  visibility: hidden;
-}
-
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected {
-  background: #d9d9d9;
-}
-
-.CodeMirror-focused .CodeMirror-selected {
-  background: #d7d4f0;
-}
-
-.CodeMirror-crosshair {
-  cursor: crosshair;
-}
-
-.CodeMirror-line::selection,
-.CodeMirror-line > span::selection,
-.CodeMirror-line > span > span::selection {
-  background: #d7d4f0;
-}
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgb(255 255 0 / 40%);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border {
-  padding-right: 0.1px;
-}
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack::after {
-  content: '';
-}
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext {
-  background: none;
-}

src/components/CodeEditor/src/typing.ts

@@ -2,4 +2,248 @@ export enum MODE {
   JSON = 'application/json',
   HTML = 'htmlmixed',
   JS = 'javascript',
+  APL = 'apl',
+  ASCIIARMOR = 'asciiarmor',
+  ASTERISK = 'asterisk',
+  BRAINFUCK = 'brainfuck',
+  CLIKE = 'clike',
+  CLOJURE = 'clojure',
+  CMAKE = 'cmake',
+  COBOL = 'cobol',
+  COFFEESCRIPT = 'coffeescript',
+  COMMONLISP = 'commonlisp',
+  CRYSTAL = 'crystal',
+  CSS = 'css',
+  CYPHER = 'cypher',
+  D = 'd',
+  DART = 'dart',
+  DIFF = 'diff',
+  DJANGO = 'django',
+  DOCKERFILE = 'dockerfile',
+  DTD = 'dtd',
+  DYLAN = 'dylan',
+  EBNF = 'ebnf',
+  ECL = 'ecl',
+  EIFFEL = 'eiffel',
+  ELM = 'elm',
+  ERLANG = 'erlang',
+  FACTOR = 'factor',
+  FCL = 'fcl',
+  FORTH = 'forth',
+  FORTRAN = 'fortran',
+  GAS = 'gas',
+  GFM = 'gfm',
+  GHERKIN = 'gherkin',
+  GO = 'go',
+  GROOVY = 'groovy',
+  HAML = 'haml',
+  HANDLEBARS = 'handlebars',
+  HASKELL = 'haskell',
+  HAXE = 'haxe',
+  HTMLEMBEDDED = 'htmlembedded',
+  HTMLMIXED = 'htmlmixed',
+  HTTP = 'http',
+  IDL = 'idl',
+  JAVASCRIPT = 'javascript',
+  JINJA2 = 'jinja2',
+  JSX = 'jsx',
+  JULIA = 'julia',
+  LIVESCRIPT = 'livescript',
+  LUA = 'lua',
+  MARKDOWN = 'markdown',
+  MATHEMATICA = 'mathematica',
+  MBOX = 'mbox',
+  MIRC = 'mirc',
+  MLLIKE = 'mllike',
+  MODELICA = 'modelica',
+  MSCGEN = 'mscgen',
+  MUMPS = 'mumps',
+  NGINX = 'nginx',
+  NSIS = 'nsis',
+  NTRIPLES = 'ntriples',
+  OCTAVE = 'octave',
+  OZ = 'oz',
+  PASCAL = 'pascal',
+  PEGJS = 'pegjs',
+  PERL = 'perl',
+  PHP = 'php',
+  PIG = 'pig',
+  POWERSHELL = 'powershell',
+  PROPERTIES = 'properties',
+  PROTOBUF = 'protobuf',
+  PUG = 'pug',
+  PUPPET = 'puppet',
+  PYTHON = 'python',
+  Q = 'q',
+  R = 'r',
+  RPM = 'rpm',
+  RST = 'rst',
+  RUBY = 'ruby',
+  RUST = 'rust',
+  SAS = 'sas',
+  SASS = 'sass',
+  SCHEME = 'scheme',
+  SHELL = 'shell',
+  SIEVE = 'sieve',
+  SLIM = 'slim',
+  SMALLTALK = 'smalltalk',
+  SMARTY = 'smarty',
+  SOLR = 'solr',
+  SOY = 'soy',
+  SPARQL = 'sparql',
+  SPREADSHEET = 'spreadsheet',
+  SQL = 'sql',
+  STEX = 'stex',
+  STYLUS = 'stylus',
+  SWIFT = 'swift',
+  TCL = 'tcl',
+  TEXTILE = 'textile',
+  TIDDLYWIKI = 'tiddlywiki',
+  TIKI = 'tiki',
+  TOML = 'toml',
+  TORNADO = 'tornado',
+  TROFF = 'troff',
+  TTCN = 'ttcn',
+  TURTLE = 'turtle',
+  TWIG = 'twig',
+  VB = 'vb',
+  VBSCRIPT = 'vbscript',
+  VELOCITY = 'velocity',
+  VERILOG = 'verilog',
+  VHDL = 'vhdl',
+  VUE = 'vue',
+  WAST = 'wast',
+  WEBIDL = 'webidl',
+  XML = 'xml',
+  XQUERY = 'xquery',
+  YACAS = 'yacas',
+  YAML = 'yaml',
+  Z80 = 'z80',
+}
+/**
+ * @description: DynamicImport codemirror 
+ */
+export function parserDynamicImport(str: MODE): () => Promise<any> {
+  let dynamicArray = {
+    // adapt before demo
+    "application/json": async () => await import('codemirror/mode/javascript/javascript'),
+    apl: async () => await import('codemirror/mode/apl/apl'),
+    asciiarmor: async () => await import('codemirror/mode/asciiarmor/asciiarmor'),
+    asterisk: async () => await import('codemirror/mode/asterisk/asterisk'),
+    brainfuck: async () => await import('codemirror/mode/brainfuck/brainfuck'),
+    clike: async () => await import('codemirror/mode/clike/clike'),
+    clojure: async () => await import('codemirror/mode/clojure/clojure'),
+    cmake: async () => await import('codemirror/mode/cmake/cmake'),
+    cobol: async () => await import('codemirror/mode/cobol/cobol'),
+    coffeescript: async () => await import('codemirror/mode/coffeescript/coffeescript'),
+    commonlisp: async () => await import('codemirror/mode/commonlisp/commonlisp'),
+    crystal: async () => await import('codemirror/mode/crystal/crystal'),
+    css: async () => await import('codemirror/mode/css/css'),
+    cypher: async () => await import('codemirror/mode/cypher/cypher'),
+    d: async () => await import('codemirror/mode/d/d'),
+    dart: async () => await import('codemirror/mode/dart/dart'),
+    diff: async () => await import('codemirror/mode/diff/diff'),
+    django: async () => await import('codemirror/mode/django/django'),
+    dockerfile: async () => await import('codemirror/mode/dockerfile/dockerfile'),
+    dtd: async () => await import('codemirror/mode/dtd/dtd'),
+    dylan: async () => await import('codemirror/mode/dylan/dylan'),
+    ebnf: async () => await import('codemirror/mode/ebnf/ebnf'),
+    ecl: async () => await import('codemirror/mode/ecl/ecl'),
+    eiffel: async () => await import('codemirror/mode/eiffel/eiffel'),
+    elm: async () => await import('codemirror/mode/elm/elm'),
+    erlang: async () => await import('codemirror/mode/erlang/erlang'),
+    factor: async () => await import('codemirror/mode/factor/factor'),
+    fcl: async () => await import('codemirror/mode/fcl/fcl'),
+    forth: async () => await import('codemirror/mode/forth/forth'),
+    fortran: async () => await import('codemirror/mode/fortran/fortran'),
+    gas: async () => await import('codemirror/mode/gas/gas'),
+    gfm: async () => await import('codemirror/mode/gfm/gfm'),
+    gherkin: async () => await import('codemirror/mode/gherkin/gherkin'),
+    go: async () => await import('codemirror/mode/go/go'),
+    groovy: async () => await import('codemirror/mode/groovy/groovy'),
+    haml: async () => await import('codemirror/mode/haml/haml'),
+    handlebars: async () => await import('codemirror/mode/handlebars/handlebars'),
+    haskell: async () => await import('codemirror/mode/haskell/haskell'),
+    haxe: async () => await import('codemirror/mode/haxe/haxe'),
+    htmlembedded: async () => await import('codemirror/mode/htmlembedded/htmlembedded'),
+    htmlmixed: async () => await import('codemirror/mode/htmlmixed/htmlmixed'),
+    http: async () => await import('codemirror/mode/http/http'),
+    idl: async () => await import('codemirror/mode/idl/idl'),
+    javascript: async () => await import('codemirror/mode/javascript/javascript'),
+    jinja2: async () => await import('codemirror/mode/jinja2/jinja2'),
+    jsx: async () => await import('codemirror/mode/jsx/jsx'),
+    julia: async () => await import('codemirror/mode/julia/julia'),
+    livescript: async () => await import('codemirror/mode/livescript/livescript'),
+    lua: async () => await import('codemirror/mode/lua/lua'),
+    markdown: async () => await import('codemirror/mode/markdown/markdown'),
+    mathematica: async () => await import('codemirror/mode/mathematica/mathematica'),
+    mbox: async () => await import('codemirror/mode/mbox/mbox'),
+    mirc: async () => await import('codemirror/mode/mirc/mirc'),
+    mllike: async () => await import('codemirror/mode/mllike/mllike'),
+    modelica: async () => await import('codemirror/mode/modelica/modelica'),
+    mscgen: async () => await import('codemirror/mode/mscgen/mscgen'),
+    mumps: async () => await import('codemirror/mode/mumps/mumps'),
+    nginx: async () => await import('codemirror/mode/nginx/nginx'),
+    nsis: async () => await import('codemirror/mode/nsis/nsis'),
+    ntriples: async () => await import('codemirror/mode/ntriples/ntriples'),
+    octave: async () => await import('codemirror/mode/octave/octave'),
+    oz: async () => await import('codemirror/mode/oz/oz'),
+    pascal: async () => await import('codemirror/mode/pascal/pascal'),
+    pegjs: async () => await import('codemirror/mode/pegjs/pegjs'),
+    perl: async () => await import('codemirror/mode/perl/perl'),
+    php: async () => await import('codemirror/mode/php/php'),
+    pig: async () => await import('codemirror/mode/pig/pig'),
+    powershell: async () => await import('codemirror/mode/powershell/powershell'),
+    properties: async () => await import('codemirror/mode/properties/properties'),
+    protobuf: async () => await import('codemirror/mode/protobuf/protobuf'),
+    pug: async () => await import('codemirror/mode/pug/pug'),
+    puppet: async () => await import('codemirror/mode/puppet/puppet'),
+    python: async () => await import('codemirror/mode/python/python'),
+    q: async () => await import('codemirror/mode/q/q'),
+    r: async () => await import('codemirror/mode/r/r'),
+    rpm: async () => await import('codemirror/mode/rpm/rpm'),
+    rst: async () => await import('codemirror/mode/rst/rst'),
+    ruby: async () => await import('codemirror/mode/ruby/ruby'),
+    rust: async () => await import('codemirror/mode/rust/rust'),
+    sas: async () => await import('codemirror/mode/sas/sas'),
+    sass: async () => await import('codemirror/mode/sass/sass'),
+    scheme: async () => await import('codemirror/mode/scheme/scheme'),
+    shell: async () => await import('codemirror/mode/shell/shell'),
+    sieve: async () => await import('codemirror/mode/sieve/sieve'),
+    slim: async () => await import('codemirror/mode/slim/slim'),
+    smalltalk: async () => await import('codemirror/mode/smalltalk/smalltalk'),
+    smarty: async () => await import('codemirror/mode/smarty/smarty'),
+    solr: async () => await import('codemirror/mode/solr/solr'),
+    soy: async () => await import('codemirror/mode/soy/soy'),
+    sparql: async () => await import('codemirror/mode/sparql/sparql'),
+    spreadsheet: async () => await import('codemirror/mode/spreadsheet/spreadsheet'),
+    sql: async () => await import('codemirror/mode/sql/sql'),
+    stex: async () => await import('codemirror/mode/stex/stex'),
+    stylus: async () => await import('codemirror/mode/stylus/stylus'),
+    swift: async () => await import('codemirror/mode/swift/swift'),
+    tcl: async () => await import('codemirror/mode/tcl/tcl'),
+    textile: async () => await import('codemirror/mode/textile/textile'),
+    tiddlywiki: async () => await import('codemirror/mode/tiddlywiki/tiddlywiki'),
+    tiki: async () => await import('codemirror/mode/tiki/tiki'),
+    toml: async () => await import('codemirror/mode/toml/toml'),
+    tornado: async () => await import('codemirror/mode/tornado/tornado'),
+    troff: async () => await import('codemirror/mode/troff/troff'),
+    ttcn: async () => await import('codemirror/mode/ttcn/ttcn'),
+    turtle: async () => await import('codemirror/mode/turtle/turtle'),
+    twig: async () => await import('codemirror/mode/twig/twig'),
+    vb: async () => await import('codemirror/mode/vb/vb'),
+    vbscript: async () => await import('codemirror/mode/vbscript/vbscript'),
+    velocity: async () => await import('codemirror/mode/velocity/velocity'),
+    verilog: async () => await import('codemirror/mode/verilog/verilog'),
+    vhdl: async () => await import('codemirror/mode/vhdl/vhdl'),
+    vue: async () => await import('codemirror/mode/vue/vue'),
+    wast: async () => await import('codemirror/mode/wast/wast'),
+    webidl: async () => await import('codemirror/mode/webidl/webidl'),
+    xml: async () => await import('codemirror/mode/xml/xml'),
+    xquery: async () => await import('codemirror/mode/xquery/xquery'),
+    yacas: async () => await import('codemirror/mode/yacas/yacas'),
+    yaml: async () => await import('codemirror/mode/yaml/yaml'),
+    z80: async () => await import('codemirror/mode/z80/z80'),
+  };
+  return dynamicArray[str];
 }

src/locales/lang/en/routes/demo.json

@@ -37,7 +37,7 @@
   },
   "editor": {
     "editor": "Editor",
-    "jsonEditor": "Json editor",
+    "codeEditor": "Code editor",
     "markdown": "Markdown editor",
     "tinymce": "Rich text",
     "tinymceBasic": "Basic",

src/locales/lang/zh-CN/routes/demo.json

@@ -37,7 +37,7 @@
   },
   "editor": {
     "editor": "编辑器",
-    "jsonEditor": "Json编辑器",
+    "codeEditor": "代码编辑器",
     "markdown": "markdown编辑器",
     "tinymce": "富文本",
     "tinymceBasic": "基础使用",

src/router/routes/modules/demo/comp.ts

@@ -345,12 +345,30 @@ const comp: AppRouteModule = {
       },
       children: [
         {
-          path: 'json',
-          component: () => import('@/views/demo/editor/json/index.vue'),
-          name: 'JsonEditorDemo',
+          path: 'code',
+          component: () => import('@/views/demo/editor/code/index.vue'),
+          name: 'codeEditorDemo',
           meta: {
-            title: t('routes.demo.editor.jsonEditor'),
+            title: t('routes.demo.editor.codeEditor'),
           },
+          children: [
+            {
+              path: 'code',
+              name: 'codeBasicDemo',
+              component: () => import('@/views/demo/editor/code/index.vue'),
+              meta: {
+                title: t('routes.demo.editor.tinymceBasic'),
+              },
+            },
+            {
+              path: 'editor',
+              name: 'codeEditorBasicDemo',
+              component: () => import('@/views/demo/editor/code/Editor.vue'),
+              meta: {
+                title: t('routes.demo.editor.tinymceForm'),
+              },
+            },
+          ],
         },
         {
           path: 'markdown',

src/views/demo/editor/code/Editor.vue

@@ -0,0 +1,84 @@
+<template>
+  <PageWrapper title="代码编辑器组件嵌入Form示例">
+    <CollapseContainer title="代码编辑器组件">
+      <BasicForm
+        :labelWidth="100"
+        :schemas="schemas"
+        :actionColOptions="{ span: 24 }"
+        :baseColProps="{ span: 24 }"
+        @submit="handleSubmit"
+      />
+    </CollapseContainer>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { BasicForm, FormSchema } from '@/components/Form';
+  import { CollapseContainer } from '@/components/Container';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { PageWrapper } from '@/components/Page';
+  import { CodeEditor, MODE } from '@/components/CodeEditor';
+  const schemas: FormSchema[] = [
+    {
+      field: 'title',
+      component: 'Input',
+      label: 'title',
+      defaultValue: '标题',
+      rules: [{ required: true }],
+    },
+    {
+      field: 'JSON',
+      component: 'Input',
+      label: 'JSON',
+      defaultValue: `{
+        "name":"BeJson",
+        "url":"http://www.xxx.com",
+        "page":88,
+        "isNonProfit":true,"
+        address:{ 
+            "street":"科技园路.",
+            "city":"江苏苏州",
+            "country":"中国"
+        },
+}`,
+      rules: [{ required: true, trigger: 'blur' }],
+      render: ({ model, field }) => {
+        return h(CodeEditor, {
+          value: model[field],
+          mode: MODE.JSON,
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+          config: {
+            tabSize: 10,
+          },
+        });
+      },
+    },
+    {
+      field: 'PYTHON',
+      component: 'Input',
+      label: 'PYTHON',
+      defaultValue: `def functionname( parameters ):
+   "函数_文档字符串"
+   function_suite
+   return [expression]`,
+      rules: [{ required: true, trigger: 'blur' }],
+      render: ({ model, field }) => {
+        return h(CodeEditor, {
+          value: model[field],
+          mode: MODE.PYTHON,
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+        });
+      },
+    },
+  ];
+  const { createMessage } = useMessage();
+
+  function handleSubmit(values: any) {
+    console.log('click search,values:', values);
+    createMessage.success('click search,values:' + JSON.stringify(values));
+  }
+</script>