Problem with plugin Lite in ckeditor

Community Driven Extensions Project
Post Reply
barbarabxl
Posts: 2
Joined: 10 Jan 2017, 16:12

11 Jan 2017, 12:27

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

Code: Select all

                <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

Code: Select all

		<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

Code: Select all

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

Code: Select all

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 ... s/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: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

11 Jan 2017, 14:36

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
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

barbarabxl
Posts: 2
Joined: 10 Jan 2017, 16:12

13 Jan 2017, 15:36

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.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

14 Jan 2017, 16:00

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 Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

14 Jan 2017, 16:54

p:editor = CLEditor
p:textEditor = Quill
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

gallaman
Posts: 1
Joined: 01 May 2014, 00:30

17 Oct 2017, 23:37

I have exactly the same problem and I think it prevents any customization of ckeditor as provided by PF except for that provided as attributes in the tag. I need image paste and resize plugins that work great but ckeditor cannot load them due to the plugin URL mangling. In my JS console I get a 404 for:

https://<domain>:<port>/<app context>/javax.faces.resource/ckeditor/pastebase64/plugin.js.xhtml?ln=primefaces-extensions&v=6.1.1

... while, sadly, if you browse to the URL with the query string removed:

https://<domain>:<port>/<app context>/javax.faces.resource/ckeditor/pastebase64/plugin.js.xhtml

you get the plugin JS just fine.

Has anybody come up with a workaround for this?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

18 Oct 2017, 13:39

I would open an issue here on our GitHub issues reporting exactly what you stated above.

https://github.com/primefaces-extension ... com/issues
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

18 Oct 2017, 14:06

-1

we don't know wheter it's a "internal" plugin or plugin added in same other library by the user.

Therefore your have to use "primefaces-extensions" as root directory for your ckeditor plugin resources.
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

18 Oct 2017, 14:28

So is it possible if they make their root directory the same as primefaces-extensions or are you saying custom plugins are just not possible?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

18 Oct 2017, 14:58

It should work if the resources is equals to primefaces-extensions, yes.
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests