PrimeFaces extension: ckEditor throws error in console "Uncaught TypeError: this.jq.ckeditor is not a function"

Community Driven Extensions Project
Post Reply
arslan.anwaar
Posts: 2
Joined: 04 Aug 2021, 14:41

04 Aug 2021, 14:50

Hi,
I am using Primefaces 10.0.0 and Primefaces extension 10.0.2, Following is my gradle import

implementation group: 'org.primefaces', name: 'primefaces', version: '10.0.0'
implementation group: 'org.primefaces.extensions', name: 'primefaces-extensions', version: '10.0.2'
implementation group: 'org.primefaces.extensions', name: 'resources-ckeditor', version: '10.0.2'


To use the ckEditor, I also included resources-ckeditor.

Following is my xhtml code:

<?xml version="1.0"?>

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
<h:outputScript library="primefaces-extensions" name="ckeditor/ckeditor-widget.js" />
</h:head>
<h:body>
<h:outputText value="Data Entry Tempaltes" />
<h:form id="form">
<pe:ckEditor id="editor2" enterMode="CKEDITOR.ENTER_BR" font='Courier New' fontSize='11px' skin="office2013">
<!-- <p:ajax event="save" listener="#{editorController.saveListener}" update="growl" /> -->
</pe:ckEditor>
</h:form>
</h:body>
</f:view>


But when I load my page, it throws following error in browser console.
Uncaught TypeError: this.jq.ckeditor is not a function

Can anyone please help me here to use ckEditor.

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

05 Aug 2021, 13:53

It works for me. Download this reproducer I just made
https://github.com/primefaces-extension ... editor.zip

Unzip it and run "mvn clean jetty:run" and then navigate to http://localhost:8080/primefaces-test/test.xhtml
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

arslan.anwaar
Posts: 2
Joined: 04 Aug 2021, 14:41

10 Aug 2021, 19:29

Thanks Melloware providing the test code.

But just to add here that we are using Liferay portal 7.3 GA7.
Following are the libraries included in our build.gradle

dependencies {
providedCompile group: 'javax.enterprise', name: 'cdi-api', version: '1.2'
providedCompile group: 'javax.faces', name: 'javax.faces-api', version: '2.2'
runtime group: 'org.glassfish', name: 'javax.faces', version: '2.2.20'
runtime group: 'com.liferay.faces', name: 'com.liferay.faces.bridge.ext', version: '6.1.0'
runtime group: 'com.liferay.faces', name: 'com.liferay.faces.bridge.impl', version: '4.2.0'
compile group: 'log4j', name: 'log4j', version: '1.2.17'

compileOnly group: "com.liferay.portal", name: "release.portal.api"

compile group: 'org.primefaces', name: 'primefaces', version: '10.0.0'

implementation group: 'org.primefaces.extensions', name: 'primefaces-extensions', version: '10.0.3'
implementation group: 'org.primefaces.extensions', name: 'resources-ckeditor', version: '10.0.3'
}


Can you please tell us what are we missing here

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

10 Aug 2021, 19:57

Your gradle looks fine to me. So I would compare my XHTML in my working code to your XHTML.
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

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests