premisa
El propósito de escribir esto es porque he usado CodeMirror en proyectos anteriores y creo que es bueno como editor de código en línea. También he visto algunos sitios web que han usado la edición de código en línea. Por supuesto, no sé lo que Aquí extraje la parte utilizada en el proyecto de la empresa, escribí un blog separado y envié la parte extraída del código a GitHub.
una breve introducción
CodeMirror es un editor de código en línea que admite el resaltado de sintaxis. Sitio web oficial: http://codemirror.net/
Tal vez solo mirando el sitio web oficial, creo que esos editores en línea son un poco feos a primera vista, de todos modos, así es como me siento a primera vista, pero después de mis propios ajustes, también puedo crear un hermoso editor de código en línea.
Se puede descargar desde el sitio web oficial.
Después de descargar, descomprimir y descomprimir la carpeta obtenida, la biblioteca central y el css central se colocan en lib, las definiciones de gramática de varios idiomas compatibles se colocan en modo y los estilos de tema compatibles se colocan en el directorio de temas. Generalmente, en desarrollo, es suficiente agregar referencias bajo lib y mode.
cómo utilizar
Se deben introducir los dos siguientes para usar Code Mirror:
<enlace rel="hoja de estilo" href="codemirror-5.31.0/lib/codemirror.css"/> <script src="codemirror-5.31.0/lib/codemirror.js"></script>
Lo siguiente a consultar es el archivo js correspondiente al idioma que se va a editar en el editor en el directorio mode, aquí tomamos Groovy como ejemplo:
<!--resaltado de código maravilloso--> <script src="codemirror-5.31.0/mode/groovy/groovy.js"></script>
Si desea que el código Java también admita el resaltado de código, debe introducir el clike.js que descargué de Internet (lo puse en mi GitHub)
<!--Se debe importar el resaltado de código Java--> <script src="codemirror-5.31.0/clike.js"></script>
Los archivos a los que se hace referencia se utilizan para admitir el resaltado de sintaxis para el idioma correspondiente.
Luego dije anteriormente que entré por primera vez al sitio web oficial de Code Mirror, y sentí que esos editores eran feos, y eso puede deberse a que el tema era feo. Recomiendo un buen tema aquí, solo impórtelo de la siguiente manera:
<!--Introduzca archivos css para admitir temas--> <link rel="stylesheet" href="codemirror-5.31.0/theme/dracula.css"/>
Si también desea que su editor admita el plegado de líneas, haga lo siguiente:
<!--支持代码折叠--> <link rel="hoja de estilo" href="codemirror-5.31.0/addon/fold/foldgutter.css"/> < script src="codemirror-5.31.0/addon/fold /foldcode.js"></script> <script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script> <script src="codemirror-5.31.0/addon/fold/brace -fold.js"></script> <script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script>
¿Es bueno presentarlo así, por supuesto que no?
crear editor
En proyectos reales, todo el contenido del cuerpo generalmente no se usa directamente como contenedor del editor. El más utilizado es usar textarea. Aquí uso un área de texto adentro,
<!-- comenzar el código --> <textarea class="form-control" id="code" name="code"></textarea> <!-- end code-->
El siguiente paso es crear el editor.
// Construir un editor basado en el id del elemento DOM
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
});
¿Es un poco monótono?
Así es, también puedo establecer algunas propiedades para él: (aproveche al máximo los archivos que introduje al principio)
mode: "text/groovy", //realizar modo de resaltado de código groovy: "text/x-java", //realizar código Java resaltado lineNumbers: true, //mostrar número de línea tema: "dracula", //establecer tema lineWrapping : true, //código plegable foldGutter: true, canalones: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], matchBrackets: true, //corchetes coincidentes //readOnly: true, //read only
Si necesita ver más atributos, puede ir al sitio web oficial para encontrarlos. ¡Actualmente, solo uso estos atributos!
Mencionemos también algunos:
indentUnit: unidad de sangría entera, el valor es el número de espacios, el valor predeterminado es 2.
smartIndent: sangría automática booleana, establece si sangrar automáticamente según el contexto (la misma sangría que la línea anterior). El defecto es cierto.
tabSize: integer El ancho de los caracteres de tabulación, el valor predeterminado es 4.
indentWithTabs: booleano Al sangrar, si se reemplazan n*espacios de ancho de tabulación con n caracteres de tabulación, el valor predeterminado es falso.
electricChars: booleano Si se debe volver a sangrar cuando la entrada puede cambiar la sangría actual, el valor predeterminado es verdadero (solo es válido cuando el modo admite la sangría).
specialChars: RegExp Una expresión regular de caracteres especiales para ser reemplazada por marcadores de posición. Los más utilizados son los caracteres no imprimibles. Predeterminado: /[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/.
specialCharPlaceholder: function(char) → Element Esta es una función que recibe el carácter especificado por la opción specialChars como parámetro, y esta función generará un nodo DOM para mostrar el carácter especificado. De manera predeterminada, se muestra un punto rojo (•) con una información sobre herramientas con el código de carácter especial anterior.
rtlMoveVisually: boolean Determina si el movimiento horizontal del cursor a través del texto de derecha a izquierda (árabe, hebreo) es visual (al presionar la flecha izquierda se mueve el cursor a la izquierda) o lógico (al presionar la flecha izquierda se mueve al siguiente índice inferior en la cadena, lo que es visualmente correcto en el texto de derecha a izquierda). El valor predeterminado es falso en Windows y verdadero en otras plataformas. (这段完全不晓得搞啥子鬼)
keyMap: cadena Configurar teclas de método abreviado. El valor predeterminado es predeterminado, que se define dentro de codemorrir.js. Otros están en el directorio del mapa clave .
extraKeys: el objeto vincula teclas de método abreviado diferentes de la configuración anterior del mapa de teclas al editor.
lineWrapping: boolean Si el texto se ajusta o se desplaza en líneas largas, el valor predeterminado es el desplazamiento.
lineNumbers: boolean Indica si mostrar los números de línea en el lado izquierdo del editor.
firstLineNumber: número de línea entero a partir del cual se empieza a contar, el valor predeterminado es 1.
lineNumberFormatter: función (línea: entero) → cadena Use una función para establecer el número de línea.
canalones: la matriz se usa para agregar canalones adicionales (antes o en lugar del canalón de número de línea). El valor debe ser una matriz de nombres CSS, cada uno de los cuales define el ancho utilizado para dibujar el fondo del medianil (y, opcionalmente, el fondo). Para establecer explícitamente la posición de la medianil del número de línea (por defecto a la derecha de todas las demás medianeras), también se puede incluir la clase CodeMirror-linenumbers. El nombre de la clase es el nombre de la clave (claves) que se usa para pasar a setGutterMarker.
fixedGutter: boolean Configure el canal para que se desplace horizontalmente con el contenido del editor (falso) o fijo a la izquierda (verdadero o predeterminado).
scrollbarStyle: cadena establece la barra de desplazamiento. El valor predeterminado es "nativo", que muestra barras de desplazamiento nativas. La biblioteca principal también proporciona un estilo "nulo", que oculta completamente la barra de desplazamiento. Los complementos pueden establecer más modos de barra de desplazamiento.
coverGutterNextToScrollbar: boolean Cuando fixedGutter está habilitado y hay una barra de desplazamiento horizontal, el canalón se mostrará en el extremo izquierdo de la barra de desplazamiento de forma predeterminada. Cuando se establece en verdadero, el canalón estará cubierto por elementos con CodeMirror-gutter-filler clase. inputStyle: string Elija cómo CodeMirror maneja la entrada y el enfoque. La biblioteca principal define el área de texto y los modos de entrada editables. En los navegadores móviles, el valor predeterminado es contenteditable, y en los navegadores de escritorio, el valor predeterminado es textarea. Mejor compatibilidad con IME y lectores de pantalla en modo editable.
readOnly: boolean|string Indica si el editor es de solo lectura. Si se establece en el valor preestablecido "nocursor", además de ser de solo lectura, el área de edición no se puede enfocar.
showCursorWhenSelecting: booleano Si mostrar el cursor al seleccionar, el valor predeterminado es falso.
lineWiseCopyCut: booleano Cuando está habilitado, si no se selecciona texto al copiar o cortar, toda la línea donde se encuentra el cursor se manipulará automáticamente.
undoDepth: integer Los tiempos máximos de deshacer, el valor predeterminado es 200 (incluido el evento de cambio de contenido seleccionado).
historyEventDelay: integer El número de milisegundos antes de que los eventos del historial se generen al ingresar o eliminar.
tabindex: entero El tabindex del editor.
autofocus: booleano Indica si se debe enfocar automáticamente en la inicialización. Está apagado por defecto. Sin embargo, se establece automáticamente en verdadero cuando se usa un área de texto y no se especifica explícitamente ningún valor.
dragDrop: booleano Si se permite arrastrar y soltar, el valor predeterminado es verdadero.
allowDropFileTypes: el valor predeterminado de la matriz es nulo. Cuando se configura, solo los tipos de archivos contenidos en esta matriz se arrastrarán al editor. El tipo de archivo es un nombre MIME.
cursorBlinkRate: número El intervalo en el que parpadea el cursor, en milisegundos. El valor predeterminado es 530. Cuando se establece en 0, el parpadeo del cursor está desactivado. Los números negativos ocultan el cursor.
cursorScrollMargin: número Cuando el cursor está cerca del borde del área visible, la distancia por encima y por debajo del cursor. El valor predeterminado es 0.
cursorHeight: altura del cursor numérico. El valor predeterminado es 1, lo que significa altura de fila completa. Para algunas fuentes, una configuración de 0,85 puede verse mejor.
resetSelectionOnContextMenu: booleano Establece si mover el cursor al lugar en el que se hizo clic al hacer clic fuera del texto seleccionado para abrir el menú contextual. El defecto es cierto.
workTime, workDelay: número Resalte la duración de workTime mediante un subproceso de fondo falso, luego use el tiempo de espera para descansar la duración de workDelay. Los valores predeterminados son 200 y 300. (No entiendo de qué está hablando esta función en absoluto)
pollInterval: el número especifica la velocidad a la que CodeMirror se desplaza (escribe datos) al área de texto correspondiente (cuando obtiene el foco). La mayoría de las entradas se capturan a través de eventos, pero algunos métodos de entrada (como IME) no generan eventos en algunos navegadores, así que use el desplazamiento de datos. El valor predeterminado es 100 milisegundos.
flattenSpans: booleano De forma predeterminada, CodeMirror fusionará dos tramos con la misma clase en uno. Deshabilite esta función configurando esto en falso.
addModeClass: booleano Cuando está habilitado (deshabilitado de manera predeterminada), se agregará una clase de estilo CSS adicional que comienza con cm-m a cada etiqueta, lo que indica el modo en que se generó la etiqueta. Por ejemplo, el marcado generado por el modo XML agregará la clase cm-m-xml.
maxHighlightLength: número Cuando se necesita resaltar una línea muy larga para mantener un rendimiento receptivo, cuando se alcanzan algunas posiciones, el editor establecerá directamente otras líneas en texto sin formato. El valor predeterminado es 10000 y se puede configurar en Infinito para desactivar esta función.
viewportMargin: integer Especifica el número de líneas que se representarán por encima y por debajo del contenido actualmente desplazado en la vista. Esto afecta la cantidad de filas para actualizar al desplazarse. Normalmente se debe utilizar el valor predeterminado de 10. Se puede establecer un valor de Infinito para representar siempre el documento completo. Nota: esta configuración puede afectar el rendimiento cuando se procesan documentos grandes.
¿Qué sucede si desea establecer el tamaño del cuadro de código?
editor.setSize('800px', '950px'); //Establecer el largo y el ancho del cuadro de código
Además, ¿qué sucede si desea asignar valores a los cuadros de código?
editor.setValue(""); //Asigna un valor al cuadro de código
editor.getValue(); //Obtiene el valor del cuadro de código
Si desea establecer una nueva propiedad en otro lugar, puede escribirla así:
editor.setOption("readOnly", true); //similar a esto