PrimeFaces富文本编辑器转换为普通的inputTextArea

时间:2011-12-16 10:33:14

标签: primefaces

我想问一下,如果我使用PrimeFaces富文本编辑器而不是显示富文本编辑器,有时会发生什么,它显示正常的inputTextArea。我想知道Rich Text Editor未显示的原因是什么。为什么它显示普通文本区域而不是富文本区域?我的Javascript也启用了。请告诉我原因。

由于

编辑:


这是我的代码

<?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://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.prime.com.tr/ui"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>

        <ui:composition template="./WEB-INF/templates/layout.xhtml">
            <ui:define name="title">Add City Images</ui:define>
            <ui:define name="content">

            <h:form id="cityDetailForm" prependId="false" >

                <p:growl id="messages" showDetail="true" life="2000"> </p:growl>

                <p:panel id="panel1"
                         style="border-color: #000000;width: 954px;position: absolute;left: 150px;height: 450px;-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(../PIE/PIE.htc)">

                    <strong Class="MainHeader">
                        <p:spacer width="10"/> City Detail
                    </strong>

                    <h:panelGrid columns="5"
                                 border=""
                                 width="20%"
                                 style="position: absolute; top: 50px;"
                                 columnClasses="asteriskColumns, nameColumns" >

                        <h:outputText value="*" />
                        <h:outputText value="Map: " />
                        <p:fileUpload id="cityMap"
                                      description="Image"
                                      update="city messages"
                                      allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                                      auto="true"
                                      fileUploadListener="#{cityDetail.imageUpload}" >

                        </p:fileUpload>

                        <p:graphicImage id="city"
                                        value="#{cityDetail.imagePath}"
                                        width="80"
                                        height="50"
                                        cache="false">

                            <f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />

                        </p:graphicImage>

                        <h:commandLink value="remove"
                                       title="Remove Picture"
                                       style="color: #0d5b7f;text-decoration: underline"
                                       onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">

                            <f:ajax event="click"
                                    render="city"
                                    listener="#{cityDetail.removeImage}"/>

                         </h:commandLink>

                         .....

                    </h:panelGrid>

                    <h:panelGrid columns="1"
                                 border=""
                                 width="60%"
                                 style="position: absolute; top: 40px;left: 350px;height: 410px ">

                        <p:editor value="#{cityDetail.CKeditorValue}" widgetVar="editor" width="600"/>

                    </h:panelGrid>

                    <h:commandButton id="preview"
                                     value="Preview"
                                     action="#{cityDetail.preview}"
                                     style="position: absolute; top: 470px; left: 400px"
                                     styleClass="ButtonStyle" />

                    <h:commandButton id="save"
                                     value="Save"
                                     actionListener="#{cityDetail.sendImagesToDatabase}"
                                     action="#{cityDetail.save}"
                                     style="position: absolute; top: 470px; left: 475px;"
                                     styleClass="ButtonStyle">

                    </h:commandButton>

                    <h:commandButton id="cancel"
                                     value="Cancel"
                                     action="#{cityDetail.cancel}"
                                     style="position: absolute; top: 470px; left: 550px;"
                                     styleClass="ButtonStyle" />
                      <link type="text/css" rel="stylesheet" href="css/jquery.modaldialog1.css"/>
            <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
            <script language="javascript" type="text/javascript" src="js/jquery.modaldialog.js"></script>
            <h:commandButton id="YesAfterSaveBtn" onclick="$(dialogmask).hide();$(dialog).hide()"  action="#{cityDetail.goBack}"  style="background-color: #e6eff6;border: #e6eff6"></h:commandButton>
            <h:outputText value="#{cityDetail.errorScript}" escape="false"/>

                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</h:body>

enter image description here

你可以看到我正在使用Prime Faces编辑器,但它显示我inputTextArea。虽然我没有尝试解决方案,但这就是我要求的。

感谢

1 个答案:

答案 0 :(得分:1)

尝试以下

设置<f:view contentType="text/html"/>

如以下主题论坛p:editor like h:inputTextArea

的主题中所述