【发布时间】: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