Hey there, I'm encountering an issue with the TinyMCE editor. Whenever I try to open a modal dialog, the TinyMCE doesn't render properly.
Take a look at my code:
$(document).ready(function() {
jQuery('.tinymce').on('show',function(e){
initTinymce();
});
});
function initTinymce(){
tinymce.init({
selector: ".tinymce",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
}
This is how it appears in my page:
<div class="form-group">
<label>Conteúdo *</label>
<h:inputTextarea value="#{cursoMB.paginaConteudo.conteudo}"
id="conteudo" required="true"
requiredMessage="O conteúdo é obrigatório"
styleClass="form-control tinymce">
</h:inputTextarea>
</div>
Here's the AJAX call I'm making:
<h:commandButton styleClass="btn btn-default" type="button"
value="Criar Página"
actionListener="#{cursoMB.novaPaginaConteudo()}">
<f:passThroughAttribute name="data-toggle" value="modal" />
<f:passThroughAttribute name="data-target"
value="#modalDialogPagina" />
<f:ajax execute="@this" render="modalPagina" />
</h:commandButton>
Any ideas on how I can resolve this issue?
EDIT 1
I also attempted to use jsf.ajax.addOnEvent but that didn't work either. The TinyMCE is still not rendering properly (console.log shows normally):
$(document).ready(function() {
initTinymce();
jsf.ajax.addOnEvent(ajaxHandleTinymce);
});
function ajaxHandleTinymce(data){
console.log('ajaxHandle');
initTinymce();
}
function initTinymce(){
tinymce.init({
selector: ".tinymce",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
}