Codemirror Use Daquan

Codemirror is an editor text box textarea code highlighting JavaScript plugin that implements keywords, functions, variables, and other code highlighting for a variety of programming languages, rich APIs and extensible features, and multiple theme styles to meet the needs of your various projects.

Codemirror supports a wide range of language syntax highlighting, including C, C + +, C #, Java, Perl, PHP, JavaScript, Python, Lua, Go, Groovy, Ruby, and more, as well as diff, LaTeX, SQL, wiki, Markdown and other file formats. In addition, Codemirror supports code autocomplete, search/replace, HTML previews, line numbers, selection/Search result highlighting, Visual tab, Emacs/vim key bindings, code auto-formatting, and more.

Codemirror has been integrated into various applications such as the Adobe Brackets, Codev, light table and other development environments using the MIT open Source license, and is also used as a variety of SQL, Haxe, JavaScript Online Editor's base library to use.

Codemirror developers recently released the 3.0 version. This version has made some improvements, and if you use previous versions, you need to be aware that there are some incompatibilities between the APIs in 3.0 and 2.0, see the Upgrade Wizard for more information. Moreover, it is important that 3.0 give up support for IE7.

How to use

This article will do a brief introduction to how to use the Codemirror plugin and submit a form.

Introducing Core Files

1. <link rel= "stylesheet" href= "Lib/codemirror.css" >
2. <script src= "Lib/codemirror.js" ></script>

The CODEMIRROR.CSS and codemirror.js files are the core files of the Codemirror plug-in, and the two files are introduced regardless of the language of the code you want to highlight.

Introduce code highlighting JS

The next file to be introduced can be introduced according to your project requirements, without having to introduce all the files, for example, if you want to display HTML code, then introduce:

1. <script src= "Xml.js" ></script>

Code calls

1. <script>
2. Mytextarea = document.getElementById ("code");
3. var editor = Codemirror.fromtextarea (Mytextarea, {
4. Mode: "Text/html"
5. });
6. </script>

Mytextarea for your editor DOM element ID, generally use the document.getElementById ("code") method to get the text box, if you use jquery, then you need to add [0] after the code, such as $ (' #code ') [0] ；

Gets the value of the Codemirror

1. The result of this method is the escaped data
2. Editor.getvalue ();

1. The result of this method is that the data is not escaped
2. Editor.totextarea ();
3. Editor.gettextarea (). value;

If the form is submitted via JS, it can be used in the JS code submitted:

1. Assign the contents of the Codemirror to Textarea
2. $ ("#content"). Text (Editor.getvalue ());

Codemirror Assignment Value

1.editor.setvalue (' Assign value to Codemirror ');

Codemirror Events Change Event main code 　

　　Editor.on("change", function (Editor, changes) {

　　　　　　while (changes) {

　　　　　　Editor1.replaceRange(changes.text.join("\n"), changes.from, changes.to);

< Span class= "function" > changes = Changes.next;

< EM id= "__mcedel" >  }

　　});

changes.nextNot every change event will have

 

Project Address: http://codemirror.net/

Online User's Manual: http://codemirror.net/doc/manual.html

GitHub Address: Https://github.com/marijnh/codemirror

Codemirror Use Daquan