From 99f904adcc37d93c90defcd8ce898598e25be212 Mon Sep 17 00:00:00 2001 From: Hugues Hiegel Date: Wed, 11 Mar 2015 16:55:04 +0100 Subject: Lot of plugins --- codemirror_ui/index.html | 340 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 340 insertions(+) create mode 100644 codemirror_ui/index.html (limited to 'codemirror_ui/index.html') diff --git a/codemirror_ui/index.html b/codemirror_ui/index.html new file mode 100644 index 0000000..d09647b --- /dev/null +++ b/codemirror_ui/index.html @@ -0,0 +1,340 @@ + + + + + CodeMirror UI | Test Page + + + + + + + + + + + + + + + + + +
+

CodeMirror UI

+ +

+ CodeMirrorUI is a simple interface written by Jeremy Green to act as a + wrapper around the CodeMirror text editor widget by Marijn Haverbeke. + CodeMirror is a syntax highlighter and formatter that makes it much easier to edit source code in a browser. + ComeMirrorUI is a wrapper that adds interface functionality for many functions that are already built into CodeMirror itself. + Functionality includes undo, redo, jump to line, reindent selection, and reindent entire document. + Two options for find/replace are also available. It is based on the MirrorFrame example that Marijn included with CodeMirror. +

+

+ This editor is enabled with the pop up find/replace widget. +

+ + + + +

Easily Configurable

+ +

+ The editor above was created with code like this: +

+ + 
+//first set up some variables
+var textarea = document.getElementById('code1');
+var uiOptions = { path : 'js/', searchMode : 'popup' }
+var codeMirrorOptions = { mode: "javascript" }
+
+//then create the editor
+var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
+ +

+ Creating a new CodeMirrorUI is easy, you just call: +

+ 
new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
+ +

Params for new CodeMirrorUI()

+ +

Installing

+ +

+ To install CodeMirrorUI you can just copy the codemirror-ui directory into your web app. + It includes a version of CodeMirror, or you can use your own version if you'd prefer. +

+

+ Then include a link to the stylesheet and javascript files in your document. Something like this: +

+ +
+// First the CodeMirror stuff
+<script src="lib/CodeMirror-2.3/lib/codemirror.js" type="text/javascript"></script>
+<script src="lib/CodeMirror-2.3/lib/util/searchcursor.js" type="text/javascript"></script>
+<link rel="stylesheet" href="lib/CodeMirror-2.3/lib/codemirror.css">
+<script src="lib/CodeMirror-2.3/mode/javascript/javascript.js"></script>
+<link rel="stylesheet" href="lib/CodeMirror-2.3/mode/javascript/javascript.css">
+
+//Then the CodeMirrorUI stuff
+<script src="js/codemirror-ui.js" type="text/javascript"></script>
+<link rel="stylesheet" href="css/codemirror-ui.css" type="text/css" media="screen" />
+
+ +

+ Note: The find/replace functionality relies on the searchcursor add on. +

+ +

+ From there you can create an editor as shown above. It is especially easy to replace any calls to + "CodeMirror.fromTextArea(...)" with a "new CodeMirrorUI(...)". +

+ +

Another example

+ +

+ This editor is enabled with a save button and the 'inline' search widget. + You can pass a function as the 'saveCallback' option which will be called when the save button is clicked. +

+

+ The button for the popup search widget has been removed, + along with the button for 'reindent selection'. +

+ + +

+ The uiOptions param for the editor above looks like this: +

+ + +
+var uiOptions = {
+  path : 'js/',
+  searchMode = 'inline',
+  buttons : ['save','undo','redo','jump','reindent','about'],
+  saveCallback : function(){ alert("Some saving goes here.  Probably AJAX or something fancy."); }
+}
+
+ +

+ View the source of this page to see the actual code used to get these editors in action. +

+ + +

Find the code @ Github

+ https://github.com/jagthedrummer/codemirror-ui + +

Acknowledgements

+

Marijn Haverbeke - CodeMirror

+

+ Thanks to Marijn Haverbeke for creating and releasing CodeMirror in the first place. + Whithout his excellent contribution to the community this project would have no reason to exist. +

+ +

Mark James - Silk Icons

+

+ I used the Silk icon set from Mark James of famfamfam.com fame. +

+ +

Versions

+

+ All version up to and including 0.0.7 are based on CodeMirror 1. +

+

+ Versions 0.0.8 and newer are based on CodeMirror 2. +

+ +

License

+ +

+ CodeMirror UI is provided under the MIT License. See the LICENSE file for full details. +

+ +

Known Usage

+

+ The following sites/apps are using CodeMirrorUI. + Please let me know if you'd like to be added to this list. +

+ +
+ + + + + + + + + + -- cgit v1.2.3