¿Cómo utilizar element-plus para implementar un editor sql en línea basado en codemirror6?

js editor sql en línea, después de descargar e importar la herramienta IDE, acceda a sql-editor-master/index.html en el navegador, el efecto es el siguiente (resaltado con corchetes, mostrando columnas plegadas):

codemirror Sitio web oficial ment-fold.js "gt;lt;/script gt;

lt;!-- resaltado de matchbrackets --gt;

lt;script type="text/javascript " src="test/addon/fold/matchbrackets.js"gt;lt;/scriptgt;

lt;script type="text/javascript" src="js/editor/sublime.js"gt ; lt;/scriptgt;

lt;script type="text/javascript" src="js/editor/sql.js" gt;lt;/scriptgt;

lt; script type="text/javascript" src="js/editor/sql-hint.js"gt；lt;/scriptgt;

lt;script type="text/javascript" src="js/ editor /sql-hint.js"gt;lt;/scriptgt;

lt;script type="text /javascript" src="js/editor/show-hint.js"gt;lt;/ scriptgt ;

lt;! -- formato sql--gt;

lt; script type="text/javascript" src="js/editor/formatting.js"gt; lt;/scriptgt;

lt;script type="text/javascript" src="js/editor/sql-formatter.min.js"gt;lt;/scriptgt;

lt;script type="text/javascript" src="js/layui/layui.js"gt;lt;/scriptgt;

lt;script type="text/javascript" src="js /layui/playui.js" gt;lt;/scriptgt;

lt;script type="text/javascript" src="js/index.js"gt;lt;/scriptgt;

lt;textarea id="code"gt;lt;/textareagt;

Código js principal:

//Construya el editor según la identificación del elemento DOM

var editor=CodeMirror.fromTextArea(document.getElementById("código"), {

modo: "text/c-mysql", //implementar Ja

resaltado de código va

lineNumbers: true,

matchBrackets: true, //match de resaltado de corchetes

tema: "default",

keyMap: "predeterminado",

claves adicionales: {"Tab": "autocompletar"},

sugerencia: CodeMirror.hint.sql,

lineWrapping: verdadero , // si se deben ajustar o no las líneas

foldGutter: true, // si se deben plegar

canalones: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // Agregar columna de número de fila, doblar columna

HintOptions: {

tablas: tablewords

}

}

Configuración de indicaciones de palabras clave de entrada y otra información: allWords.json

Configuración dinámica de los campos de la tabla y otra información:

let tableWords = {"dual": []}; >

p>

let tableName = "tn_user";

tableWords[tableName].push("userId");

editor.setOption("hintOptions", {"tables" : tableWords});

El formato json de TableWords es el siguiente:

"tableWords": {

"cp_sku": [

"skuid",

p>

"cpbh",

"tcbh"

],

"user_info": [

"user_id",

"user_token",

"user_name",

"user_type",

" contraseña"

]

}