Question

我正在尝试将PF扩展CKEditor置于像Accordion这样的结构中，除非选中，否则它将被隐藏。将它放入手风琴或模态中是行不通的，因为编辑器没有正确渲染，只能渲染没有任何控制的textarea等。下面的代码显示了使用模态的尝试。我也尝试将编辑器直接放在acordion面板中，但结果相同。是否有可能将编辑器放在这个或类似的结构中？

<!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://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:composition template="../WEB-INF/templates/template-main.xhtml" >        
        <ui:define name="content">           
            <b:row rendered="#{Login.user.team.project != null}">
               <b:column span="3">                   
                   <b:panel id="doc-panel" look="primary" title="Dokumente" collapsible="false">
                       <b:listLinks>
                           <c:forEach items="#{ProjectBacking.documents}" var="document">
                               <b:navLink value="#{document.documentName}" update="currentChapters" 
                                          >                                                                          
                                   <f:ajax listener="#{ProjectBacking.setCurrentDocumentAndChapters(document.documentName)}" 
                                           render="currentChapters" execute="@this"/>
                               </b:navLink>

                           </c:forEach>
                       </b:listLinks>                       
                   </b:panel>
               </b:column>                   
                <b:column span="9" id="currentChapters">                                         
                    <b:accordion>
                        <c:forEach items="#{ProjectBacking.currentChapters}" var="chapter">
                            <b:panel id="panel-#{chapter.chapterOrder}"  title="#{chapter.chapterOrder}. #{chapter.chapterName}" collapsible="true" collapsed="true">
                                <b:row rendered="#{ProjectBacking.testContent == null or ProjectBacking.testContent.equals('')}">
                                    <b:column span="12">
                                        <h:outputText value="Sie haben haben für dieses Kapitel bisher keine Inhalte erstellt." />
                                    </b:column>
                                    <b:column span="4" />
                                    <b:column span="4">
                                        <b:button value="Inhalte Erstellen"
                                          look="success"
                                          styleClass="full-width"
                                          onclick="$('.modal-edit-content').modal();return false;"/>
                                    </b:column>
                                    <b:column span="4"/>
                                </b:row>                                                                                                
                            </b:panel>
                        </c:forEach>                                                    
                    </b:accordion>
                </b:column>            
           </b:row>
            <b:modal class="modal-edit-content">
                <b:row>
                    <b:column span="12">
                        <h:form>
                            <pe:ckEditor 
                                         value="#{ProjectBacking.testContent}">
                                <p:ajax event="save" listener="#{ProjectBacking.testMethod}" update="currentChapters" />
                            </pe:ckEditor>
                        </h:form>
                    </b:column>
                </b:row>
            </b:modal>            
        </ui:define>
    </ui:composition>
</html>

Answer 1

你可以给你的bootstrap模态一个id并在模态“show”事件中初始化CKEditor，使用widgetVar属性和primefaces javascript，如下所示：

<b:modal id="popup" class="modal-edit-content">
    <b:row>
        <b:column span="12">
            <h:form>
                <pe:ckEditor value="#{ProjectBacking.testContent}" widgetVar="ckeditor">
                    <p:ajax event="save" listener="#{ProjectBacking.testMethod}" update="currentChapters" />
                </pe:ckEditor>
            </h:form>
        </b:column>
    </b:row>
</b:modal>

并使用bootstrap 3事件如下

$(document).ready(function() {
    $('#popup').on('shown.bs.modal', function() {
        PF('ckeditor').init(PF('ckeditor'));
    })
})

您可以对其他容器使用相同的想法

pe：ckEditor b：accordion / b：模态或类似结构

1 个答案: