程序员经验分享-hwhale

CodeMirror使用笔记

2023-05-16

最近因工作需要，在项目中使用了CodeMirror代码编辑器，以下是使用笔记。

首先，看下最终的效果
在这里插入图片描述

引入基本的需要资源

<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/codemirror.js"
	type="text/javascript"></script>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/codemirror/codemirror.css" />

创建编辑器

		var editor = CodeMirror.fromTextArea(document.getElementById('sql'), {
			mode : 'sql',
			indentWithTabs : true,
			lineNumbers : true,
			smartIndent : true,
			theme : 'dracula',
			matchBrackets : true,
			line : true,
			lineWiseCopyCut : true,
			readOnly : false,
			showCursorWhenSelecting : true,
			extraKeys : {
				"Alt" : "autocomplete"
			},
			styleSelectedText : true
		});

在我们的实际使用中，我们用到了下面几个场景

  • 设置编辑器字体样式

.CodeMirror {
	border: 1px solid black;
	font-size: 20px;
	font-family: Aruak, monospace;
	height: 200px;
}

  • 编辑器内容选择拷贝复制

样式

.CodeMirror-selected {
	background-color: blue !important
}

.CodeMirror-selectedtext {
	color: white
}

配置选项

			lineWiseCopyCut : true,
			readOnly : false,
			showCursorWhenSelecting : true,
			styleSelectedText : true

需要的JavaScript文件

<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/selection-pointer.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/mark-selection.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/active-line.js"
	type="text/javascript"></script>

其中，lineWiseCopyCut表示未选择时，复制鼠标所在的整行或者多行。

  • 编辑器主题

配置选项中指定喜欢的主题，注意不要忘了引入对应的资源文件

theme : 'dracula',

  • 显示行号

lineNumbers : true,

  • 自动补全

extraKeys : {
				"Alt" : "autocomplete"
			},

按Alt键，自动补全代码，自动补全效果如图

在这里插入图片描述

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>

<html>
<head>
<title>编辑器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/codemirror.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/sql.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/show-hint.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/sql-hint.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/foldcode.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/indent-fold.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/selection-pointer.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/mark-selection.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/codemirror/active-line.js"
	type="text/javascript"></script>

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/codemirror/codemirror.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/codemirror/dracula.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/codemirror/show-hint.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/codemirror/foldgutter.css" />
<style>
.CodeMirror {
	border: 1px solid black;
	font-size: 20px;
	font-family: Aruak, monospace;
	height: 200px;
}

.CodeMirror-selected {
	background-color: blue !important
}

.CodeMirror-selectedtext {
	color: white
}
</style>
</head>
<body>
	<form>
		<textarea id="sql" name="editor"> </textarea>
	</form>
	<button id="test" onclick="javascript:t_query();"
		style="display: none;">click</button>
	<script type="text/javascript">
		var editor = CodeMirror.fromTextArea(document.getElementById('sql'), {
			mode : 'sql',
			indentWithTabs : true,
			lineNumbers : true,
			smartIndent : true,
			theme : 'dracula',
			matchBrackets : true,
			line : true,
			lineWiseCopyCut : true,
			readOnly : false,
			showCursorWhenSelecting : true,
			extraKeys : {
				"Alt" : "autocomplete"
			},
			styleSelectedText : true
		});

		function t_query() {
			console.log(editor.getValue());
			alert(editor.getValue());
		}
	</script>

</body>
</html>

参考文件

  • https://codemirror.net/doc/manual.html
  • https://codemirror.net/demo/markselection.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CodeMirror

使用笔记

CodeMirror使用笔记 的相关文章

  • Libsvm使用笔记【matlab】

    根据以下教程配置 xff1a 1038条消息 LIBSVM 繁拾简忆的博客 CSDN博客 https blog csdn net u014772862 category 6280683 html 目录 xff1a 一 libsvm使用 二

  • http隧道Neo-reGeorg使用笔记

    项目简介 https github com L codes Neo reGeorg Neo reGeorg 是一个旨在积极重构 reGeorg 的项目 xff0c 目的是 xff1a 提高 tunnel 连接安全性 提高可用性 xff0c

  • Docker使用笔记

    软件安装 https docs docker com engine install ubuntu 下载镜像 span class token function docker span pull ubuntu 创建一个CONTAINER 示例

  • MacBook M12020使用笔记

    1 安装软件 1 1 安装brew 安装brew xff08 知乎高手写的脚本 xff0c 可以选择国内镜像源 xff09 bin zsh c span class token string 34 span class token vari

  • CodeMirror使用笔记

    最近因工作需要 xff0c 在项目中使用了CodeMirror代码编辑器 xff0c 以下是使用笔记 首先 xff0c 看下最终的效果 引入基本的需要资源 lt script src 61 34 lt 61 request getConte

  • aruco marker使用笔记

    在英伟达Jetson Xaiver开发板上配置 SDK环境 opencv 4 1 1 CUDA 10 2 1 git clone https github com pal robotics aruco ros 2 复制到catkin ws

  • Git：使用笔记

    git局部配置 git config user name 34 username 34 git config user email 34 email 34 git带用户密码clone git clone https username pas

  • 整理alacritty使用笔记

    github xff1a https github com alacritty alacritty features xff1a https github com alacritty alacritty blob master docs f

  • CodeMirror 有内容，但只有按下按键才会显示

    我有一个 CodeMirror 实例嵌入在我正在构建的 web 应用程序中 它工作得很好 除了在用户输入新字符之前不会显示初始内容 因此 一切都在那里 只是隐藏起来 直到用户强制更改为止 这不好 有什么方法可以强制重新绘制或刷新浏览器来模拟

  • 如何在 Python 中使用 Selenium 编辑 CodeMirror？

    每次尝试将文本插入网页上的 CodeMirror 时 我都会收到以下错误消息 有谁知道如何使用selenium成功编辑codemirror WebDriverException Message unknown error Cannot re

  • 复制并粘贴到嵌入 javafx 应用程序中的 codemirror.js

    我正在使用 codemirror js 库在 Java FX 中创建简单的编辑器 我使用 javafx scene web WebView 组件在 javafx 中嵌入了 codemirror 编辑器 并使用以下 html js 代码

  • 如何访问 Angular2 组件中的 codemirror 文本区域值？

    我正在尝试将 codemirror 与 Angular 2 TypeScript 链接 现在 我可以使用 codearea 自定义指令显示 CodeEditor 该指令动态加载脚本文件并格式化文本区域 我无法获取该值 用户在文本区域中键入

  • 为 CodeMirror 创建新模式

    我只想突出显示如下所示的关键字 KEYWORD 基本上大写单词包裹在单个 括号 我通过复制代码来尝试这个小胡子覆盖演示 http codemirror net demo mustache html 并将双括号替换为单括号 CodeMirro

  • 如何隐藏/取消隐藏代码镜像

    我想完全隐藏 取消隐藏代码镜像实例 是否有任何预定义的方法可以做到这一点 或者我是否需要以某种方式选择 div 并将其隐藏 根据文档 CodeMirror 的主编辑器对象有一个方法可以返回主包装 DOM 元素 cm getWrapperEl

  • 如何在 codemirror 编辑器中使用 cypress .type() 进行输入？

    我正在写一些cypress测试 Codemirror 编辑器 我有用cypress在输入字段中键入 我正在努力实现cy type 在 CodeMirror 编辑器中 我在 codemirror 中的数据位于范围内 pre class Cod

  • 如何重置Codemirror编辑器？

    我想重置 Codemirror 编辑器的所有内容 理想情况下 这应该清除文本区域 删除所有标记并清除历史记录 实现这一目标的最佳方法是什么 cm setValue cm clearHistory cm clearGutter gutterI

  • CodeMirror - 从编辑器外部获取 linting 结果

    我正在使用非常棒的 CodeMirror 库 我正在实例化的代码编辑器是表单的一部分 因此我想使用 linting 进行基本检查 以查看用户的输入是否有效 除非代码没问题 否则我不想处理表单 所以问题是 CodeMirror 编辑器实例上是

  • 单击带有 codemirror 的按钮时如何撤消选定/突出显示的文本

    我有一个简单的 codemirror 文本编辑器 正在使用 bootstrap 进行工作 我可以单击粗体和代码按钮 确定 它会正确包装所选 突出显示的文本 问题一 当文本包含在标签中时 可以说 b something b 如果我再次选择 突

  • Codemirror 显示 HTMLLint 内联错误 (.addLineWidget)

    我一直在尝试让 HTMLHint 显示内联而不是 JSHint 使用 addLineWidget http codemirror net doc manual html addLineWidget Codemirror 提供了我尝试使用 J

  • 将 CodeMirror 与 Angular2 集成（打字稿）

    我目前正在致力于将 CodeMirror 编辑器添加到项目中 更准确地说是 Angular2 项目 但我做起来有困难 我的编辑器的实例化似乎无法正常工作 我的代码如下 编辑器 组件 ts import Component from angu

随机推荐

  • testpmd vdev设置队列深度

    dpdk testpmd l 2 3 n 4 file prefix 61 mtr vdev 61 net virtio user0 path 61 dev vhost vdpa 0 queues 61 1 queue size 61 51

  • ovs-vswitchd dbg

    root 64 Standard PC i440FX PIIX 1996 home smoke test gdb fGNU gdb Ubuntu 8 1 1 0ubuntu1 8 1 1 Copyright 2018 Free Softwa

  • Snorkel-数据标注系统

    为什么需要数据标注 在面临机器学习问题时 xff0c 我们往往会面临两个问题 xff1a 数据和算法 xff08 模型 xff09 随着各种机器学习框架的完善 xff0c 算法的应用门槛正在逐渐的降低 但数据的获取却仍然是一个费时费力的必需

  • Ubuntu扩展虚拟机的磁盘空间以及删除磁盘分区的方法

    1 虚拟机的磁盘扩容步骤如下 xff1a 2 将扩展的磁盘空间挂载到系统中 1 xff09 分区操作的几个命令 fdisk 磁盘分区相关操作 df 系统分区挂载信息 mount 挂载分区 umount 卸载分区 mkfs ext4 格式化分

  • 【计算机网络】数据链路层-基本数据链路层协议

    计算机网络 数据链路层 基本数据链路层协议 协议1 xff1a 一个乌托邦式的单工协议 单工协议即数据只能单向传输 这个协议假设信道永远不会丢失或损坏帧 xff0c 接收方的处理能力足够快 xff0c 缓冲区足够大 发送程序无限循环 xff

  • 【ESP32_FreeRTOS篇】

    FreeRTOS 是一款 开源免费 的实时操作系统 xff0c 遵循的是 GPLv2 43 的许可协议 这里说 到的开源 xff0c 指的是你可以免费得获取到 FreeRTOS 的源代码 xff0c 且当你的产品使用了 FreeRTOS 且

  • 通过xmanager连接linux远程主机桌面

    1 效果图 xff1a 远程linux桌面版主机 xff0c 此处是虚拟机 xff1a 使用xmanager xbrowser 连接后的界面 xff1a 2 使用方法 xff1a linux服务器端配置修改 xff1a a 修改gnome配

  • setTimeout()和setInterval()详解

    JavaScript是单线程语言 xff0c 但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行 超时值是指在指定时间之后执行代码 xff0c 间歇时间值是指每隔指定的时间就执行一次代码 超时调用 超时调用使用window对象的

  • Centos 7.6安装Xfce+VNC Server

    Centos 7 6安装Xfce 43 VNC Server 工作环境安装xface安装 VNC Server在云服务器控制台中设置安全组规则使用VNC Viewer连接云服务器 工作环境 华为云服务器 操作系统 xff1a CentOS

  • C++和C语言的区别是什么？

    首先C 43 43 和C语言本来就是两种不同的编程语言 xff0c 但C 43 43 确实是对C语言的扩充和延伸 xff0c 并且对C语言提供后向兼容的能力 C 43 43 这个词在中国大陆的程序员圈子中通常被读做 C加加 xff0c 而西

  • ubuntu18.0.4安装pip3及虚拟环境virtualenv详细教程

    1 ubuntu安装pip3 该命令是修复安装及补全那些缺少的软件 xff1a sudo apt get f install 安装pip3 xff1a sudo apt get install python3 pip升级pip3 xff1a

  • 什么是子网掩码，如何判断两个IP是不是同一网段

    1 xff1a 什么是子网掩码 xff1f 子网掩码不能单独存在 xff0c 它必须结合IP地址一起使用 子网掩码只有一个作用 xff0c 就是将某个IP地址划分成网络地址和主机地址两部分 说的通俗的话 xff0c 就是用来分割子网和区分那

  • 利用esp-8266实现wifi攻击

    0x00 前言 之前在b站上看到这个wifi模块的攻击视频感觉挺有意思 xff0c 就在某宝上入了一个拿回来玩玩 0x01 外观 转接头需要自己另外买 0x03 编译程序 https anky cc esp8266 deauther wif

  • 如何从 JavaScript 对象中删除属性？

    问题描述 xff1a 给定一个对象 xff1a let myObject span class token operator 61 span span class token punctuation span span class toke

  • 在 Git 中推送提交时消息“src refspec master does not match any”

    问 xff1a 我克隆我的存储库 xff1a git clone ssh span class token operator span span class token operator span span class token oper

  • Qt编译、链接和运行参数的设置

    Qt编译 链接和运行参数的设置 Qt笔记 使用 Qt Creator 集成开发环境构建和运行程序是一件非常简单的事情 xff0c 一个按钮或者一个快捷键搞定全部 xff0c 通过 Qt Creator使用教程 xff08 简明版 xff09

  • 常用Linux命令行技巧

    结果以表格形式输出 column t 比如 xff1b span class token function mount span span class token operator span column t 默认分隔符为空格 xff0c

  • CV往哪卷？李飞飞指出三颗「北极星」：具身智能，视觉推理和场景理解

    点击下方卡片 xff0c 关注 CVer 公众号 AI CV重磅干货 xff0c 第一时间送达 转载自 xff1a 新智元 编辑 xff1a LRS 导读 ImageNet见证了计算机视觉发展的辉煌历程 xff0c 在部分任务性能已超越人类

  • Java异常处理的九个最佳实践

    1 确保在Finally程序块中完成资源释放或者使用Try With语句 比如对于InputStream xff0c 当我们使用完毕 xff0c 我们要确保资源被正确关闭 xff0c 比如下面我们常见的错误用法 xff0c 不要在try模块

  • CodeMirror使用笔记

    最近因工作需要 xff0c 在项目中使用了CodeMirror代码编辑器 xff0c 以下是使用笔记 首先 xff0c 看下最终的效果 引入基本的需要资源 lt script src 61 34 lt 61 request getConte

热门标签