当前位置： 首页 > news >正文

CodeMirror 对 XML 文档熟悉及元素控制自定义

news 2025/12/28 2:57:57

CodeMirror 是一个网络代码编辑器组件。它可以在网站中用于实现支持多种编辑功能的文本输入字段，并具有丰富的编程接口以允许进一步扩展。

本文为 xml 格式的代码提示约束格式规范的自定义示例内容。

先看效果，如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

官方 Demo 的完整代码如下（重点看代码中 tags 的配置）：

<!doctype html><title>CodeMirror: XML Autocomplete Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css"><link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<style>.CodeMirror { border: 1px solid #eee; }</style>
<div id=nav><a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a><ul><li><a href="../index.html">Home</a><li><a href="../doc/manual.html">Manual</a><li><a href="https://github.com/codemirror/codemirror5">Code</a></ul><ul><li><a class=active href="#">XML Autocomplete</a></ul>
</div><article>
<h2>XML Autocomplete Demo</h2>
<form><textarea id="code" name="code"><!-- write some xml below -->
</textarea></form><p>Press <strong>ctrl-space</strong>, or type a '&lt;' character toactivate autocompletion. This demo defines a simple schema thatguides completion. The schema can be customized—seethe <a href="../doc/manual.html#addon_xml-hint">manual</a>.</p><p>Development of the <code>xml-hint</code> addon was kindlysponsoredby <a href="http://www.xperiment.mobi">www.xperiment.mobi</a>.</p><script>var dummy = {attrs: {color: ["red", "green", "blue", "purple", "white", "black", "yellow"],size: ["large", "medium", "small"],description: null},children: []};var tags = {"!top": ["top"],"!attrs": {id: null,class: ["A", "B", "C"]},top: {attrs: {lang: ["en", "de", "fr", "nl"],freeform: null},children: ["animal", "plant"]},animal: {attrs: {name: null,isduck: ["yes", "no"]},children: ["wings", "feet", "body", "head", "tail"]},plant: {attrs: {name: null},children: ["leaves", "stem", "flowers"]},wings: dummy, feet: dummy, body: dummy, head: dummy, tail: dummy,leaves: dummy, stem: dummy, flowers: dummy};function completeAfter(cm, pred) {var cur = cm.getCursor();if (!pred || pred()) setTimeout(function() {if (!cm.state.completionActive)cm.showHint({completeSingle: false});}, 100);return CodeMirror.Pass;}function completeIfAfterLt(cm) {return completeAfter(cm, function() {var cur = cm.getCursor();return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";});}function completeIfInTag(cm) {return completeAfter(cm, function() {var tok = cm.getTokenAt(cm.getCursor());if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;return inner.tagName;});}var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "xml",lineNumbers: true,extraKeys: {"'<'": completeAfter,"'/'": completeIfAfterLt,"' '": completeIfInTag,"'='": completeIfInTag,"Ctrl-Space": "autocomplete"},hintOptions: {schemaInfo: tags}});</script></article>

在线地址：https://codemirror.net/5/demo/xmlcomplete.html

（END）

相关文章：

CodeMirror 对 XML 文档熟悉及元素控制自定义

CodeMirror 是一个网络代码编辑器组件。它可以在网站中用于实现支持多种编辑功能的文本输入字段&#xff0c;并具有丰富的编程接口以允许进一步扩展。 本文为 xml 格式的代码提示约束格式规范的自定义示例内容。 先看效果&#xff0c;如下&#xff1a; 官方 Demo 的完整代码如…...

编程日记 2023/7/8 4:20:00

Jetpack - ViewModel

一、概念 二、使用 2.1 创建ViewModel //无参 class MainViewModel : ViewModel() {} //有参 class MainViewModel(mainRepository: MainRepository) : ViewModel() {} class MainViewModelFactory(private val mainRepository: MainRepository) : ViewModelProvider.Factor…...

编程日记 2023/7/8 3:46:39

【新版系统架构】第十三章-层次式架构设计理论与实践

软考-系统架构设计师知识点提炼-系统架构设计师教程&#xff08;第2版&#xff09; 第一章-绪论第二章-计算机系统基础知识&#xff08;一&#xff09;第二章-计算机系统基础知识&#xff08;二&#xff09;第三章-信息系统基础知识第四章-信息安全技术基础知识第五章-软件工程…...

编程日记 2023/7/8 3:13:18

剖析Linux文件系统

Linux 文件系统体系结构是一个对复杂系统进行抽象化的有趣例子。通过使用一组通用的 API 函数&#xff0c;Linux 可以在许多种存储设备上支持许多种文件系统。例如&#xff0c;read 函数调用可以从指定的文件描述符读取一定数量的字节。read 函数不了解文件系统的类型&#xff…...

编程日记 2023/7/8 2:39:57

简介Maven结构与配置方法

一、Maven是什么 Maven是apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 它有什么用呢&#xff1f; 比如我以前要IOUtils这个包&#xff0c;那要到网站下去下载下来&#xff0c;再导入。 当jar包多的时候&#xff0c;一个一个导出&#xff0c;…...

编程日记 2023/7/8 2:06:36

好用的网址6

PPT课件网&#xff1a;http://www.pptkj.net/ ImgUpscaler&#xff1a;AI Image Upscaler - Upscale Photo, Cartoons in Batch Free 加强图片 AI Draw&#xff1a;AI Draw | Convert Images to One-Line Drawings with AI ZToDoList&#xff1a;https://www.ztodolis…...

编程日记 2023/7/8 1:33:15

MySQL数据库---笔记5

MySQL数据库---笔记5 一、锁1.1、介绍1.2、全局锁1.2.1、全局锁介绍1.2.2、一致性数据备份 1.3、表级锁1.3.1、表锁1.3.2、元数据锁&#xff08;meta data lock , MDL&#xff09;1.3.3、意向锁 1.4、行级锁1.4.1、介绍1.4.2、行锁1.4.3、间隙锁/临建锁 二、InnoDB引擎2.1、逻辑…...

编程日记 2023/7/8 0:59:54

Yocto：初始

1.构建Yocto项目前，需要先安装其所依赖的一些组件及工具 1 System Requirements — The Yocto Project 4.2.999 documentation 需要依次安装： $ sudo apt install gawk wget git diffstat unzip texinfo gcc build-essential chrpath socat cpio python3 python3-pip python…...

编程日记 2023/7/8 0:26:33

autodl算力租用平台应用于pycharm

一、GPU租用选择 1、创建实例 首先进入算力市场 博客以2080为例&#xff0c;选择计费方式&#xff0c;选择合适的主机&#xff0c;选择要创建实例中的GPU数量&#xff0c;选择镜像&#xff08;内置了不同的深度学习框架&#xff09;&#xff0c;最后创建即可 2、SSH远程连…...

编程日记 2023/7/7 23:53:12

高德地图的使用

JS API 结合 Vue 使用 高德地图 jsapi 下载、引入 npm add amap/amap-jsapi-loaderimport AMapLoader from amap/amap-jsapi-loader 使用2.0版本的loader需要在window对象下先配置 securityJsCode JS API 安全密钥使用 JS API 使用 script 标签同步加载增加代理服务器设置…...

编程日记 2023/7/7 23:19:50

＜List＜Map＜String,String＞＞＞ 删除元素常见的误区以及删除方法

看到这么标题可能觉得这个真是太easy了&#xff0c;不就remove吗&#xff0c;分分钟搞定。 但结果却出乎意料&#xff0c;下面我们来j简单说说list删除数据可能遇到的坑&#xff1a; 先说明我们可能会遇到的两个问题&#xff1a; 1.java.lang.IndexOutOfBoundsException(索引越…...

编程日记 2023/7/7 22:46:29

Linux下的编辑器——vim的简单上手指南

文章目录 一.概念1. 什么是 vim2. Vim 的模式①命令模式② 插入模式③底线命令模式 二.vim的基本操作1.如何启动vim&#xff1f;2. [命令模式」切换至 「插入模式」3.「插入模式」 切换至 「命令模式」4.「命令模式」切换至 「底行模式」5. 如何退出 vim&#xff1f; 三.vim指令…...

编程日记 2023/7/7 22:13:08

C++多线程学习（二、多线程的几种创造方式【有返回值的之后讲】）

目录 创建多线程 1.普通函数充当线程处理函数创造线程 2.Lambda表达式充当线程处理函数 3.带参函数创建线程 3.1普通参数 3.2传入引用 3.3智能指针充当函数参数 4.通过类中的成员函数创建 4.1仿函数方式创建&#xff1a;类名的方式调用 4.2普通类中的成员函数 创建多…...

编程日记 2023/7/7 21:39:45

前端开发框架生命周期详解：Vue、React和Angular

引言 作为前端开发者&#xff0c;掌握前端开发框架的生命周期是非常重要的。在现代Web应用开发中&#xff0c;Vue.js、React和Angular是三个最流行的前端开发框架。本篇博客将详细解读这三个框架的生命周期&#xff0c;包括每个阶段的含义、用途以及如何最大限度地利用它们。通…...

编程日记 2023/7/7 21:06:24

【Java从入门到大牛】程序流程控制

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Java从入门到大牛 &#x1f320; 首发时间&#xff1a;2023年7月7日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e…...

编程日记 2023/7/7 20:33:03

UML学习统一建模语言

unified modeling language 统一建模语言 面向对象软件分析与设计建模的事实标准 类命名&#xff1a;帕斯卡特命名 类之间的关系 关联关系&#xff1a;班级和学生&#xff0c;一个类的对象作为另一个类的成员变量&#xff1b; 通过非构造和setter注入的方式建立联系&#xf…...

编程日记 2023/7/7 19:59:42

【C++学习笔记】RAII思想——智能指针

智能指针 1 内存泄漏问题2 RAII&#xff08;Resource Acquisition Is Initialization&#xff09;2.1 使用RAII思想设计的SmartPtr类2.2 智能指针的原理2.3 小总结智能指针原理 3 智能指针的拷贝问题3.1 std::auto_ptr3.2 std::unique_ptr3.3 std::shared_ptr3.3.1 拷贝构造函数…...

编程日记 2023/7/7 19:26:21

ubantu配置python环境

安装python 参考博客 安装pycharm 博客 创建Pycharm快捷方式 博客 ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ‘ssl’ module is compiled with File “/home/r00t/IdeaProjects/data/venv/lib/python3.9/site-packages/urllib3/init.py”…...

编程日记 2023/7/7 18:53:00

单向/双向V2G环境下分布式电源与电动汽车充电站联合配置方法(matlab代码)

目录 1 主要内容 目标函数 电动汽车负荷建模 算例系统图 程序亮点 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现博士文章《互动环境下分布式电源与电动汽车充电站的优化配置方法研究》第五章《单向/双向V2G环境下分布式电源与电动汽车充电站联合配置方法》…...

编程日记 2023/7/7 18:19:38

dockerfile常用指令

Dockerfile常用指令 视频学习资料来源这里&#xff0c;点击本行文字即可跳转&#xff0c;讲的比较详细&#xff0c;不过比较老&#xff0c;跟最新的肯定是有一些差异的 Dockerfile官网文档的话点击这里 中文文档可以看看这个&#xff0c;不过没有详细的代码demo 或者是看这个 或…...

编程日记 2023/7/7 17:46:17

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/12/25 2:41:33

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/12/14 13:08:55

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/12/18 4:21:19

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/12/21 6:19:19

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/12/13 5:39:02

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/12/21 2:54:25

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/12/24 12:19:29