html.master.html Maven / Gradle / Ivy
Show all versions of geomajas-project-codemirror-gwt-documentation
Geomajas Codemirror GWT wrapper project
The Geomajas Codemirror GWT Project is a stand-alone project under
the Geomajas banner. Its goal is to provide an easy way to allow you to
integrate the excellent Codemirror Javascript library into your own GWT
applications
The codemirror project can be included as a GWT module. Add dependency in pom.xml:
<dependency>
<groupId>org.geomajas.project</groupId>
<artifactId>geomajas-project-codemirror-gwt</artifactId>
<version>latestVersion</version>
</dependency>
In your application .gwt.xml file, include the codemirror module:
<inherits name='org.geomajas.codemirror.CodeMirror'/>
As from version 3.13.0, GWT 2.7.0 is used. This requires codemirror script files to be included directly into the
index.html page of your application. Add this section to the html page, where gwtModuleReference
needs to be replaced by your GWT application module's name
(e.g. for example project, gwtModuleReference is org.geomajas.codemirror.Example)
<!-- scripts for codemirror START -->
<script type="text/javascript" language="javascript" src="gwtModuleReference/lib/codemirror.js"></script>
<script type="text/javascript" language="javascript" src="gwtModuleReference/mode/xml/xml.js"></script>
<script type="text/javascript" language="javascript" src="gwtModuleReference/mode/css/css.js"></script>
<script type="text/javascript" language="javascript" src="gwtModuleReference/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" language="javascript" src="gwtModuleReference/addon/edit/closetag.js"></script>
<script type="text/javascript" language="javascript" src="gwtModuleReference/addon/fold/collapserange.js"></script>
<!-- scripts for codemirror END -->
Remark: be sure to include end tags as provided. Do not use <script.../>, as some browsers will fail on this.
Look at the ExampleEntryPoint class in the example project for a
basic use of the codemirror panel.
The initial configuration can be set with the Config object.
<br></br>
It behaves like a key-value set, most common keys are provided as
static strings in the Config class. See the codemirror website for a
detailed description of what all these options do.
You can also change these options live once the widget is created by
getting the wrapper object from the panel:
CodeMirrorPanel panel = new CodeMirrorPanel();
...
CodeMirrorWrapper editor = panel.getEditor();
editor.setOption(Config.MODE, "json");
Some convenience setters and getters are provided. The most important
one of which will be the 'getContent()'
which retrieves the text that
was typed into the editor.
CodeMirrorPanel panel = new CodeMirrorPanel();
...
CodeMirrorWrapper editor = panel.getEditor();
String result =
editor.getContent();
If you wish to use a custom theme or addon, the best place to add the is your 'Application.gwt.xml'.
Add them like you would any other javascript or css resource.<br></br>
Look at the codemirror samples and just add the same js and css resources to your module.
<?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name='com.google.gwt.user.User' />
<inherits name="com.google.gwt.i18n.I18N"/>
<script src="lib/codemirror.js" />
<script src="mode/xml/xml.js" />
<script src="mode/css/css.js" />
<script src="mode/htmlmixed/htmlmixed.js" />
<script src="addon/edit/closetag.js" />
<script src="addon/fold/collapserange.js" />
<stylesheet src="lib/codemirror.css" />
<stylesheet src="codemirrorCustom.css" />
</module>
PS: these are the resources that are already provided, no need to include them again.