CODEWITHSUNDEEP
jsfprimefacesckeditorprimefaces-extensions
JHRS
JHRS

Reputation: 365

Primefaces CKeditor won't render

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.

Upvotes: 1

Views: 833

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 4345

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.

Upvotes: 1

Related Questions