Problem with toolbar of p:textEditor in p:dialog Post Reply

[duongthuan]

Hi everyone,

I've put the p:textEditor in a p:dialog in this way:
CODE: SELECT ALL
<p:dialog widgetVar="creacionDialog" modal="true" showEffect="fade" hideEffect="fade" responsive="true" closable="true" header="Nueva visita">
<h:form id="formCreacion">
<p:outputPanel id="detalle">
<p:panelGrid columns="4">
<p:outputLabel for="fechaCreacion" value="Fecha de creación" />
<p:calendar id="fechaCreacion" value="#{visitaView.fechaCreacion}" pattern="dd/MM/yyyy" mask="true" label="fechaCreacion" locale="es" required="true" />
<p:outputLabel for="fechaProxima" value="Fecha de próxima visita" />
<p:calendar id="fechaProxima" value="#{visitaView.fechaProxVisita}" pattern="dd/MM/yyyy" mask="true" label="fechaProxima" locale="es" required="true" />
</p:panelGrid>
<br />
<p:textEditor widgetVar="editorCreacion" id="objetoVisita" value="#{visitaView.objetoVisita}" height="300" placeholder="Describa el objetivo de la visita..." >
<f:facet name="toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
</f:facet>
</p:textEditor>
<p:separator />
<div align="right">
<p:commandButton value="Guardar" style="margin-right: 0.31em;" actionListener="#{visitaView.crearVisita}" update=":form:tablaVisitas :form:mensajes" ajax="false" oncomplete="PF('creacionDialog').hide();" />
<p:commandButton value="Cancelar" oncomplete="PF('creacionDialog').hide();" />
</div>
</p:outputPanel>
</h:form>
</p:dialog>
The dialog loads OK, but when I press the button for making bold the text, it works (the text appears bold) but when I try to disable it, the buttons seems not to work. Anyone could help?

Thank you in advance!!

[iabenn]

Hi:

I have encountered the same problem: When I insert the p:textEditor tag in a p:dialog, many of the buttons / select lists in the toolbar do not work.

Following steps to reproduce the problem:

• I click the appropriate button to open (launch) the dialog.
  I type some text in the text editor area (inside the dialog).
  I then select / highlight some of the text I just typed.
  I click on the toolbar's Font-size selection drop-down to select a different font-size (such as "Large").
  Nothing happens. The text I selected remains the same. No change

Strangely enough, if I exit the dialog then reopen the dialog, the selection lists and buttons in the toolbar work fine. Apparently, it is just that first time that I open the dialog that the toolbar buttons do not work.

Also, I tried inserting the p:textEditor tag on the main form - not in the dialog - and it works fine on the main form. In other words, when the p:textEditor tag is outside of a p:dialog, it seems to work fine. The problem only seems to occur when the p:textEditor tag is inside a p:dialog.

Any feedback would be appreciated. Thanks.

JSF 2.2
Primefaces 6.2
GlassFish Server 4.1.1
Netbeans 8.2

[kukeltje]

MCVE please... http://stackoverflow.com/help/mcve

[hectorlpa]

Hi guys, I am experiencing the same issue, anyone has got fix it ? I opened a stackoverflow post but I have not get any solution.


https://stackoverflow.com/questions/542 ... itor-issue

greetings

[Melloware]

I would clone this project: https://github.com/primefaces/primefaces-test

And make a small reproducible test case so the Developers can debug the problem. It is the only way it will really get resolved if a dev can actually see the problem for themselves with a runnable sample.

[JDVB]

I've been experiencing this issue as well. Here's a quick test case(Made in PF V6.2). You'll notice that some of the options of the textEditor such as font, font-size, text-color, background-color and image insertion won't work while others will, e.g: bold, italic,...
When you close the dialog and open it once more they will however work.

Code: Select all

<h:form id="mainForm">
	<h:commandLink onclick="PF('dialogWidgetVar').show()" update="":dialogForm"/>
</h:form>
<p:dialog id="dialog" modal="true" widgetVar="dialogWidgetVar">
	<h:form id="dialogForm">
		<p:textEditor id="content" value="#{backingBean.textEditorContent}""/>
	</h:form>
</p:dialog>

The solution I've found is to add the 'open' event to the dialog and update the editor component there. This will ensure the editor component will work from the first try.

Code: Select all

<h:form id="mainForm">
	<h:commandLink onclick="PF('dialogWidgetVar').show()" update="":dialogForm"/>
</h:form>
<p:dialog id="dialog" modal="true" widgetVar="dialogWidgetVar">
	<p:ajax event="open" update=":dialogForm:content"/>
	<h:form id="dialogForm">
		<p:textEditor id="content" value="#{backingBean.textEditorContent}"/>
	</h:form>
</p:dialog>