pe：ckEditor b：accordion/b：モーダルまたは同様の構造

私はPF拡張CKEditorをアコーディオンのような構造内に配置しようとしています。エディターが正しくレンダリングされないため、アコーディオンまたはモーダルにするのは機能しませんが、コントロールのないテキストエリアのみをレンダリングします。以下のコードは、モーダルでの試行を示しています。私はまた、エディタをアコーデオンのパネル内に直接持っていこうとしましたが、同じ結果が出ました。エディタをこのような構造内に配置する可能性はありますか？pe：ckEditor b：accordion/b：モーダルまたは同様の構造

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

出典

2016-05-31 manban

あなたがIDをモーダルとモーダル「ショー」イベントusignにCKEditorバージョンを初期化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')); 
    }) 
})

他のコンテナでも同じ考えを使用できます。

出典

2016-08-11 19:00:57

pe：ckEditor b：accordion/b：モーダルまたは同様の構造

答えて

関連する問題