【问题标题】:Can't show <pe:ckEditor/> on my XHTML page无法在我的 XHTML 页面上显示 <pe:ckEditor/>
【发布时间】:2017-02-19 18:33:05
【问题描述】:

我想将 pe:ckeditor 集成到我的 XHTML 页面中。 谷歌搜索后,我发现这个有用的链接 www.primefaces.org/showcase-ext/sections/ckEditor/multipleEditors.jsf

Bean 类是:

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>
	<h:form>
	    <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>
	</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。 如您所见,我没有教程中显示的相同编辑器:我有一个没有标题的编辑器。

您有任何解决此问题的想法吗?任何提议都值得赞赏。非常感谢。

【问题讨论】:

  • 显示您的代码,以便我们为您提供更多帮助
  • 您好@argaPK,非常感谢您的关注,我对我的问题进行了更改,请您看看吗?提前致谢
  • 看看我的回答。
  • 感谢@ArgaPK 先生的快速回复,但是现在,我运行后无法显示任何内容,我得到了一个白页。我对我的问题做了一些修改,如果可能的话,请你看看。非常感谢。
  • 首先只需添加工具栏属性并删除我在答案中告诉你的依赖项。

标签: primefaces primefaces-extensions


【解决方案1】:

除了@ArgaPK 提到的属性toolbar,您还必须:

  • 验证这些所需的 jar 是否存在:
    • commons-io-2.4.jar
    • commons-lang3-3.5.jar
    • gson-2.2.4.jar
    • primefaces-6.0.jar
    • primefaces-extensions-6.0.0.jar
    • resources-ckeditor-6.0.0.jar
  • 通过添加 &lt;h:head/&gt; 更新您的 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">
    <h:head/>
    <h:body>
  	<h:form style="width: 800px; margin: 0 auto;">
    	    <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>
        </h:form>
    </h:body>
</html>

HTH

【讨论】:

  • 非常感谢@Saria 的帮助,我忘了,现在它也可以了。
  • primefaces-extensions和resource-ckeditor的版本应该和primefaces一样?
【解决方案2】:

你必须添加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>

查看此完整链接 Getting started with primefaces extensions

【讨论】:

  • 感谢先生的帮助,我添加了问题中提出的所需依赖项。现在运行后,我获得了关于我的问题的屏幕截图,如果您不介意,请看一下?非常感谢。
  • 删除除 primefaces 和 primefaces 扩展之外的所有 jar
  • 在实现这个例子之前你有没有成功使用过primefaces扩展??
  • 您好先生,感谢您的回复。不,这是我第一次使用 primefaces 扩展。我删除了除 primefaces 和 primefaces 扩展之外的所有 jar,我得到了没有标题的编辑器,正如我在我的问题中分享的那样。我不知道为什么。非常感谢先生。
  • 现在你必须添加依赖项,我已经用依赖项更新了答案。
猜你喜欢
  • 2021-11-30
  • 2020-01-03
  • 2012-07-10
  • 2020-10-20
  • 2015-05-06
  • 2021-07-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多