codemirror下载包_codemirror资源-CSDN文库

共585个文件

js：305个

html：184个

css：79个

codemirror

需积分: 5 129 浏览量 2023-02-02 17:38:52 上传评论收藏 1.45MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

codemirror下载包（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

shadowfox.css 2KB

ttcn.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 156KB

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.11</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

评论收藏

内容反馈