title: Can't show <pe:ckEditor/> on my XHTML page
body: <p>I'd like to integrate pe:ckeditor to my XHTML page.
  After googling, I found this helpful link
   <strong>www.primefaces.org/showcase-ext/sections/ckEditor/multipleEditors.jsf</strong></p>
  
  <p>The Bean class is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>package com.esprit.util;
  
  import java.io.Serializable;
  
  import javax.faces.application.FacesMessage;
  import javax.faces.bean.ManagedBean;
  import javax.faces.bean.ViewScoped;
  import javax.faces.context.FacesContext;
  
  @ManagedBean  
  @ViewScoped  
  public class EditorController implements Serializable {  
    
      private static final long serialVersionUID = 20111020L;  
    
      private String content;  
      private String secondContent;  
      private String color = "#33fc14";  
    
      public EditorController() {  
          content = "Hi Showcase User";  
          secondContent = "This is a second editor";  
      }  
    
      public void saveListener() {  
          content = content.replaceAll("\\r|\\n", "");  
    
          final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Content",  
                      content.length() &gt; 150 ? content.substring(0, 100) : content);  
    
          FacesContext.getCurrentInstance().addMessage(null, msg);  
      }  
    
      public void secondSaveListener() {  
          secondContent = secondContent.replaceAll("\\r|\\n", "");  
    
          final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Second Content",  
                  secondContent.length() &gt; 150 ? secondContent.substring(0, 100) : secondContent);  
    
          FacesContext.getCurrentInstance().addMessage(null, msg);  
      }  
    
      public void changeColor() {  
          if (color.equals("#1433FC")) {  
              color = "#33fc14";  
          } else {  
              color = "#1433FC";  
          }  
      }  
    
      // Getters &amp; Setters
  }  </code></pre>
  </div>
  </div>
  </p>
  
  <p>The page XHTML is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pe="http://primefaces.org/ui/extensions"&gt;
      &lt;body&gt;
   &lt;h:form&gt;
       &lt;p:growl id="growl" showDetail="true" /&gt;  
              &lt;pe:ckEditor id="editor" 
      value="#{editorController.content}" 
             toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"&gt;  
                  &lt;p:ajax event="save" listener="#{editorController.saveListener()}" update="growl"/&gt;  
              &lt;/pe:ckEditor&gt; 
       &lt;br/&gt;  
              &lt;br/&gt;  
              &lt;pe:ckEditor id="secondEditor" 
                 value="#{editorController.secondContent}" 
                        toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"&gt;  
                  &lt;p:ajax event="save" listener="#{editorController.secondSaveListener()}" update="growl"/&gt;  
              &lt;/pe:ckEditor&gt;
   &lt;/h:form&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The added this to file web.xml:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;context-param&gt;
      &lt;param-name&gt;
          org.primefaces.extensions.DELIVER_UNCOMPRESSED_RESOURCES
      &lt;/param-name&gt;
      &lt;param-value&gt;false&lt;/param-value&gt;
  &lt;/context-param&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After running my project: I got this <a href="https://i.stack.imgur.com/2GkHe.png" rel="nofollow noreferrer">screenshot</a>.
  As you see, I didn't have the same editor as displayed by the tutorial: I have an Editor without Header.</p>
  
  <p>Have you please any idea about solving this. Any proposition is appreciated. Thanks a lot.</p>