程序员经验分享-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使用笔记 的相关文章

  • pandas使用笔记

    DataFrame使用笔记 dates 61 pd date range span class hljs string 39 20160728 39 span periods 61 span class hljs number 6 span

  • Docker使用笔记

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

  • netperf使用笔记

    一 netperf是什么 netperf是一个基于client server模式的网络测试工具 xff0c 可以测量TCP和UDP传输的吞吐量 时延 CPU占用率等性能参数 它可以测试以下几种模式的TCP核UDP网络性能 xff1a TCP

  • Visual Studio Code使用笔记

    文章目录 简介安装常用功能杂文件对比 常用插件通用快捷键文件头注释 C C 43 43 PythonLaTexMarkdown 其它C C 43 43 多文件编译运行代码运行 简介 与Sublime Text相比 xff0c vscode免

  • Jenkins使用笔记

    本章简单记录Jenkins的使用笔记 首先 xff0c 我们从官网中下载安装介质 xff0c 可以看到这里有适合各种操作系统版本的安装源介质 xff0c 简单起见 xff0c 我们直接下载一个通用的war程序包 执行命令java jar j

  • ffmpeg使用笔记

    视频压缩 ffmpeg i lt input gt vcodec libx264 crf 25 lt output gt 分辨率调整 ffmpeg i 123 mp4 s 960x540 1 mp4 视频截取 截取 xff08 t1 43

  • ROS使用笔记

    文章目录 1 提取bag中固定topic或者固定时间段数据2 提取pcd数据3 记录数据4 service amp action5 roslaunch文件6 自定义消息7 from raw velodyne packets to velod

  • Git：使用笔记

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

  • 整理ps使用笔记

    尽管使用ps只需要记住常用命令 xff1a ps aux ps ef 并且理解输出的列含义即可 但不理解命令的含义 xff0c 用起来总有种空虚感 下面研究一下 文章目录 介绍BSD默认simpleaxT r listoutput 总结 介

  • pugixml使用笔记

    https pugixml org docs manual html dom tree pugixml官方使用手册 1 创建xml文件信息 例如 xff1a pugi xml document xmldoc pugi xml node de

  • 将 CodeMirror 添加到自定义元素的 Shadow Dom 中？

    我想在自定义元素内动态创建一个 CodeMirror 实例 并将其存在于元素的 Shadow DOM 内 例如

  • codemirror：搜索并突出显示多个单词，无需对话框

    客观的 我在用代码镜像作为编辑 我想要 搜索并突出显示多个字符串 我希望能够迭代找到的每个匹配项并打印其行号 我想以编程方式执行此操作 并且不想使用对话框 如示例所示https codemirror net demo search html

  • 如何在 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 代码

  • codemirror - 与代码重叠的行号

    我正在使用最新的 codemirror v5 49 0 对于我的电子文本编辑器应用程序 有时行号会与文本重叠呈现 无法重现该错误 因为它并不总是发生 通过多次刷新应用程序即可轻松重现 有人有主意吗 或者这对您来说可能是一个已知问题 我也遇到

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

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

  • 如何重置Codemirror编辑器？

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

  • 无法在 Excel for Windows 加载项的任务窗格中编辑 CodeMirror 或 Ace

    我刚刚意识到我们无法在 Excel for Windows 加载项的任务窗格中修改 CodeMirror 或 Ace 中的文本 我做了一个测试 html 页面这段代码 https jsbin com bivezolayo 5 edit ht

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

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

  • 代码镜像。禁用垂直滚动条

    我目前正在使用 CodeMirror 在浏览器的文本区域中编辑代码 如果我有超过 20 行代码 它会在右侧添加一个垂直滚动条 但我不需要这个滚动条 相反 我需要编辑器大小垂直增长 有人可以帮忙吗 在 CodeMirror 3 中 有一个选项

随机推荐

  • 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

热门标签