b:accordion /b中的pe:ckEditor :模式或类似结构
b:accordion /b中的pe:ckEditor :模式或类似结构
提问于 2016-05-31 23:47:22
我试图将PF扩展CKEditor放在一些结构中，比如Accordion，除非被选中，否则它是隐藏的。把它放到一个手风琴或模式中是行不通的，因为编辑器没有正确地渲染，而只是渲染了一个没有任何控件的文本区。下面的代码显示了使用模态的尝试。我也试着让编辑器直接在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>回答 1
Stack Overflow用户
发布于 2016-08-12 03:00:57
你可以给你的引导模式一个id，并在模式"show“event usign widgetVar属性和primefaces javascript中初始化CKEditor，如下所示：
<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'));
})
})您可以对其他容器使用相同的想法
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37550237
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号