From 0ee721183bf52c4d1239a7966cc76f2150b43b13 Mon Sep 17 00:00:00 2001 From: Electrolux <59329360+electroluxcode@users.noreply.github.com> Date: Fri, 10 May 2024 16:37:22 +0800 Subject: [PATCH] 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 | 4 +- .../CodeEditor/src/codemirror/CodeMirror.vue | 26 +- .../CodeEditor/src/codemirror/codemirror.css | 529 ------------------ src/components/CodeEditor/src/typing.ts | 244 ++++++++ src/locales/lang/en/routes/demo.json | 2 +- src/locales/lang/zh-CN/routes/demo.json | 2 +- src/router/routes/modules/demo/comp.ts | 26 +- src/views/demo/editor/code/Editor.vue | 84 +++ .../demo/editor/{json => code}/index.vue | 0 9 files changed, 373 insertions(+), 544 deletions(-) delete mode 100644 src/components/CodeEditor/src/codemirror/codemirror.css create mode 100644 src/views/demo/editor/code/Editor.vue rename src/views/demo/editor/{json => code}/index.vue (100%) diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue index 6416663c88e..a58b4cb340b 100644 --- a/src/components/CodeEditor/src/CodeEditor.vue +++ b/src/components/CodeEditor/src/CodeEditor.vue @@ -6,6 +6,7 @@ :mode="mode" :readonly="readonly" :bordered="bordered" + :config="config" /> @@ -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 | string> }, mode: { @@ -28,6 +29,7 @@ readonly: { type: Boolean }, autoFormat: { type: Boolean, default: true }, bordered: { type: Boolean, default: false }, + config: { type: Object as PropType, default: {} }, }); const emit = defineEmits(['change', 'update:value', 'format-error']); diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue index 796bdc4db1f..957bba0b1e2 100644 --- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue +++ b/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, 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(); diff --git a/src/components/CodeEditor/src/codemirror/codemirror.css b/src/components/CodeEditor/src/codemirror/codemirror.css deleted file mode 100644 index d0f703e79ec..00000000000 --- a/src/components/CodeEditor/src/codemirror/codemirror.css +++ /dev/null @@ -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; -} diff --git a/src/components/CodeEditor/src/typing.ts b/src/components/CodeEditor/src/typing.ts index 34b5ed1f40b..598a6784f90 100644 --- a/src/components/CodeEditor/src/typing.ts +++ b/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 { + 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]; } diff --git a/src/locales/lang/en/routes/demo.json b/src/locales/lang/en/routes/demo.json index 7e71f9eed16..2a987d6e7bc 100644 --- a/src/locales/lang/en/routes/demo.json +++ b/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", diff --git a/src/locales/lang/zh-CN/routes/demo.json b/src/locales/lang/zh-CN/routes/demo.json index aec43785eb6..1b0f1c8ab1e 100644 --- a/src/locales/lang/zh-CN/routes/demo.json +++ b/src/locales/lang/zh-CN/routes/demo.json @@ -37,7 +37,7 @@ }, "editor": { "editor": "编辑器", - "jsonEditor": "Json编辑器", + "codeEditor": "代码编辑器", "markdown": "markdown编辑器", "tinymce": "富文本", "tinymceBasic": "基础使用", diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts index 26cd9c20e07..283196601e7 100644 --- a/src/router/routes/modules/demo/comp.ts +++ b/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', diff --git a/src/views/demo/editor/code/Editor.vue b/src/views/demo/editor/code/Editor.vue new file mode 100644 index 00000000000..6d2171eed83 --- /dev/null +++ b/src/views/demo/editor/code/Editor.vue @@ -0,0 +1,84 @@ + + diff --git a/src/views/demo/editor/json/index.vue b/src/views/demo/editor/code/index.vue similarity index 100% rename from src/views/demo/editor/json/index.vue rename to src/views/demo/editor/code/index.vue