我将 Summernote 与 JSF 结合使用，如下所示:
<div class="form-group">
<label>Texto</label>
<h:inputTextarea value="#{cursoMB.questao.questao.texto}"
disabled="#{cursoMB.questao == null}"
styleClass="summernote form-control" />
</div>
我的 JavaScript:
jQuery('.summernote').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: false // set focus to editable area after initializing summernote
});
一切正常，但是当我执行以下commandLink时，summernote消失了，在没有设计的简单inputTextArea中进行了转换:
<h:commandLink actionListener="#{cursoMB.inserirQuestao()}"
styleClass="btn btn-default" title="clique para inserir a questão">
<f:ajax execute="@this" render="divTeste divQuestao"
onevent="function(data) { if (data.status === 'success') {
document.getElementById('inputTextOrdemQuestao').focus() } }" />
<i class="fa fa-plus fa-fw"></i>
</h:commandLink>
我注意到发生这种情况是因为 ajax 再次渲染我的页面。我该如何解决这个问题？
最佳答案
造成此问题的原因是 JavaScript 操作的 HTML 片段被原始服务器生成的 HTML 替换，而之后又没有再次进行 JS 操作。
你基本上有两个选择:
不要使用 ajax 更新 JS 操作的 HTML 片段。只需显式更新真正需要更新的部分，例如只有
<h:message>与输入字段关联的组件。或者，如果这不是一个选项，例如因为您需要重新显示提交的值，因为您正在使用某些转换器来操作提交的值，那么当该 HTML 片段被 ajax 更新时，您需要显式地重新执行该 JS 操作。在您的具体情况下，归结为调用
jQuery('.summernote').summernote(...)再次期间success事件。
另请参阅:
关于jquery - ajax更新后Summernote消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28796296/