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-bundle-devel-wildfly-web/src/main/webapp/ccm-editor/ccm-editor-loader.js

@@ -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",

ccm-cms/src/main/java/com/arsdigita/cms/ui/CMSDHTMLEditor.java

@@ -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;
 
 /**
  *

ccm-cms/src/main/java/org/arsdigita/cms/CMSConfig.java

@@ -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:

ccm-core/src/main/java/com/arsdigita/bebop/BebopConfig.java

@@ -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;

ccm-core/src/main/java/com/arsdigita/bebop/form/DHTMLEditor.java

@@ -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
+ * Displays and manages a WYSIWYG HTML editor that takes advantage of DHTML
- * class can use: - <a href="http://www.xinha.org>Xinha</a>
+ * scripting features. This class can use:
- * - <a href="http://www.fckeditor.net">FCKeditor</a>
+ * <ul>
- * - HTMLarea for backwards compatibility, development discontinued Editor is choosen based on the
+ * <li>CCM Editor, a new editor using HTML5 features.</li>
- * config parameter waf.bebop.dhtml_editor, default is "Xinha", which is the successor of HTMLarea
+ * <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
+     * Constant for specifying <tt>OFF</tt> value for the <tt>WRAP</tt>
-     * input.
+     * 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
+     * Constant for specifying <tt>HARD</tt> value for the <tt>WRAP</tt>
-     * input.
+     * 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
+     * Constant for specifying <tt>SOFT</tt> value for the <tt>WRAP</tt>
-     * input. See <a href="http://
+     * 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",
+        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",
+        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",
+        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;
@@ -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
+        // Set the needed config params so they don't have to be hardcoded in 
-        editor.addAttribute("editor_url", Web.getWebappContextPath().concat(getEditorURL()));
+        //the theme
-        editor.addAttribute("editor_src", Web.getWebappContextPath().concat(getEditorSrc()));
+        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);
         }
     }

ccm-core/src/main/java/com/arsdigita/bebop/util/BebopConstants.java

@@ -19,9 +19,8 @@
 package com.arsdigita.bebop.util;
 
 /**
- * An interface that contains all the Bebop
+ * An interface that contains all the Bebop constants that are used by Bebop
- * constants that are used by Bebop components in generating the
+ * components in generating the output XML.
- * output XML.
  *
  * @author Jim Parsons
  * @version $Id: BebopConstants.java 1224 2006-06-18 22:28:30Z apevec $
@@ -42,6 +41,7 @@ public interface BebopConstants {
     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";

ccm-editor/src/main/typescript/ccm-editor/ccm-editor.ts

@@ -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);
         }
 

ccm-theme-foundry/src/main/resources/themes/foundry/foundry/lib/bebop/editors.xsl

@@ -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>