pe:ckEditor Within b:accordion / b:modal or similar structure

Question

I'm trying to put the PF Extension CKEditor within some Structure like Accordion, which is hidden unless selected. Putting it into an accordion or modal doesn't work, because the editor is not rendered properly, but only renders a textarea without any controls ect. The code below shows the attempt with a modal. I also tried to have the editor directly within the acordion panels, but same result. Is there any possibility to put the editor within this or some similar structure?

<!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>

score 1 · Answer 1 · answered Aug 11 '16 at 19:00

you can give your bootstrap modal an id and initialize the CKEditor in the modal "show" event usign widgetVar attribute and primefaces javascript as follows:

<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>

and use bootstrap 3 event as follows

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

you can use the same idea with other containers

pe:ckEditor Within b:accordion / b:modal or similar structure

1 Answers1