pe: ckEditor Innerhalb b: Akkordeon/b: modale oder ähnliche Struktur

Ich versuche, den PF Extension CKEditor innerhalb einer Struktur wie Accordion zu platzieren, die ausgeblendet ist, wenn sie nicht ausgewählt wird. Putting es in ein Akkordeon oder modal funktioniert nicht, weil der Editor nicht richtig gerendert wird, sondern nur eine Textarea ohne Steuerelemente ect. Der folgende Code zeigt den Versuch mit einem Modal. Ich habe auch versucht, den Editor direkt in den Acordion Panels zu haben, aber das gleiche Ergebnis. Gibt es eine Möglichkeit, den Editor in diese oder eine ähnliche Struktur zu bringen?pe: ckEditor Innerhalb b: Akkordeon/b: modale oder ähnliche Struktur

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

Quelle

2016-05-31 manban

Sie Ihre Bootstrap-modal eine ID geben kann und die CKEditor in der modal "show" Ereignis usign widgetVar Attribut und primefaces Javascript initialisieren wie folgt:

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

und Bootstrap-3-Ereignis verwenden, wie

folgt

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

Sie die gleiche Idee mit anderen Behältern verwenden können

Quelle

2016-08-11 19:00:57

pe: ckEditor Innerhalb b: Akkordeon/b: modale oder ähnliche Struktur

Antwort

Verwandte Themen