网站建设 全包 制作,网站模板分享,新站加快网站收录,定制软件的平台CodeMirror 是一个网络代码编辑器组件。它可以在网站中用于实现支持多种编辑功能的文本输入字段#xff0c;并具有丰富的编程接口以允许进一步扩展。
本文为 xml 格式的代码提示约束格式规范的自定义示例内容。
先看效果#xff0c;如下#xff1a; 官方 Demo 的完整代码如…CodeMirror 是一个网络代码编辑器组件。它可以在网站中用于实现支持多种编辑功能的文本输入字段并具有丰富的编程接口以允许进一步扩展。
本文为 xml 格式的代码提示约束格式规范的自定义示例内容。
先看效果如下 官方 Demo 的完整代码如下重点看代码中 tags 的配置
!doctype htmltitleCodeMirror: XML Autocomplete Demo/title
meta charsetutf-8/
link relstylesheet href../doc/docs.csslink relstylesheet href../lib/codemirror.css
link relstylesheet 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 idnava hrefhttps://codemirror.net/5h1CodeMirror/h1img idlogo src../doc/logo.png/aullia href../index.htmlHome/alia href../doc/manual.htmlManual/alia hrefhttps://github.com/codemirror/codemirror5Code/a/ulullia classactive href#XML Autocomplete/a/ul
/divarticle
h2XML Autocomplete Demo/h2
formtextarea idcode namecode!-- write some xml below --
/textarea/formpPress strongctrl-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-hintmanual/a./ppDevelopment of the codexml-hint/code addon was kindlysponsoredby a hrefhttp://www.xperiment.mobiwww.xperiment.mobi/a./pscriptvar 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
