【免费】codemirror.zip资源-CSDN文库

共585个文件

js：305个

html：184个

css：79个

需积分: 0 150 浏览量更新于2024-04-19 收藏 1.45MB ZIP 举报

CodeMirror是一个开源的、跨平台的代码编辑器，主要用于网页开发。它可以在浏览器环境中运行，为Web应用提供高质量的代码编辑功能。这个"codemirror.zip"文件包含了CodeMirror的一个特定版本，即5.65.16。下面将详细介绍CodeMirror的相关知识点。 1. **CodeMirror基本概念**： CodeMirror是一个JavaScript库，它可以被嵌入到HTML页面中，为用户提供在线代码编辑的功能。支持多种编程语言的语法高亮，包括但不限于JavaScript、HTML、CSS、Python、Java等，并且可以自定义更多语言。 2. **主要特性**： - **语法高亮**：CodeMirror能够识别多种编程语言，并对不同语言的代码进行颜色区分，提高代码可读性。 - **自动缩进**：根据代码的结构自动调整缩进，保持代码整洁。 - **代码折叠**：允许用户折叠和展开代码块，方便查看和管理大量代码。 - **实时错误检测**：通过模式匹配，可以在用户输入时即时检查代码错误。 - **搜索与替换**：内置搜索和替换功能，方便用户在代码中查找和替换文本。 - **多光标与多选**：支持同时设置多个光标，实现快速编辑。 - **可扩展性**：可以通过插件系统添加新的语言支持和功能。 3. **版本5.65.16**：这个版本可能包含了一些修复的bug、性能优化或者新特性的添加。每个版本的更新都会在官方文档中记录，具体改动需要查看当时的发布日志。 4. **使用方法**：在网页中引入CodeMirror的JS和CSS文件，然后创建一个HTML元素作为编辑器的容器，通过JavaScript调用CodeMirror实例化编辑器，并配置需要的语言和支持的特性。 5. **集成与应用**： CodeMirror常用于在线编程教育平台、代码分享网站、网页版IDE（集成开发环境）等场景，为用户提供友好的代码编辑体验。 6. **插件系统**： CodeMirror的插件系统是其强大之处，开发者可以根据需求选择或开发插件，如行号显示、行拖拽、自动完成等，进一步增强编辑器功能。 7. **API与事件**： CodeMirror提供了丰富的API供开发者操作编辑器，如获取/设置当前选区、监听用户输入事件等，方便与后端或其他前端组件交互。 8. **社区与文档**： CodeMirror有一个活跃的开发者社区，提供了详尽的文档和示例，帮助开发者快速上手和解决问题。总结来说，CodeMirror是一个功能强大的在线代码编辑器，适用于各种需要在网页中编辑代码的场景。这个"codemirror.zip"文件包含的5.65.16版本，是CodeMirror的一个稳定版本，可以用于项目中，或者作为研究和学习CodeMirror的基础。

收起资源包目录

codemirror.zip （585个子文件）

AUTHORS 13KB

ambiance.css 26KB

codemirror.css 9KB

abbott.css 8KB

solarized.css 5KB

mdn-like.css 5KB

liquibyte.css 4KB

merge.css 3KB

docs.css 3KB

yonce.css 3KB

lint.css 3KB

xq-dark.css 3KB

material-palenight.css 3KB

material-ocean.css 3KB

duotone-light.css 3KB

darcula.css 3KB

lesser-dark.css 3KB

duotone-dark.css 3KB

material-darker.css 3KB

ayu-mirage.css 2KB

material.css 2KB

icecoder.css 2KB

pastel-on-dark.css 2KB

oceanic-next.css 2KB

ttcn.css 2KB

shadowfox.css 2KB

tomorrow-night-eighties.css 2KB

ayu-dark.css 2KB

moxer.css 2KB

base16-dark.css 2KB

erlang-dark.css 2KB

xq-light.css 2KB

monokai.css 2KB

twilight.css 2KB

vibrant-ink.css 2KB

base16-light.css 2KB

mbo.css 2KB

nord.css 2KB

paraiso-light.css 2KB

paraiso-dark.css 2KB

3024-night.css 2KB

dracula.css 2KB

seti.css 2KB

zenburn.css 2KB

3024-day.css 2KB

abcdef.css 2KB

the-matrix.css 2KB

blackboard.css 2KB

gruvbox-dark.css 2KB

lucario.css 2KB

yeti.css 2KB

tern.css 2KB

midnight.css 2KB

panda-syntax.css 2KB

rubyblue.css 2KB

tomorrow-night-bright.css 2KB

night.css 2KB

cobalt.css 2KB

colorforth.css 2KB

idea.css 2KB

railscasts.css 1KB

hopscotch.css 1KB

isotope.css 1KB

bespin.css 1KB

simplescrollbars.css 1KB

eclipse.css 1KB

neo.css 947B

elegant.css 781B

ssms.css 751B

neat.css 688B

show-hint.css 649B

juejin.css 517B

dialog.css 507B

tiki.css 439B

foldgutter.css 435B

mode_test.css 366B

tiddlywiki.css 220B

matchesonscrollbar.css 188B

fullscreen.css 116B

ambiance-mobile.css 103B

.editorconfig 87B

.gitattributes 160B

manual.html 212KB

releases.html 158KB

scala.html 28KB

internals.html 25KB

index.html 22KB

realworld.html 18KB

index.html 17KB

index.html 13KB

index.html 12KB

index.html 11KB

index.html 10KB

index.html 9KB

index.html 8KB

upgrade_v3.html 8KB

index.html 8KB

共 585 条

资源推荐

资源预览

资源评论

<!doctype html> <title>CodeMirror 5 User Manual</title> <meta charset="utf-8"/> <link rel=stylesheet href="docs.css"> <script src="activebookmark.js"></script> <script src="../lib/codemirror.js"></script> <link rel="stylesheet" href="../lib/codemirror.css"> <script src="../addon/runmode/runmode.js"></script> <script src="../addon/runmode/colorize.js"></script> <script src="../mode/javascript/javascript.js"></script> <script src="../mode/xml/xml.js"></script> <script src="../mode/css/css.js"></script> <script src="../mode/htmlmixed/htmlmixed.js"></script> <style> dt { text-indent: -2em; padding-left: 2em; margin-top: 1em; } dd { margin-left: 1.5em; margin-bottom: 1em; } dt {margin-top: 1em;} dd dl, dd dt, dd dd, dd ul { margin-top: 0; margin-bottom: 0; } dt + dt { margin-top: 0; } dt.command { position: relative; } span.keybinding { position: absolute; right: 0; font-size: 80%; color: #555; text-indent: 0; } </style> <div id=nav> <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="logo.png"></a> <ul> <li><a href="../index.html">Home</a></li> <li><a href="#overview" class=active data-default="true">Manual</a></li> <li><a href="https://github.com/codemirror/codemirror5">Code</a></li> </ul> <ul> <li><a href="#usage">Basic Usage</a></li> <li><a href="#config">Configuration</a></li> <li><a href="#events">Events</a></li> <li><a href="#keymaps">Key maps</a></li> <li><a href="#commands">Commands</a></li> <li><a href="#styling">Customized Styling</a></li> <li><a href="#api">Programming API</a> <ul> <li><a href="#api_constructor">Constructor</a></li> <li><a href="#api_content">Content manipulation</a></li> <li><a href="#api_selection">Selection</a></li> <li><a href="#api_configuration">Configuration</a></li> <li><a href="#api_doc">Document management</a></li> <li><a href="#api_history">History</a></li> <li><a href="#api_marker">Text-marking</a></li> <li><a href="#api_decoration">Widget, gutter, and decoration</a></li> <li><a href="#api_sizing">Sizing, scrolling, and positioning</a></li> <li><a href="#api_mode">Mode, state, and tokens</a></li> <li><a href="#api_misc">Miscellaneous methods</a></li> <li><a href="#api_static">Static properties</a></li> </ul> </li> <li><a href="#addons">Addons</a></li> <li><a href="#modeapi">Writing CodeMirror Modes</a></li> <li><a href="#vimapi">Vim Mode API</a> <ul> <li><a href="#vimapi_configuration">Configuration</a></li> <li><a href="#vimapi_events">Events</a></li> <li><a href="#vimapi_extending">Extending VIM</a></li> </ul> </li> </ul> </div> <article> <section class=first id=overview> <h2 style="position: relative"> User manual and reference guide <span style="color: #888; font-size: 1rem; position: absolute; right: 0; bottom: 0">version 5.65.16</span> </h2> <p>CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides <em>only</em> the editor component, no accompanying buttons, auto-completion, or other IDE functionality. It does provide a rich API on top of which such functionality can be straightforwardly implemented. See the <a href="#addons">addons</a> included in the distribution, and <a href="https://npms.io/search?q=codemirror">3rd party packages on npm</a>, for reusable implementations of extra features.</p> <p>CodeMirror works with language-specific modes. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. The distribution comes with a number of modes (see the <a href="../mode/"><code>mode/</code></a> directory), and it isn't hard to <a href="#modeapi">write new ones</a> for other languages.</p> </section> <section id=usage> <h2>Basic Usage</h2> <p>The easiest way to use CodeMirror is to simply load the script and style sheet found under <code>lib/</code> in the distribution, plus a mode script from one of the <code>mode/</code> directories. For example:</p> <pre data-lang="text/html"><script src="lib/codemirror.js"></script> <link rel="stylesheet" href="lib/codemirror.css"> <script src="mode/javascript/javascript.js"></script></pre> <p>(Alternatively, use a module loader. <a href="#modloader">More about that later.</a>)</p> <p>Having done this, an editor instance can be created like this:</p> <pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body);</pre> <p>The editor will be appended to the document body, will start empty, and will use the mode that we loaded. To have more control over the new editor, a configuration object can be passed to <a href="#CodeMirror"><code>CodeMirror</code></a> as a second argument:</p> <pre data-lang="javascript">var myCodeMirror = CodeMirror(document.body, { value: "function myScript(){return 100;}\n", mode: "javascript" });</pre> <p>This will initialize the editor with a piece of code already in it, and explicitly tell it to use the JavaScript mode (which is useful when multiple modes are loaded). See <a href="#config">below</a> for a full discussion of the configuration options that CodeMirror accepts.</p> <p>In cases where you don't want to append the editor to an element, and need more control over the way it is inserted, the first argument to the <code>CodeMirror</code> function can also be a function that, when given a DOM element, inserts it into the document somewhere. This could be used to, for example, replace a textarea with a real editor:</p> <pre data-lang="javascript">var myCodeMirror = CodeMirror(function(elt) { myTextArea.parentNode.replaceChild(elt, myTextArea); }, {value: myTextArea.value});</pre> <p>However, for this use case, which is a common way to use CodeMirror, the library provides a much more powerful shortcut:</p> <pre data-lang="javascript">var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre> <p>This will, among other things, ensure that the textarea's value is updated with the editor's contents when the form (if it is part of a form) is submitted. See the <a href="#fromTextArea">API reference</a> for a full description of this method.</p> <h3 id=modloader>Module loaders</h3> <p>The files in the CodeMirror distribution contain shims for loading them (and their dependencies) in AMD or CommonJS environments. If the variables <code>exports</code> and <code>module</code> exist and have type object, CommonJS-style require will be used. If not, but there is a function <code>define</code> with an <code>amd</code> property present, AMD-style (RequireJS) will be used.</p> <p>It is possible to use <a href="http://browserify.org/">Browserify</a> or similar tools to statically build modules using CodeMirror. Alternatively, use <a href="http://requirejs.org/">RequireJS</a> to dynamically load dependencies at runtime. Both of these approaches have the advantage that they don't use the global namespace and can, thus, do things like load multiple versions of CodeMirror alongside each other.</p> <p>Here's a simple example of using RequireJS to load CodeMirror:</p> <pre data-lang="javascript">require([ "cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed" ], function(CodeMirror) { CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, mode: "htmlmixed" }); });</pre> <p>It will automatically load the modes that the mixed HTML mode depends on (XML, JavaScript, and CSS). Do <em>not</em> use RequireJS' <code>paths</code> option to configure the path to CodeMirror, since it will break loading submodules through relative pa