CodeMirror 对 XML 文档熟悉及元素控制自定义
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 '<' 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 是一个网络代码编辑器组件。它可以在网站中用于实现支持多种编辑功能的文本输入字段，并具有丰富的编程接口以允许进一步扩展。 本文为 xml 格式的代码提示约束格式规范的自定义示例内容。 先看效果，如下： 官方 Demo 的完整代码如…...
Jetpack - ViewModel
一、概念 二、使用 2.1 创建ViewModel //无参 class MainViewModel : ViewModel() {} //有参 class MainViewModel(mainRepository: MainRepository) : ViewModel() {} class MainViewModelFactory(private val mainRepository: MainRepository) : ViewModelProvider.Factor…...
【新版系统架构】第十三章-层次式架构设计理论与实践
软考-系统架构设计师知识点提炼-系统架构设计师教程（第2版） 第一章-绪论第二章-计算机系统基础知识（一）第二章-计算机系统基础知识（二）第三章-信息系统基础知识第四章-信息安全技术基础知识第五章-软件工程…...
剖析Linux文件系统
Linux 文件系统体系结构是一个对复杂系统进行抽象化的有趣例子。通过使用一组通用的 API 函数，Linux 可以在许多种存储设备上支持许多种文件系统。例如，read 函数调用可以从指定的文件描述符读取一定数量的字节。read 函数不了解文件系统的类型ÿ…...
简介Maven结构与配置方法
一、Maven是什么 Maven是apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。 它有什么用呢？ 比如我以前要IOUtils这个包，那要到网站下去下载下来，再导入。 当jar包多的时候，一个一个导出，…...
好用的网址6
PPT课件网：http://www.pptkj.net/ ImgUpscaler：AI Image Upscaler - Upscale Photo, Cartoons in Batch Free 加强图片 AI Draw：AI Draw | Convert Images to One-Line Drawings with AI ZToDoList：https://www.ztodolis…...
MySQL数据库---笔记5
MySQL数据库---笔记5 一、锁1.1、介绍1.2、全局锁1.2.1、全局锁介绍1.2.2、一致性数据备份 1.3、表级锁1.3.1、表锁1.3.2、元数据锁（meta data lock , MDL）1.3.3、意向锁 1.4、行级锁1.4.1、介绍1.4.2、行锁1.4.3、间隙锁/临建锁 二、InnoDB引擎2.1、逻辑…...
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…...
autodl算力租用平台应用于pycharm
一、GPU租用选择 1、创建实例 首先进入算力市场 博客以2080为例，选择计费方式，选择合适的主机，选择要创建实例中的GPU数量，选择镜像（内置了不同的深度学习框架），最后创建即可 2、SSH远程连…...
高德地图的使用
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 标签同步加载增加代理服务器设置…...
＜List＜Map＜String,String＞＞＞ 删除元素常见的误区以及删除方法
看到这么标题可能觉得这个真是太easy了，不就remove吗，分分钟搞定。 但结果却出乎意料，下面我们来j简单说说list删除数据可能遇到的坑： 先说明我们可能会遇到的两个问题： 1.java.lang.IndexOutOfBoundsException(索引越…...
Linux下的编辑器——vim的简单上手指南
文章目录 一.概念1. 什么是 vim2. Vim 的模式①命令模式② 插入模式③底线命令模式 二.vim的基本操作1.如何启动vim？2. [命令模式」切换至 「插入模式」3.「插入模式」 切换至 「命令模式」4.「命令模式」切换至 「底行模式」5. 如何退出 vim？ 三.vim指令…...
C++多线程学习（二、多线程的几种创造方式【有返回值的之后讲】）
目录 创建多线程 1.普通函数充当线程处理函数创造线程 2.Lambda表达式充当线程处理函数 3.带参函数创建线程 3.1普通参数 3.2传入引用 3.3智能指针充当函数参数 4.通过类中的成员函数创建 4.1仿函数方式创建：类名的方式调用 4.2普通类中的成员函数 创建多…...
前端开发框架生命周期详解：Vue、React和Angular
引言 作为前端开发者，掌握前端开发框架的生命周期是非常重要的。在现代Web应用开发中，Vue.js、React和Angular是三个最流行的前端开发框架。本篇博客将详细解读这三个框架的生命周期，包括每个阶段的含义、用途以及如何最大限度地利用它们。通…...
【Java从入门到大牛】程序流程控制
🔥 本文由 程序喵正在路上 原创，CSDN首发！ 💖 系列专栏：Java从入门到大牛 🌠 首发时间：2023年7月7日 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾…...
UML学习统一建模语言
unified modeling language 统一建模语言 面向对象软件分析与设计建模的事实标准 类命名：帕斯卡特命名 类之间的关系 关联关系：班级和学生，一个类的对象作为另一个类的成员变量； 通过非构造和setter注入的方式建立联系…...
【C++学习笔记】RAII思想——智能指针
智能指针 1 内存泄漏问题2 RAII（Resource Acquisition Is Initialization）2.1 使用RAII思想设计的SmartPtr类2.2 智能指针的原理2.3 小总结智能指针原理 3 智能指针的拷贝问题3.1 std::auto_ptr3.2 std::unique_ptr3.3 std::shared_ptr3.3.1 拷贝构造函数…...
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”…...
单向/双向V2G环境下分布式电源与电动汽车充电站联合配置方法(matlab代码)
目录 1 主要内容 目标函数 电动汽车负荷建模 算例系统图 程序亮点 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现博士文章《互动环境下分布式电源与电动汽车充电站的优化配置方法研究》第五章《单向/双向V2G环境下分布式电源与电动汽车充电站联合配置方法》…...
dockerfile常用指令
Dockerfile常用指令 视频学习资料来源这里，点击本行文字即可跳转，讲的比较详细，不过比较老，跟最新的肯定是有一些差异的 Dockerfile官网文档的话点击这里 中文文档可以看看这个，不过没有详细的代码demo 或者是看这个 或…...
保姆级教程：手把手教你为Jetson Orin Nano刷入R36.4.4系统（从下载到开机）
从零开始：Jetson Orin Nano开发者套件系统刷入全流程实战指南 当你第一次拿到NVIDIA Jetson Orin Nano开发者套件时，那种兴奋感可能很快会被"我该如何开始"的困惑所取代。这款性能强大的边缘计算设备确实令人着迷，但如果没有正确的…...
3块钱，2小时，他用一张显卡从零训练了一个大模型
3块钱能干什么？ 一杯蜜雪冰城都不够。 但有人用3块钱的电费加2个小时，从零训练出了一个能聊天的AI大模型。 这不是段子。是一个在 GitHub 上拿到 41.9k Star 的开源项目，叫 MiniMind。大模型自由，来了 过去两年，所有人…...
granite-4.0-h-350m效果展示：Ollama运行下德语工业标准文档理解案例
granite-4.0-h-350m效果展示：Ollama运行下德语工业标准文档理解案例 1. 模型核心能力概览 Granite-4.0-H-350M是一个轻量级但功能强大的指令模型，专门针对设备部署和研究场景优化。这个350M参数的模型虽然体积小巧，但在多语言理解和指令跟随…...
告别软路由？实测ARM架构MT7981硬路由刷OpenWrt：性能、功耗与稳定性深度对比
ARM硬路由 vs x86软路由：2024年高性能网络设备终极对决 在家庭与企业网络设备的选择上，x86架构软路由长期占据着性能王座，而传统硬路由则因扩展性不足被极客们视为"玩具"。但2023年MTK发布的MT7981芯片组彻底改变了这一格局——这颗…...
Go UUID终极指南：为什么选择go.uuid而非标准库的5大理由
Go UUID终极指南：为什么选择go.uuid而非标准库的5大理由 【免费下载链接】go.uuid UUID package for Go 项目地址: https://gitcode.com/gh_mirrors/go/go.uuid 在Go语言开发中，生成全局唯一标识符（UUID）是常见的需求。虽然…...
别再死记硬背公式了！图解OpenCV相机标定：从像素到世界的坐标变换到底在干啥？
图解OpenCV相机标定：从像素到世界的坐标变换全解析 当你第一次看到相机标定的数学公式时，是不是感觉像在看天书？旋转矩阵、平移向量、内参矩阵...这些抽象的概念到底对应着现实世界中的什么？本文将用最直观的方式，带你…...
3个强力功能解决微信聊天记录永久保存难题的完整指南
3个强力功能解决微信聊天记录永久保存难题的完整指南 【免费下载链接】WeChatMsg 提取微信聊天记录，将其导出成HTML、Word、CSV文档永久保存，对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMsg 你…...
Phi-4-mini-reasoning+ollama打造教育AI助手：中小学奥数题自动解析案例
Phi-4-mini-reasoningollama打造教育AI助手：中小学奥数题自动解析案例 1. 为什么需要教育AI助手？ 中小学奥数题解析一直是家长和老师的痛点。传统方式需要专业老师一对一辅导，成本高且效率低。很多家长自己也不会解题，辅导孩子作…...
从格式枷锁到自由播放：ncmdumpGUI的NCM解码技术突围
从格式枷锁到自由播放：ncmdumpGUI的NCM解码技术突围 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换，Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 当你花费数小时精心收藏的音乐专辑在智能音箱上…...
基于StructBERT的短视频评论情感分析系统搭建
基于StructBERT的短视频评论情感分析系统搭建 1. 引言 短视频平台每天产生海量用户评论，这些评论蕴含着用户对内容的真实感受和反馈。传统的人工审核方式效率低下，难以应对实时海量的评论数据。而基于StructBERT的情感分析系统能够自动识别评论的情感倾…...