pe:ckEditor В пределах b: аккордеон / b: модальная или подобная структура

Я пытаюсь поместить PKE Extension CKEditor в какую-то Структуру, такую ​​как Аккордеон, которая скрыта, если не выбрана. Помещение его в аккордеон или модал не работает, потому что редактор не отображается должным образом, а только отображает текстовую область без каких-либо элементов управления. Код ниже показывает попытку с модальным. Я также пытался иметь редактор непосредственно в панелях аккордеона, но тот же результат. Есть ли возможность поместить редактор в эту или похожую структуру?

<!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>
Источник

1 ответ

Вы можете присвоить модальности своей начальной загрузки идентификатор и инициализировать CKEditor в модальном событии "show", используя атрибут widgetVar и javascript primefaces следующим образом:

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

и использовать событие начальной загрузки 3 следующим образом

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

Вы можете использовать ту же идею с другими контейнерами

Источник
Другие вопросы по тегам