CCM NG: Integration of ccm-editor with Bebop

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5204 8810af33-2d31-482b-a856-94f89814c4df
ccm-docs
jensp 2018-01-18 19:20:47 +00:00
parent f99fbf108d
commit 831e4ce400
8 changed files with 129 additions and 75 deletions

View File

@ -1,8 +1,8 @@
requirejs(["./ccm-editor",
"../node_modules/requirejs-domready/domReady!"],
"../webjars/requirejs-domready/2.0.1/domReady!"],
function(editor, doc) {
editor.addEditor(".editor", {
editor.addEditor(".editor-textarea", {
"actionGroups": [
{
"name": "blocks",
@ -40,6 +40,8 @@ requirejs(["./ccm-editor",
}
],
"settings": {
"ccm-editor-css.path": "/libreccm/ccm-editor/ccm-editor.css",
"font-awesome.path": "/libreccm/webjars/font-awesome/4.7.0/css/font-awesome.min.css",
"formatBlock.blocks": [
{
"element": "h3",

View File

@ -23,7 +23,6 @@ import com.arsdigita.bebop.parameters.ParameterModel;
import com.arsdigita.bebop.parameters.StringParameter;
import org.arsdigita.cms.CMSConfig;
import org.librecms.contentsection.ContentSection;
/**
*

View File

@ -83,7 +83,7 @@ public class CMSConfig {
*/
@Setting
private List<String> dhtmlEditorConfig = Arrays.asList(new String[]{
"Xinha.Config", "/assets/xinha/CCMcmsCinhaConfig.js"});
"ccm-editor.loader", "/ccm-editor/ccm-editor-loader.js"});
/**
* Defines which plugins to use, e.g.TableOperations,CSS Format:

View File

@ -70,13 +70,14 @@ public final class BebopConfig {
private Set<String> dhtmlEditors = new HashSet<>(
Arrays.asList(new String[]{BebopConstants.BEBOP_XINHAEDITOR,
BebopConstants.BEBOP_FCKEDITOR,
BebopConstants.BEBOP_DHTMLEDITOR}));
BebopConstants.BEBOP_DHTMLEDITOR,
BebopConstants.BEBOP_CCMEDITOR}));
@Setting
private String defaultDhtmlEditor = BebopConstants.BEBOP_XINHAEDITOR;
private String defaultDhtmlEditor = BebopConstants.BEBOP_CCMEDITOR;
@Setting
private String dhtmlEditorSrcFile = "/assets/xinha/XinhaLoader.js";
private String dhtmlEditorSrcFile = "/ccm-editor/ccm-editor-loader.js";
@Setting
private Boolean showClassName = false;

View File

@ -30,24 +30,29 @@ import com.arsdigita.web.Web;
import com.arsdigita.xml.Element;
/**
* Displays and manages a WYSIWYG HTML editor that takes advantage of DHTML scripting features. This
* class can use: - <a href="http://www.xinha.org>Xinha</a>
* - <a href="http://www.fckeditor.net">FCKeditor</a>
* - HTMLarea for backwards compatibility, development discontinued Editor is choosen based on the
* config parameter waf.bebop.dhtml_editor, default is "Xinha", which is the successor of HTMLarea
* Displays and manages a WYSIWYG HTML editor that takes advantage of DHTML
* scripting features. This class can use:
* <ul>
* <li>CCM Editor, a new editor using HTML5 features.</li>
* <li><a href="http://www.xinha.org">Xinha</a></li>
* <li><a href="http://www.fckeditor.net">FCKeditor</a></li>
* <li>HTMLarea for backwards compatibility, development discontinued</li>
* </ul>
* Editor is chosen based on the configuration parameter
* {@code waf.bebop.dhtml_editor} default is {@code ccm-editor}.
*
* @author Jim Parsons
* @author Richard Li
* @author Chris Burnett
* @author Alan Pevec
* @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
*
* @version $Id$
*/
public class DHTMLEditor extends TextArea {
/**
* Constant for specifying <tt>OFF</tt> value for the <tt>WRAP</tt> attribute of this image
* input.
* Constant for specifying <tt>OFF</tt> value for the <tt>WRAP</tt>
* attribute of this image input.
*
* See <a href="http:
* //developer.netscape.com/docs/manuals/htmlguid/tags10.htm#1340340">here</a>
@ -56,8 +61,8 @@ public class DHTMLEditor extends TextArea {
public static final int OFF = 0;
/**
* Constant for specifying <tt>HARD</tt> value for the <tt>WRAP</tt> attribute of this image
* input.
* Constant for specifying <tt>HARD</tt> value for the <tt>WRAP</tt>
* attribute of this image input.
*
* See <a href="http://
* developer.netscape.com/docs/manuals/htmlguid/tags10.htm#1340340">here</a>
@ -66,8 +71,8 @@ public class DHTMLEditor extends TextArea {
public static final int HARD = 1;
/**
* Constant for specifying <tt>SOFT</tt> value for the <tt>WRAP</tt> attribute of this image
* input. See <a href="http://
* Constant for specifying <tt>SOFT</tt> value for the <tt>WRAP</tt>
* attribute of this image input. See <a href="http://
* developer.netscape.com/docs/manuals/htmlguid/tags10.htm#1340340">here</a>
* for a description of what this attribute does.
*/
@ -80,22 +85,31 @@ public class DHTMLEditor extends TextArea {
// WARNING: Processing of these default values by CMSConfig does NOT
// work correctly because of deviciencies in unmarshal method there.
public static final Config STANDARD = new Config("Xinha.Config",
"/assets/xinha/CCMcoreXinhaConfig.js");
public static final Config XINHA_STANDARD = new Config("Xinha.Config",
"/assets/xinha/CCMcoreXinhaConfig.js");
/**
* Example FCKEditor configuration.
*/
public static final Config FCK_STANDARD = new Config("FCKEditor.Config.StyleDefault",
"/assets/fckeditor/config/fckconfigstyledefault.js");
public static final Config FCK_STANDARD = new Config(
"FCKEditor.Config.StyleDefault",
"/assets/fckeditor/config/fckconfigstyledefault.js");
public static final Config FCK_CMSADMIN = new Config("FCKEditor.Config.StyleCMSAdmin",
"/assets/fckeditor/config/fckconfigstylecmsadmin.js");
public static final Config FCK_CMSADMIN = new Config(
"FCKEditor.Config.StyleCMSAdmin",
"/assets/fckeditor/config/fckconfigstylecmsadmin.js");
/**
* Example old HTMLarea configuration.
*/
public static final Config HTMLAREA = new Config("HTMLArea.Config", null);
public static final Config HTMLAREA
= new Config("HTMLArea.Config", null);
/**
* Example of configuration for ccm-editor
*/
public static final Config STANDARD = new Config("ccm-editor.loader",
"/ccm-editor/ccm-editor-loader.js");
private String m_name;
private String m_path;
@ -183,7 +197,7 @@ public class DHTMLEditor extends TextArea {
public String getEditorURL() {
return BebopConfig.getConfig().getDhtmlEditorSrcFile().substring(
0,
0,
BebopConfig.getConfig().getDhtmlEditorSrcFile().lastIndexOf("/") + 1);
}
@ -211,7 +225,8 @@ public class DHTMLEditor extends TextArea {
/**
* Prevent the specified button from being displayed in the editor toolbar.
*
* @param name name of the button, as specified in the btnList of the htmlarea.js file
* @param name name of the button, as specified in the btnList of the
* htmlarea.js file
*
*/
public void hideButton(String name) {
@ -261,7 +276,8 @@ public class DHTMLEditor extends TextArea {
/**
* The XML tag.
*
* @return The tag to be used for the top level DOM element generated for this type of Widget.
* @return The tag to be used for the top level DOM element generated for
* this type of Widget.
*/
@Override
protected String getElementTag() {
@ -284,9 +300,12 @@ public class DHTMLEditor extends TextArea {
editor.addAttribute("name", getName());
generateDescriptionXML(state, editor);
// Set the needed config params so they don't have to be hardcoded in the theme
editor.addAttribute("editor_url", Web.getWebappContextPath().concat(getEditorURL()));
editor.addAttribute("editor_src", Web.getWebappContextPath().concat(getEditorSrc()));
// Set the needed config params so they don't have to be hardcoded in
//the theme
editor.addAttribute("editor_url",
Web.getWebappContextPath().concat(getEditorURL()));
editor.addAttribute("editor_src",
Web.getWebappContextPath().concat(getEditorSrc()));
if (value != null) {
editor.setText(value);
@ -297,7 +316,8 @@ public class DHTMLEditor extends TextArea {
Element config = editor.newChildElement("bebop:config", BEBOP_XML_NS);
config.addAttribute("name", m_config.getName());
if (m_config.getPath() != null) {
config.addAttribute("path", Web.getWebappContextPath().concat(m_config.getPath()));
config.addAttribute("path", Web.getWebappContextPath().concat(
m_config.getPath()));
}
if (m_hiddenButtons.size() > 0) {
@ -314,7 +334,8 @@ public class DHTMLEditor extends TextArea {
Iterator plugins = m_plugins.iterator();
while (plugins.hasNext()) {
String name = (String) plugins.next();
Element plugin = editor.newChildElement("bebop:plugin", BEBOP_XML_NS);
Element plugin = editor
.newChildElement("bebop:plugin", BEBOP_XML_NS);
plugin.addAttribute("name", name);
}
}

View File

@ -19,9 +19,8 @@
package com.arsdigita.bebop.util;
/**
* An interface that contains all the Bebop
* constants that are used by Bebop components in generating the
* output XML.
* An interface that contains all the Bebop constants that are used by Bebop
* components in generating the output XML.
*
* @author Jim Parsons
* @version $Id: BebopConstants.java 1224 2006-06-18 22:28:30Z apevec $
@ -29,38 +28,39 @@ package com.arsdigita.bebop.util;
public interface BebopConstants {
String BEBOP_CHECKBOXGROUP = "bebop:checkboxGroup";
String BEBOP_CHECKBOX = "bebop:checkbox";
String BEBOP_DATE = "bebop:date";
String BEBOP_DATETIME = "bebop:datetime";
String BEBOP_TIME = "bebop:time";
String BEBOP_MULTISELECT = "bebop:multiSelect";
String BEBOP_OPTION = "bebop:option";
String BEBOP_RADIOGROUP = "bebop:radioGroup";
String BEBOP_RADIO = "bebop:radio";
String BEBOP_SELECT = "bebop:select";
String BEBOP_TEXTAREA = "bebop:textarea";
String BEBOP_DHTMLEDITOR = "bebop:dhtmleditor";
String BEBOP_FCKEDITOR = "bebop:fckeditor";
String BEBOP_XINHAEDITOR = "bebop:xinha";
String BEBOP_FORMWIDGET = "bebop:formWidget";
String BEBOP_FORMERRORS = "bebop:formErrors";
String BEBOP_PORTAL = "bebop:portal";
String BEBOP_PORTLET = "bebop:portlet";
String BEBOP_BOXPANEL = "bebop:boxPanel";
String BEBOP_CELL = "bebop:cell";
String BEBOP_COLUMNPANEL = "bebop:columnPanel";
String BEBOP_GRIDPANEL = "bebop:gridPanel";
String BEBOP_BORDER = "bebop:cell";
String BEBOP_PAD = "bebop:pad";
String BEBOP_PADFRAME = "bebop:padFrame";
String BEBOP_PANELROW = "bebop:panelRow";
String BEBOP_LIST = "bebop:list";
String BEBOP_TABLE = "bebop:table";
String BEBOP_TABLEBODY = "bebop:tbody";
String BEBOP_TABLEROW = "bebop:trow";
String BEBOP_SEG_PANEL = "bebop:segmentedPanel";
String BEBOP_SEGMENT = "bebop:segment";
String BEBOP_SEG_BODY = "bebop:segmentBody";
String BEBOP_SEG_HEADER = "bebop:segmentHeader";
String BEBOP_CHECKBOX = "bebop:checkbox";
String BEBOP_DATE = "bebop:date";
String BEBOP_DATETIME = "bebop:datetime";
String BEBOP_TIME = "bebop:time";
String BEBOP_MULTISELECT = "bebop:multiSelect";
String BEBOP_OPTION = "bebop:option";
String BEBOP_RADIOGROUP = "bebop:radioGroup";
String BEBOP_RADIO = "bebop:radio";
String BEBOP_SELECT = "bebop:select";
String BEBOP_TEXTAREA = "bebop:textarea";
String BEBOP_DHTMLEDITOR = "bebop:dhtmleditor";
String BEBOP_FCKEDITOR = "bebop:fckeditor";
String BEBOP_XINHAEDITOR = "bebop:xinha";
String BEBOP_CCMEDITOR = "bebop:ccmeditor";
String BEBOP_FORMWIDGET = "bebop:formWidget";
String BEBOP_FORMERRORS = "bebop:formErrors";
String BEBOP_PORTAL = "bebop:portal";
String BEBOP_PORTLET = "bebop:portlet";
String BEBOP_BOXPANEL = "bebop:boxPanel";
String BEBOP_CELL = "bebop:cell";
String BEBOP_COLUMNPANEL = "bebop:columnPanel";
String BEBOP_GRIDPANEL = "bebop:gridPanel";
String BEBOP_BORDER = "bebop:cell";
String BEBOP_PAD = "bebop:pad";
String BEBOP_PADFRAME = "bebop:padFrame";
String BEBOP_PANELROW = "bebop:panelRow";
String BEBOP_LIST = "bebop:list";
String BEBOP_TABLE = "bebop:table";
String BEBOP_TABLEBODY = "bebop:tbody";
String BEBOP_TABLEROW = "bebop:trow";
String BEBOP_SEG_PANEL = "bebop:segmentedPanel";
String BEBOP_SEGMENT = "bebop:segment";
String BEBOP_SEG_BODY = "bebop:segmentBody";
String BEBOP_SEG_HEADER = "bebop:segmentHeader";
}

View File

@ -145,7 +145,13 @@ export class CCMEditor {
const headElem: Element = document.getElementsByTagName("head").item(0);
const styleElem: Element = document.createElement("link");
styleElem.setAttribute("rel", "stylesheet");
styleElem.setAttribute("href", "libreccm-editor.css");
if ("ccm-editor-css.path" in this.configuration.settings) {
styleElem
.setAttribute("href",
this.configuration.settings["ccm-editor-css.path"]);
} else {
styleElem.setAttribute("href", "ccm-editor.css");
}
headElem.appendChild(styleElem);
//Check if Fontawesome is already loaded. If not add it
@ -153,7 +159,15 @@ export class CCMEditor {
const fontawesomeElem: Element = document.createElement("link");
fontawesomeElem.setAttribute("rel", "stylesheet");
fontawesomeElem.setAttribute("href", "node_modules/font-awesome/css/font-awesome.min.css");
if ("font-awesome.path" in this.configuration.settings) {
fontawesomeElem
.setAttribute("href",
this.configuration.settings["font-awesome.path"]);
} else {
fontawesomeElem
.setAttribute("href",
"node_modules/font-awesome/css/font-awesome.min.css");
}
headElem.appendChild(fontawesomeElem);
}
@ -186,7 +200,7 @@ export class CCMEditor {
console.log("Selection changed.");
const selection: Selection = document.getSelection();
for(const key in this.actions) {
this.actions[key].selectionChanged(selection);
}
}

View File

@ -43,7 +43,7 @@
<xsl:variable name="first-match">
<xsl:value-of select="//bebop:dhtmleditor/@name"/>
</xsl:variable>
<xsl:if test="@name=$first-match">
<xsl:if test="@name=$first-match">
<script type="text/javascript">
_editor_url = "/assets/htmlarea/";
@ -267,7 +267,7 @@
<xsl:value-of select="//bebop:xinha/@name"/>
</xsl:variable>
<xsl:if test="@name=$first-match">
<xsl:if test="@name=$first-match">
<script type="text/javascript">
_editor_url = "<xsl:value-of select="@editor_url"/>";
@ -320,4 +320,21 @@
<xsl:value-of disable-output-escaping="no" select="text()"/>
</textarea>
</xsl:template>
<xsl:template match="bebop:ccmeditor">
<script data-main="{@editor_src}"
src="{$context-prefix}/webjars/requirejs/2.3.5/require.min.js" />
<textarea id="ta_{@name}"
name="{@name}"
class="editor-textarea"
rows="{@rows}"
cols="{@cols}"
wrap="{@wrap}">
<xsl:value-of disable-output-escaping="no"
select="text()" />
</textarea>
</xsl:template>
</xsl:stylesheet>