CCM NG: Documentation for the ccm-editor module
git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5202 8810af33-2d31-482b-a856-94f89814c4dfccm-docs
jensp
parent
305328eccd
commit
a9a8c36a13
|
|
@ -0,0 +1,159 @@
|
||||||
|
The CCM Editor modul
|
||||||
|
--------------------
|
||||||
|
|
||||||
|
# Overview
|
||||||
|
|
||||||
|
The CCM Editor modules provides a simple HTML editor written in TypeScript
|
||||||
|
for use in the backend of LibreCCM. TypeScript is super set of JavaScript.
|
||||||
|
Along with features from the newest versions ECMA Script standard which are not
|
||||||
|
yet implemented by the browsers it also is a strongly typed programming
|
||||||
|
language. This helps to avoid some types of mistakes which can easily occur
|
||||||
|
For more information about TypeScript please
|
||||||
|
refer to the the [TypeScript homepage](http://www.typescriptlang.org).
|
||||||
|
The TypeScript compiler (or better transpiler) creates JavaScript from
|
||||||
|
TypeScript.
|
||||||
|
|
||||||
|
In addition to TypeScript this module also uses NPM as package manager for
|
||||||
|
JavaScript libraries and Grunt as a TaskRunner. To build this module
|
||||||
|
you don't need to install any of these tools.
|
||||||
|
They are integrated
|
||||||
|
into the build process of Maven by the
|
||||||
|
[frontend-maven-plugin](https://github.com/eirslett/frontend-maven-plugin).
|
||||||
|
This plugin for Maven downloads and installs an local copy of NPM, invokes
|
||||||
|
NPM to download the dependencies using NPM and calls Grunt to run the
|
||||||
|
TypeScript compiler.
|
||||||
|
|
||||||
|
The editor uses the `contenteditable` attribute from HTML 5 also with several
|
||||||
|
other features. Modern browsers provide almost necessary basic funtions for
|
||||||
|
an editor, this module only provides a UI for them.
|
||||||
|
|
||||||
|
Supported browsers are:
|
||||||
|
|
||||||
|
* Mozilla Firefox (52 and later)
|
||||||
|
* Google Chrome (58 and later)
|
||||||
|
* Microsoft Edge (all versions)
|
||||||
|
* Apple Safari (10 and later)
|
||||||
|
* other based WebKit Browsers should also work (with recent versions of WebKit)
|
||||||
|
|
||||||
|
# Integration into a bundle
|
||||||
|
|
||||||
|
To integrate the editor into a bundle first declare a dependency to the
|
||||||
|
`ccm-editor` module in the `pom.xml` file of the bundle:
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.libreccm</groupId>
|
||||||
|
<artifactId>ccm-editor</artifactId>
|
||||||
|
<version>${project.parent.version}</version>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
In the Maven module of bundle which generates the WAR part in add the following
|
||||||
|
the to configuration of the `maven-war-plugin`:
|
||||||
|
|
||||||
|
...
|
||||||
|
<build>
|
||||||
|
...
|
||||||
|
<plugins>
|
||||||
|
<plugin>
|
||||||
|
<groupId>org.apache.maven.plugins</groupId>
|
||||||
|
<artifactId>maven-war-plugin</artifactId>
|
||||||
|
<configuration>
|
||||||
|
<overlays>
|
||||||
|
<overlay>
|
||||||
|
<groupId>org.libreccm</groupId>
|
||||||
|
<artifactId>ccm-editor</artifactId>
|
||||||
|
<type>jar</type>
|
||||||
|
</overlay>
|
||||||
|
...
|
||||||
|
</overlays>
|
||||||
|
</configuration>
|
||||||
|
...
|
||||||
|
</plugin>
|
||||||
|
</plugins>
|
||||||
|
...
|
||||||
|
</build>
|
||||||
|
...
|
||||||
|
|
||||||
|
In the WAR module add a folder `ccm-editor` to the `src/main/webapp` folder
|
||||||
|
and create a file similar to the following one:
|
||||||
|
|
||||||
|
requirejs(["./ccm-editor",
|
||||||
|
"../node_modules/requirejs-domready/domReady!"],
|
||||||
|
function(editor, doc) {
|
||||||
|
|
||||||
|
editor.addEditor(".editor", {
|
||||||
|
"actionGroups": [
|
||||||
|
{
|
||||||
|
"name": "blocks",
|
||||||
|
"title": "Format blocks",
|
||||||
|
"actions": [
|
||||||
|
editor.FormatBlockAction
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "format-text",
|
||||||
|
"title": "Format text",
|
||||||
|
"actions": [
|
||||||
|
editor.MakeBoldAction,
|
||||||
|
editor.MakeItalicAction,
|
||||||
|
editor.MakeUnderlineAction,
|
||||||
|
editor.StrikeThroughAction,
|
||||||
|
editor.SubscriptAction,
|
||||||
|
editor.SuperscriptAction,
|
||||||
|
editor.RemoveFormatAction,
|
||||||
|
editor.InsertExternalLinkAction
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "insert-list",
|
||||||
|
"title": "Insert list",
|
||||||
|
"actions": [
|
||||||
|
editor.InsertUnorderedListAction,
|
||||||
|
editor.InsertOrderedListAction
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "html",
|
||||||
|
"title": "HTML",
|
||||||
|
"actions": [editor.ToggleHtmlAction]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {
|
||||||
|
"formatBlock.blocks": [
|
||||||
|
{
|
||||||
|
"element": "h3",
|
||||||
|
"title": "Heading 3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"element": "h4",
|
||||||
|
"title": "Heading 4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"element": "h5",
|
||||||
|
"title": "Heading 5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"element": "h6",
|
||||||
|
"title": "Heading 6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"element": "p",
|
||||||
|
"title": "Paragraph"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
This will load the editor using `require.js` (the editor is provided as a
|
||||||
|
AMD JavaScript module) and call the wrapped function when the DOM tree is ready.
|
||||||
|
The function calls the `addEditor` function from the editor module and applies
|
||||||
|
the editor to all `textarea` elements with the class `.editor`. The parameter
|
||||||
|
is a CSS selector which you can modify according to your needs.
|
||||||
|
|
||||||
|
The editor is initialised with a configuration. The configuration is described
|
||||||
|
at the [configuration](configuration.html) page. The editor itself has no
|
||||||
|
hardcoded functions. Instead all controls in its toolbar are provided as
|
||||||
|
(TypeScript) classes which can be added by the configuration. The editor
|
||||||
|
module provides several standard actions like formated block elements. Please
|
||||||
|
refer to the [Standard Actions](actions.html) for more information about these
|
||||||
|
actions.
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<project xmlns="http://maven.apache.org/DECORATION/1.3.0"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/DECORATION/1.3.0
|
||||||
|
http://maven.apache.org/xsd/decoration-1.3.0.xsd">
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<menu name="Parent project">
|
||||||
|
<item name="LibreCCM" href="../index.html"/>
|
||||||
|
</menu>
|
||||||
|
|
||||||
|
<menu name="Overview">
|
||||||
|
<item name="The CCM Editor" href="index.html"/>
|
||||||
|
</menu>
|
||||||
|
|
||||||
|
<menu ref="reports"/>
|
||||||
|
</body>
|
||||||
|
</project>
|
||||||
|
|
||||||
Loading…
Reference in New Issue