<!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
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 13KB index.html 12KB index.html 11KB index.html 10KB index.html 10KB index.html 9KB index.html 9KB index.html 8KB upgrade_v3.html 8KB index.html 8KB共 585 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
晴天16
- 粉丝: 2
- 资源: 2
最新资源
- python SAP自动化并发送html outlook邮件
- 【老生谈算法】Matlab实现可变指数遗忘的扩展递归最小二乘法(VEX-RLS)及其应用
- 保护个人隐私安全-彻底清除剪贴板的方法与技巧
- 可直连数据库，找到存在可疑推荐关系字段的表绘制推荐关系层级信息
- 根据excel表格快速制作层级信息工具（线下传销）不包含其他信息，只有层级信息，其他信息添加需要自己添加，理论上问题不大
- 基于MATLAB车牌识别系统实现系统【GUI含界面】.zip
- 基于MATLAB车牌识别系统【含界面GUI】.zip
- 技术资料分享MMCSDTimming很好的技术资料.zip
- 技术资料分享MMC-FAT16-File-System-Specification-v1.0很好的技术资料.zip
- 技术资料分享MDk如何生成bin文件很好的技术资料.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
