Не удается показать <pe: ckEditor /> на моей странице XHTML

Я хотел бы интегрировать pe: ckeditor на мою страницу XHTML. После прибегая к помощи, я нашел эту полезную ссылку www.primefaces.org/showcase-ext/sections/ckEditor/multipleEditors.jsfНе удается показать <pe: ckEditor /> на моей странице XHTML

Класс Бин:

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() > 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() > 150 ? secondContent.substring(0, 100) : secondContent); 
 
    
 
     FacesContext.getCurrentInstance().addMessage(null, msg); 
 
    } 
 
    
 
    public void changeColor() { 
 
     if (color.equals("#1433FC")) { 
 
      color = "#33fc14"; 
 
     } else { 
 
      color = "#1433FC"; 
 
     } 
 
    } 
 
    
 
    // Getters & Setters 
 
}

Страница XHTML:

<!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: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"> 
 
    <body> 
 
\t <h:form> 
 
\t  <p:growl id="growl" showDetail="true" /> 
 
      <pe:ckEditor id="editor" 
 
\t \t \t value="#{editorController.content}" 
 
\t \t   toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"> 
 
       <p:ajax event="save" listener="#{editorController.saveListener()}" update="growl"/> 
 
      </pe:ckEditor> 
 
\t  <br/> 
 
      <br/> 
 
      <pe:ckEditor id="secondEditor" 
 
      \t \t value="#{editorController.secondContent}" 
 
      \t   toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"> 
 
       <p:ajax event="save" listener="#{editorController.secondSaveListener()}" update="growl"/> 
 
      </pe:ckEditor> 
 
\t </h:form> 
 
    </body> 
 
</html>

Добавленная это файл web.xml:

<context-param> 
 
    <param-name> 
 
     org.primefaces.extensions.DELIVER_UNCOMPRESSED_RESOURCES 
 
    </param-name> 
 
    <param-value>false</param-value> 
 
</context-param>

После запуска моего проекта: Я получил эту screenshot. Как вы видите, у меня не было такого же редактора, как показано в уроке: у меня есть редактор без заголовка.

У вас возникли какие-либо идеи по решению этого вопроса. Любое предложение оценивается. Большое спасибо.

источник

2017-02-19 Elisabeth

показать свой код, так что мы можем помочь вам больше – ArgaPK

Привет @argaPK, спасибо много для вашего внимания, я сделал изменения по моему вопросу, не могли бы вы взглянуть?. Спасибо заранее – Elisabeth

взгляните на мой ответ. – ArgaPK

Дополнительно к атрибуту toolbar что @ArgaPK Вы должны:

Убедитесь, что эти необходимые банки существуют:
- Обще-ю-2.4.jar
- Обще-lang3-3.5.jar
- gson-2.2.4.jar
- primefaces-6.0 .jar
- primefaces-extensions-6.0.0.jar
- resources-ckeditor-6.0.0.баночка
Обновление ваш XHTML, добавив <h:head/>

<!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: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"> 
 
    <h:head/> 
 
    <h:body> 
 
    \t <h:form style="width: 800px; margin: 0 auto;"> 
 
    \t  <p:growl id="growl" showDetail="true" /> 
 
    \t  <pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"> 
 
    \t   <p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/> 
 
    \t  </pe:ckEditor> 
 
    \t  <br/> 
 
    \t  <br/> 
 
    \t  <pe:ckEditor id="secondEditor" value="#{editorController.secondContent}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"> 
 
    \t   <p:ajax event="save" listener="#{editorController.secondSaveListener}" update="growl"/> 
 
    \t  </pe:ckEditor> 
 
     </h:form> 
 
    </h:body> 
 
</html>

HTH

источник

2017-02-22 22:16:59 saria

Большое спасибо @Saria за вашу помощь, я забыл , теперь это работает. – Elisabeth

Вы должны добавить атрибут toolbar

<p:growl id="growl" showDetail="true" /> 
    <pe:ckEditor id="editor" value="#{editorController.content}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"> 
    <p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/> 
    </pe:ckEditor 
    <br/> 
    <br/> 
    <pe:ckEditor id="secondEditor" value="#{editorController.secondContent}" toolbar="[['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt']]"> 
    <p:ajax event="save" listener="#{editorController.secondSaveListener}" update="growl"/> 
    </pe:ckEditor>

и добавьте следующую зависимость также:

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

см эту ссылку helfull Getting started with primefaces extensions

источник

2017-02-19 18:56:25 ArgaPK

Спасибо, сэр за вашу помощь, я добавил необходимые зависимости, представленные на мой вопрос. теперь после запуска я получаю скриншот, который поделился с моим вопросом, если вы не возражаете, не могли бы вы взглянуть? Большое спасибо. – Elisabeth

удалите все банки, кроме строк и расширений прайс-листов. – ArgaPK

Вы успешно использовали расширение первичных элементов, прежде чем реализовать этот пример? – ArgaPK

Не удается показать <pe: ckEditor /> на моей странице XHTML

ответ

Смежные вопросы