--- a/js/flotr2/examples/lib/codemirror/doc/manual.html +++ b/js/flotr2/examples/lib/codemirror/doc/manual.html @@ -1,1 +1,968 @@ - +<!doctype html> +<html> + <head> + <title>CodeMirror: User Manual</title> + <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/> + <link rel="stylesheet" type="text/css" href="docs.css"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <style>dl dl {margin: 0;}</style> + </head> + <body> + +<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1> + +<pre class="grey"> +<img src="baboon.png" class="logo" alt="logo"/>/* User manual and + reference guide */ +</pre> + +<div class="clear"><div class="leftbig blk"> + + <h2 id="overview">Overview</h2> + + <p>CodeMirror is a code-editor component that can be embedded in + Web pages. The code 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">add-ons</a> included in the distribution, + and + the <a href="http://www.octolabs.com/javascripts/codemirror-ui/">CodeMirror + UI</a> project, 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 few + modes (see the <code>mode/</code> directory), and it isn't hard + to <a href="#modeapi">write new ones</a> for other languages.</p> + + <h2 id="usage">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 + and a theme stylesheet from <code>theme/</code>. (See + also <a href="compress.html">the compression helper</a>.) For + example:</p> + + <pre><script src="lib/codemirror.js"></script> +<link rel="stylesheet" href="../lib/codemirror.css"> +<script src="mode/javascript/javascript.js"></script></pre> + + <p>Having done this, an editor instance can be created like + this:</p> + + <pre>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 <code>CodeMirror</code> as a second argument:</p> + + <pre>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>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>var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre> + + <p>This will, among other things, ensure that the textarea's value + is updated 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> + + <h2 id="config">Configuration</h2> + + <p>Both the <code>CodeMirror</code> function and + its <code>fromTextArea</code> method take as second (optional) + argument an object containing configuration options. Any option + not supplied like this will be taken + from <code>CodeMirror.defaults</code>, an object containing the + default options. You can update this object to change the defaults + on your page.</p> + + <p>Options are not checked in any way, so setting bogus option + values is bound to lead to odd errors.</p> + + <p>These are the supported options:</p> + + <dl> + <dt id="option_value"><code>value (string)</code></dt> + <dd>The starting value of the editor.</dd> + + <dt id="option_mode"><code>mode (string or object)</code></dt> + <dd>The mode to use. When not given, this will default to the + first mode that was loaded. It may be a string, which either + simply names the mode or is + a <a href="http://en.wikipedia.org/wiki/MIME">MIME</a> type + associated with the mode. Alternatively, it may be an object + containing configuration options for the mode, with + a <code>name</code> property that names the mode (for + example <code>{name: "javascript", json: true}</code>). The demo + pages for each mode contain information about what configuration + parameters the mode supports. You can ask CodeMirror which modes + and MIME types are loaded with + the <code>CodeMirror.listModes</code> + and <code>CodeMirror.listMIMEs</code> functions.</dd> + + <dt id="option_theme"><code>theme (string)</code></dt> + <dd>The theme to style the editor with. You must make sure the + CSS file defining the corresponding <code>.cm-s-[name]</code> + styles is loaded (see + the <a href="../theme/"><code>theme</code></a> directory in the + distribution). The default is <code>"default"</code>, for which + colors are included in <code>codemirror.css</code>. It is + possible to use multiple theming classes at once—for + example <code>"foo bar"</code> will assign both + the <code>cm-s-foo</code> and the <code>cm-s-bar</code> classes + to the editor.</dd> + + <dt id="option_indentUnit"><code>indentUnit (integer)</code></dt> + <dd>How many spaces a block (whatever that means in the edited + language) should be indented. The default is 2.</dd> + + <dt id="option_tabSize"><code>tabSize (integer)</code></dt> + <dd>The width of a tab character. Defaults to 4.</dd> + + <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt> + <dd>Whether, when indenting, the first N*<code>tabSize</code> + spaces should be replaced by N tabs. Default is false.</dd> + + <dt id="option_electricChars"><code>electricChars (boolean)</code></dt> + <dd>Configures whether the editor should re-indent the current + line when a character is typed that might change its proper + indentation (only works if the mode supports indentation). + Default is true.</dd> + + <dt id="option_keyMap"><code>keyMap (string)</code></dt> + <dd>Configures the keymap to use. The default + is <code>"default"</code>, which is the only keymap defined + in <code>codemirror.js</code> itself. Extra keymaps are found in + the <a href="../keymap/"><code>keymap</code></a> directory.</dd> + + <dt id="option_extraKeys"><code>extraKeys (object)</code></dt> + <dd>Can be used to specify extra keybindings for the editor. + When given, should be an object with property names + like <code>Ctrl-A</code>, <code>Home</code>, + and <code>Ctrl-Alt-Left</code>. See + the <code>CodeMirror.keyNames</code> object for the names of all + the keys. The values in this object can either be functions, + which will be called with the CodeMirror instance when the key + is pressed, or strings, which should name commands defined + in <code>CodeMirror.commands</code> (not documented properly, + but looking at the source and the definition of the built-in + keymaps, they should be rather obvious).</dd> + + <dt id="option_lineWrapping"><code>lineWrapping (boolean)</code></dt> + <dd>Whether CodeMirror should scroll or wrap for long lines. + Defaults to <code>false</code> (scroll).</dd> + + <dt id="option_lineNumbers"><code>lineNumbers (boolean)</code></dt> + <dd>Whether to show line numbers to the left of the editor.</dd> + + <dt id="option_firstLineNumber"><code>firstLineNumber (integer)</code></dt> + <dd>At which number to start counting lines. Default is 1.</dd> + + <dt id="option_gutter"><code>gutter (boolean)</code></dt> + <dd>Can be used to force a 'gutter' (empty space on the left of + the editor) to be shown even when no line numbers are active. + This is useful for setting <a href="#setMarker">markers</a>.</dd> + + <dt id="option_fixedGutter"><code>fixedGutter (boolean)</code></dt> + <dd>When enabled (off by default), this will make the gutter + stay visible when the document is scrolled horizontally.</dd> + + <dt id="option_readOnly"><code>readOnly (boolean)</code></dt> + <dd>This disables editing of the editor content by the user.</dd> + + <dt id="option_onChange"><code>onChange (function)</code></dt> + <dd>When given, this function will be called every time the + content of the editor is changed. It will be given the editor + instance as first argument, and an <code>{from, to, newText, + next}</code> object containing information about the changes + that occurred as second argument. <code>from</code> + and <code>to</code> are the positions (in the pre-change + coordinate system) where the change started and + ended. <code>newText</code> is an array of strings representing + the text that replaced the changed range (split by line). If + multiple changes happened during a single operation, the object + will have a <code>next</code> property pointing to another + change object (which may point to another, etc).</dd> + + <dt id="option_onCursorActivity"><code>onCursorActivity (function)</code></dt> + <dd>Will be called when the cursor or selection moves, or any + change is made to the editor content.</dd> + + <dt id="option_onGutterClick"><code>onGutterClick (function)</code></dt> + <dd>When given, will be called whenever the editor gutter (the + line-number area) is clicked. Will be given the editor instance + as first argument, the (zero-based) number of the line that was + clicked as second argument, and the raw <code>mousedown</code> + event object as third argument.</dd> + + <dt id="option_onFocus"><code>onFocus, onBlur (function)</code></dt> + <dd>The given functions will be called whenever the editor is + focused or unfocused.</dd> + + <dt id="option_onScroll"><code>onScroll (function)</code></dt> + <dd>When given, will be called whenever the editor is + scrolled.</dd> + + <dt id="option_onHighlightComplete"><code>onHighlightComplete (function)</code></dt> + <dd>Whenever the editor's content has been fully highlighted, + this function (if given) will be called. It'll be given a single + argument, the editor instance.</dd> + + <dt id="option_onUpdate"><code>onUpdate (function)</code></dt> + <dd>Will be called whenever CodeMirror updates its DOM display.</dd> + + <dt id="option_matchBrackets"><code>matchBrackets (boolean)</code></dt> + <dd>Determines whether brackets are matched whenever the cursor + is moved next to a bracket.</dd> + + <dt id="option_workTime"><code>workTime, workDelay (number)</code></dt> + <dd>Highlighting is done by a pseudo background-thread that will + work for <code>workTime</code> milliseconds, and then use + timeout to sleep for <code>workDelay</code> milliseconds. The + defaults are 200 and 300, you can change these options to make + the highlighting more or less aggressive.</dd> + + <dt id="option_pollInterval"><code>pollInterval (number)</code></dt> + <dd>Indicates how quickly CodeMirror should poll its input + textarea for changes. Most input is captured by events, but some + things, like IME input on some browsers, doesn't generate events + that allow CodeMirror to properly detect it. Thus, it polls. + Default is 100 milliseconds.</dd> + + <dt id="option_undoDepth"><code>undoDepth (integer)</code></dt> + <dd>The maximum number of undo levels that the editor stores. + Defaults to 40.</dd> + + <dt id="option_tabindex"><code>tabindex (integer)</code></dt> + <dd>The <a href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex">tab + index</a> to assign to the editor. If not given, no tab index + will be assigned.</dd> + + <dt id="option_document"><code>document (DOM document)</code></dt> + <dd>Use this if you want to display the editor in another DOM. + By default it will use the global <code>document</code> + object.</dd> + + <dt id="option_onKeyEvent"><code>onKeyEvent (function)</code></dt> + <dd>This provides a rather low-level hook into CodeMirror's key + handling. If provided, this function will be called on + every <code>keydown</code>, <code>keyup</code>, + and <code>keypress</code> event that CodeMirror captures. It + will be passed two arguments, the editor instance and the key + event. This key event is pretty much the raw key event, except + that a <code>stop()</code> method is always added to it. You + could feed it to, for example, <code>jQuery.Event</code> to + further normalize it.<br>This function can inspect the key + event, and handle it if it wants to. It may return true to tell + CodeMirror to ignore the event. Be wary that, on some browsers, + stopping a <code>keydown</code> does not stop + the <code>keypress</code> from firing, whereas on others it + does. If you respond to an event, you should probably inspect + its <code>type</code> property and only do something when it + is <code>keydown</code> (or <code>keypress</code> for actions + that need character data).</dd> + </dl> + + <h2 id="styling">Customized Styling</h2> + + <p>Up to a certain extent, CodeMirror's look can be changed by + modifying style sheet files. The style sheets supplied by modes + simply provide the colors for that mode, and can be adapted in a + very straightforward way. To style the editor itself, it is + possible to alter or override the styles defined + in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>.</p> + + <p>Some care must be taken there, since a lot of the rules in this + file are necessary to have CodeMirror function properly. Adjusting + colors should be safe, of course, and with some care a lot of + other things can be changed as well. The CSS classes defined in + this file serve the following roles:</p> + + <dl> + <dt id="class_CodeMirror"><code>CodeMirror</code></dt> + <dd>The outer element of the editor. This should be used for + borders and positioning. Can also be used to set styles that + should hold for everything inside the editor (such as font + and font size), or to set a background.</dd> + + <dt id="class_CodeMirror_scroll"><code>CodeMirror-scroll</code></dt> + <dd>This determines whether the editor scrolls (<code>overflow: + auto</code> + fixed height). By default, it does. Giving + this <code>height: auto; overflow: visible;</code> will cause + the editor to resize to fit its content.</dd> + + <dt id="class_CodeMirror_focused"><code>CodeMirror-focused</code></dt> + <dd>Whenever the editor is focused, the top element gets this + class. This is used to hide the cursor and give the selection a + different color when the editor is not focused.</dd> + + <dt id="class_CodeMirror_gutter"><code>CodeMirror-gutter</code></dt> + <dd>Use this for giving a background or a border to the editor + gutter. Don't set any padding here, + use <code>CodeMirror-gutter-text</code> for that. By default, + the gutter is 'fluid', meaning it will adjust its width to the + maximum line number or line marker width. You can also set a + fixed width if you want.</dd> + + <dt id="class_CodeMirror_gutter_text"><code>CodeMirror-gutter-text</code></dt> + <dd>Used to style the actual line numbers. For the numbers to + line up, you must make sure that the font in the gutter is the + same as the one in the rest of the editor, so you should + probably only set font style and size in + the <code>CodeMirror</code> class.</dd> + + <dt id="class_CodeMirror_lines"><code>CodeMirror-lines</code></dt> + <dd>The visible lines. If this has vertical + padding, <code>CodeMirror-gutter</code> should have the same + padding.</dd> + + <dt id="class_CodeMirror_cursor"><code>CodeMirror-cursor</code></dt> + <dd>The cursor is a block element that is absolutely positioned. + You can make it look whichever way you want.</dd> + + <dt id="class_CodeMirror_selected"><code>CodeMirror-selected</code></dt> + <dd>The selection is represented by <code>span</code> elements + with this class.</dd> + + <dt id="class_CodeMirror_matchingbracket"><code>CodeMirror-matchingbracket</code>, + <code>CodeMirror-nonmatchingbracket</code></dt> + <dd>These are used to style matched (or unmatched) brackets.</dd> + </dl> + + <p>The actual lines, as well as the cursor, are represented + by <code>pre</code> elements. By default no text styling (such as + bold) that might change line height is applied. If you do want + such effects, you'll have to give <code>CodeMirror pre</code> a + fixed height. Also, you must still take care that character width + is constant.</p> + + <p>If your page's style sheets do funky things to + all <code>div</code> or <code>pre</code> elements (you probably + shouldn't do that), you'll have to define rules to cancel these + effects out again for elements under the <code>CodeMirror</code> + class.</p> + + <p>Themes are also simply CSS files, which define colors for + various syntactic elements. See the files in + the <a href="../theme/"><code>theme</code></a> directory.</p> + + <h2 id="api">Programming API</h2> + + <p>A lot of CodeMirror features are only available through its API. + This has the disadvantage that you need to do work to enable them, + and the advantage that CodeMirror will fit seamlessly into your + application.</p> + + <p>Whenever points in the document are represented, the API uses + objects with <code>line</code> and <code>ch</code> properties. + Both are zero-based. CodeMirror makes sure to 'clip' any positions + passed by client code so that they fit inside the document, so you + shouldn't worry too much about sanitizing your coordinates. If you + give <code>ch</code> a value of <code>null</code>, or don't + specify it, it will be replaced with the length of the specified + line.</p> + + <dl> + <dt id="getValue"><code>getValue() → string</code></dt> + <dd>Get the current editor content.</dd> + <dt id="setValue"><code>setValue(string)</code></dt> + <dd>Set the editor content.</dd> + + <dt id="getSelection"><code>getSelection() → string</code></dt> + <dd>Get the currently selected code.</dd> + <dt id="replaceSelection"><code>replaceSelection(string)</code></dt> + <dd>Replace the selection with the given string.</dd> + + <dt id="focus"><code>focus()</code></dt> + <dd>Give the editor focus.</dd> + + <dt id="setOption"><code>setOption(option, value)</code></dt> + <dd>Change the configuration of the editor. <code>option</code> + should the name of an <a href="#config">option</a>, + and <code>value</code> should be a valid value for that + option.</dd> + <dt id="getOption"><code>getOption(option) → value</code></dt> + <dd>Retrieves the current value of the given option for this + editor instance.</dd> + + <dt id="cursorCoords"><code>cursorCoords(start) → object</code></dt> + <dd>Returns an <code>{x, y, yBot}</code> object containing the + coordinates of the cursor relative to the top-left corner of the + page. <code>yBot</code> is the coordinate of the bottom of the + cursor. <code>start</code> is a boolean indicating whether you + want the start or the end of the selection.</dd> + <dt id="charCoords"><code>charCoords(pos) → object</code></dt> + <dd>Like <code>cursorCoords</code>, but returns the position of + an arbitrary characters. <code>pos</code> should be + a <code>{line, ch}</code> object.</dd> + <dt id="coordsChar"><code>coordsChar(object) → pos</code></dt> + <dd>Given an <code>{x, y}</code> object (in page coordinates), + returns the <code>{line, ch}</code> position that corresponds to + it.</dd> + + <dt id="undo"><code>undo()</code></dt> + <dd>Undo one edit (if any undo events are stored).</dd> + <dt id="redo"><code>redo()</code></dt> + <dd>Redo one undone edit.</dd> + <dt id="historySize"><code>historySize() → object</code></dt> + <dd>Returns an object with <code>{undo, redo}</code> properties, + both of which hold integers, indicating the amount of stored + undo and redo operations.</dd> + <dt id="clearHistory"><code>clearHistory()</code></dt> + <dd>Clears the editor's undo history.</dd> + + <dt id="indentLine"><code>indentLine(line, dir)</code></dt> + <dd>Reset the given line's indentation to the indentation + prescribed by the mode. If the second argument is given, + indentation will be increased (if <code>dir</code> is true) or + decreased (if false) by an <a href="#option_indentUnit">indent + unit</a> instead.</dd> + + <dt id="getTokenAt"><code>getTokenAt(pos) → object</code></dt> + <dd>Retrieves information about the token the current mode found + at the given position (a <code>{line, ch}</code> object). The + returned object has the following properties: + <dl> + <dt><code>start</code></dt><dd>The character (on the given line) at which the token starts.</dd> + <dt><code>end</code></dt><dd>The character at which the token ends.</dd> + <dt><code>string</code></dt><dd>The token's string.</dd> + <dt><code>className</code></dt><dd>The class the mode assigned + to the token. (Can be null when no class was assigned.)</dd> + <dt><code>state</code></dt><dd>The mode's state at the end of this token.</dd> + </dl></dd> + + <dt id="markText"><code>markText(from, to, className) → object</code></dt> + <dd>Can be used to mark a range of text with a specific CSS + class name. <code>from</code> and <code>to</code> should + be <code>{line, ch}</code> objects. The method will return an + object with two methods, <code>clear()</code>, which removes the + mark, and <code>find()</code>, which returns a <code>{from, + to}</code> (both document positions), indicating the current + position of the marked range.</dd> + + <dt id="setBookmark"><code>setBookmark(pos) → object</code></dt> + <dd>Inserts a bookmark, a handle that follows the text around it + as it is being edited, at the given position. A bookmark has two + methods <code>find()</code> and <code>clear()</code>. The first + returns the current position of the bookmark, if it is still in + the document, and the second explicitly removes the + bookmark.</dd> + + <dt id="setMarker"><code>setMarker(line, text, className) → lineHandle</code></dt> + <dd>Add a gutter marker for the given line. Gutter markers are + shown in the line-number area (instead of the number for this + line). Both <code>text</code> and <code>className</code> are + optional. Setting <code>text</code> to a Unicode character like + ● tends to give a nice effect. To put a picture in the gutter, + set <code>text</code> to a space and <code>className</code> to + something that sets a background image. If you + specify <code>text</code>, the given text (which may contain + HTML) will, by default, replace the line number for that line. + If this is not what you want, you can include the + string <code>%N%</code> in the text, which will be replaced by + the line number.</dd> + <dt id="clearMarker"><code>clearMarker(line)</code></dt> + <dd>Clears a marker created + with <code>setMarker</code>. <code>line</code> can be either a + number or a handle returned by <code>setMarker</code> (since a + number may now refer to a different line if something was added + or deleted).</dd> + <dt id="setLineClass"><code>setLineClass(line, className) → lineHandle</code></dt> + <dd>Set a CSS class name for the given line. <code>line</code> + can be a number or a line handle (as returned + by <code>setMarker</code> or this function). + Pass <code>null</code> to clear the class for a line.</dd> + <dt id="hideLine"><code>hideLine(line) → lineHandle</code></dt> + <dd>Hide the given line (either by number or by handle). Hidden + lines don't show up in the editor, and their numbers are skipped + when <a href="#option_lineNumbers">line numbers</a> are enabled. + Deleting a region around them does delete them, and coping a + region around will include them in the copied text.</dd> + <dt id="showLine"><code>showLine(line) → lineHandle</code></dt> + <dd>The inverse of <code>hideLine</code>—re-shows a previously + hidden line, by number or by handle.</dd> + + <dt id="onDeleteLine"><code>onDeleteLine(line, func)</code></dt> + <dd>Register a function that should be called when the line is + deleted from the document.</dd> + + <dt id="lineInfo"><code>lineInfo(line) → object</code></dt> + <dd>Returns the line number, text content, and marker status of + the given line, which can be either a number or a handle + returned by <code>setMarker</code>. The returned object has the + structure <code>{line, handle, text, markerText, markerClass}</code>.</dd> + + <dt id="getLineHandle"><code>getLineHandle(num) → lineHandle</code></dt> + <dd>Fetches the line handle for the given line number.</dd> + + <dt id="addWidget"><code>addWidget(pos, node, scrollIntoView)</code></dt> + <dd>Puts <code>node</code>, which should be an absolutely + positioned DOM node, into the editor, positioned right below the + given <code>{line, ch}</code> position. + When <code>scrollIntoView</code> is true, the editor will ensure + that the entire node is visible (if possible). To remove the + widget again, simply use DOM methods (move it somewhere else, or + call <code>removeChild</code> on its parent).</dd> + + <dt id="matchBrackets"><code>matchBrackets()</code></dt> + <dd>Force matching-bracket-highlighting to happen.</dd> + + <dt id="lineCount"><code>lineCount() → number</code></dt> + <dd>Get the number of lines in the editor.</dd> + + <dt id="getCursor"><code>getCursor(start) → object</code></dt> + <dd><code>start</code> is a boolean indicating whether the start + or the end of the selection must be retrieved. If it is not + given, the current cursor pos, i.e. the side of the selection + that would move if you pressed an arrow key, is chosen. + A <code>{line, ch}</code> object will be returned.</dd> + <dt id="somethingSelected"><code>somethingSelected() → boolean</code></dt> + <dd>Return true if any text is selected.</dd> + <dt id="setCursor"><code>setCursor(pos)</code></dt> + <dd>Set the cursor position. You can either pass a + single <code>{line, ch}</code> object, or the line and the + character as two separate parameters.</dd> + <dt id="setSelection"><code>setSelection(start, end)</code></dt> + <dd>Set the selection range. <code>start</code> + and <code>end</code> should be <code>{line, ch}</code> objects.</dd> + + <dt id="getLine"><code>getLine(n) → string</code></dt> + <dd>Get the content of line <code>n</code>.</dd> + <dt id="setLine"><code>setLine(n, text)</code></dt> + <dd>Set the content of line <code>n</code>.</dd> + <dt id="removeLine"><code>removeLine(n)</code></dt> + <dd>Remove the given line from the document.</dd> + + <dt id="getRange"><code>getRange(from, to) → string</code></td> + <dd>Get the text between the given points in the editor, which + should be <code>{line, ch}</code> objects.</dd> + <dt id="replaceRange"><code>replaceRange(string, from, to)</code></dt> + <dd>Replace the part of the document between <code>from</code> + and <code>to</code> with the given string. <code>from</code> + and <code>to</code> must be <code>{line, ch}</code> + objects. <code>to</code> can be left off to simply insert the + string at position <code>from</code>.</dd> + + <dt id="posFromIndex"><code>posFromIndex(index) → object</code></dt> + <dd>Calculates and returns a <code>{line, ch}</code> object for a + zero-based <code>index</code> who's value is relative to the start of the + editor's text. If the <code>index</code> is out of range of the text then + the returned object is clipped to start or end of the text + respectively.</dd> + <dt id="indexFromPos"><code>indexFromPos(object) → number</code></dt> + <dd>The reverse of <a href="#posFromIndex"><code>posFromIndex</code></a>.</dd> + </dl> + + <p>The following are more low-level methods:</p> + + <dl> + <dt id="operation"><code>operation(func) → result</code></dt> + <dd>CodeMirror internally buffers changes and only updates its + DOM structure after it has finished performing some operation. + If you need to perform a lot of operations on a CodeMirror + instance, you can call this method with a function argument. It + will call the function, buffering up all changes, and only doing + the expensive update after the function returns. This can be a + lot faster. The return value from this method will be the return + value of your function.</dd> + + <dt id="refresh"><code>refresh()</code></dt> + <dd>If your code does something to change the size of the editor + element (window resizes are already listened for), or unhides + it, you should probably follow up by calling this method to + ensure CodeMirror is still looking as intended.</dd> + + <dt id="getInputField"><code>getInputField() → textarea</code></dt> + <dd>Returns the hiden textarea used to read input.</dd> + <dt id="getWrapperElement"><code>getWrapperElement() → node</code></dt> + <dd>Returns the DOM node that represents the editor. Remove this + from your tree to delete an editor instance.</dd> + <dt id="getScrollerElement"><code>getScrollerElement() → node</code></dt> + <dd>Returns the DOM node that is responsible for the sizing and + the scrolling of the editor. You can change + the <code>height</code> and <code>width</code> styles of this + element to resize an editor. (You might have to call + the <a href="#refresh"><code>refresh</code></a> method + afterwards.)</dd> + <dt id="getGutterElement"><