Board index JavaServer Faces Extensions Problem with plugin Lite in ckeditor

Problem with plugin Lite in ckeditor

Community Driven Extensions Project


Posts: 2
Hello
I'm trying to load te plugin Lite (track changes - http://ckeditor.com/addon/lite - version 1.2.26) in the ckeditor of primefaces, but I get errors (JSF 2.2). This is a part of my pom

                <dependency>
         <groupId>org.primefaces</groupId>
         <artifactId>primefaces</artifactId>
         <version>6.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.primefaces.extensions/primefaces-extensions -->
      <dependency>
         <groupId>org.primefaces.extensions</groupId>
         <artifactId>primefaces-extensions</artifactId>
         <version>6.0.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.primefaces.extensions/resources-ckeditor -->
      <dependency>
         <groupId>org.primefaces.extensions</groupId>
         <artifactId>resources-ckeditor</artifactId>
         <version>6.0.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
      <!-- nodig voor primefaces extensions -->
      <dependency>
         <groupId>com.google.code.gson</groupId>
         <artifactId>gson</artifactId>
         <version>2.2.4</version>
      </dependency>

      <!-- http://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
      <dependency>
         <groupId>org.apache.commons</groupId>
         <artifactId>commons-lang3</artifactId>
         <version>3.4</version>
      </dependency>


I've put the Lite-folder under

WebContent > resources > primefaces-extensions > ckeditor > plugins

In Lite we have plugins.js and a css-folder and a js-folder

In my xhtml I have this code

      <pe:ckEditor value="#{dossierWaarde.waarde}" width="890" id="textarea" customConfig="#{URL_BASIS}resources/primefaces-extensions/ckeditor/ckeditor_trackaccept.js">
         <p:ajax event="focus" listener="#{dossierEditManager.setBewaard(false)}" limitRender="true" update="_:knoppen" />
         <p:ajax event="blur" listener="#{dossierEditManager.saveDossierWaarde(dossierWaarde,dossierVeld)}" limitRender="true"
            update="_:autobewaar" partialSubmit="true" />
         <p:ajax event="change" update="teller" limitRender="true" />
         <f:attribute name="maximum" value="#{dossierVeld.MAXLENGTE}" />
      </pe:ckEditor>


In ckeditor_trackaccept.js

CKEDITOR.editorConfig = function(config) {
   
   var lite = config.lite = config.lite || {};
   config.extraPlugins = 'lite';
   
   config.toolbar = [
         {
            name : 'basicstyles',
            items : [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ]
         }, {
            name : 'paragraph',
            items : [ 'NumberedList', 'BulletedList' ]
         }, {
            name : 'tools',
            items : [ 'Maximize' ]
         }, {
            name : 'lite',
            items : [ 'lite_AcceptOne', 'lite_AcceptAll', '-',
                  'lite_RejectOne', 'lite_RejectAll', '-',
                  'lite_ToggleTracking', 'lite_ToggleShow' ]
         }, {
            name : 'clipboard',
            items : [ 'Undo', 'Redo' ]
         } ];

   lite.isTracking = true;

   // these are the default tooltip values. If you want to use this default
   // configuration, just set lite.tooltips = true;
   lite.tooltips = true;

   lite.userName = $.urlParam('naam');
   lite.userId = $.urlParam('id');

   config.enterMode = CKEDITOR.ENTER_P;
   config.title = false;

   config.lite.tooltips = {
      show : true,
      path : "js/opentip-adapter.js",
      classPath : "OpentipAdapter",
      cssPath : "css/opentip.css",
      delay : 500
   };
};

$.urlParam = function(name) {
   var results = new RegExp('[\?&]' + name + '=([^&#]*)')
         .exec(window.location.href);
   if (results == null) {
      return null;
   } else {
      return results[1] || 0;
   }
};


These are the errors I get

GET http://localhost:8080/oliad/javax.faces.resource/ckeditor/plugins/lite/.vo?ln=primefaces-extensions&v=6.0.0lite-includes.js
GET http://localhost:8080/oliad/javax.faces.resource/ckeditor/plugins/lite/.vo?ln=primefaces-extensions&v=6.0.0js/opentip-adapter.js

Unable to create tooltip handler OpentipAdapter[ plugin.js.vo?ln=primefaces-extensions&v=6.0.0:1229]

Uncaught TypeError: Cannot read property 'InlineChangeEditor' of undefined
    at e._afterReady (plugin.js.vo?ln=primefaces-extensions&v=6.0.0:759)

GET http://localhost:8080/oliad/javax.faces.resource/ckeditor/plugins/lite/.vo?ln=primefaces-extensions&v=6.0.0css/opentip.css
plugin.js.vo?ln=primefaces-extensions&v=6.0.0:641

GET http://localhost:8080/oliad/javax.faces.resource/ckeditor/plugins/lite/.vo?ln=primefaces-extensions&v=6.0.0css/lite.css
plugin.js.vo?ln=primefaces-extensions&v=6.0.0:641


As you can see there is something strange with the url's

GET http://localhost:8080/oliad/javax.faces.resource/ckeditor/plugins/lite/.vo?ln=primefaces-extensions&v=6.0.0lite-includes.js

Is there anyone who can help me with this?
Regards, Barbara

tandraschko PrimeFaces Core Developer

Posts: 3052
Location: Bavaria, DE

I think the plugin doesn't use the CKEDITOR_GETURL correclty.
The reason why the weird url occurs can be found here: https://github.com/primefaces-extensions/core/pull/39
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/


Posts: 2
Thanks for you respone. Do you know another way to include track changes in primefaces? I don't think that is a standard option in the primefaces texteditor.


Posts: 103
I don't think there is any default track change in the p:editor either. I believe p:editor is based on Quill: http://quilljs.com/

So you can investigate whether Quill supports it or not?
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces 6.0 / PF Extensions 6.0.0

tandraschko PrimeFaces Core Developer

Posts: 3052
Location: Bavaria, DE

p:editor = CLEditor
p:textEditor = Quill
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/


Return to Extensions