Primefaces CKeditor won't render

Question

I'm attempting to use Primefaces extensions CKeditor and am not able to get it to work. All of the similar questions on SO were caused by not including resource-ckeditor, I have done that. I get a javascript error in the browser, that is likely related. The below code renders a size adjustable text area box only.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <f:view>
    <h:body>
        <h:form>
        <pe:ckEditor id="editor" value="Test">  
        </pe:ckEditor>
        </h:form>
    </h:body>
    </f:view>
</html>

This is my POM

<dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.1</version>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>6.1.0</version>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>resources-ckeditor</artifactId>
            <version>6.1.0</version>
        </dependency>

This is the error I get in the browser

test.xhtml:8 Uncaught ReferenceError: $ is not defined

And this is the relevant HTML code outputted to the browser

<h:inputText></h:inputText><textarea id="editor" name="editor">test</textarea><script id="editor_s" type="text/javascript">$(function(){PrimeFaces.cw("ExtCKEditor","widget_editor",{id:"editor",height:"200px",width:"600px",readOnly:false,advancedContentFilter:true});});</script>

I'm completely baffled to why this is not working, it seems like everything is right.

$ is not defined means you may have forgotten to import an appropriate jQuery library. — Tiny
@Tiny, thanks - that must mean JSF or Primefaces is broken somewhere since I think those frameworks are supposed to handle that. Either that or Maven is not downloading required dependencies maybe? — JHRS

Jaqen H'ghar Jaqen H'ghar · Accepted Answer · 2017-05-20T08:20:27

I believe there must be at least 1 Primefaces component on the page in order to trigger Primefaces to inject the resources (js, css) to the head.

Try putting something in there, for example

<p:outputLabel style="display:none"/>

and add the namespace (xmlns:p="http://primefaces.org/ui") too.

Primefaces CKeditor won't render

1 Answers