Hyperlink of texteditor inside dialog is not working

gciobanu · 11 Sep 2023, 18:26

I have a p:texteditor inside a p:dialog, like in the below example. When I click the hyperlink icon from the texteditor's toolbar and I try to edit the link then nothing happens, it looks like not editable.
I tried from javascript to make it editable but it doesn't have any effect.

If the texteditor is placed outside the dialog then it works well, I mean the hyperlinks can be edited and saved. So the issue is happening only when my texteditor is inside the dialog.

Is anyone else having this issue or know how to fix it?

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:body>
<p:dialog header="Texteditor inside dialog" modal="true" draggable="true"
showHeader="true" resizable="true" closeOnEscape="true" responsive="true" width="92%"
id="dialogWithTextEditor" widgetVar="dialogWithTextEditorWdg" blockScroll="false">

<h:form id="levelForm" prependId="false">
<p:inplace id="st" editor="true" >
<p:ajax event="save" listener="#{modelBean.saveModel}" update="@this growl"/>
<f:facet name="output">
<i><h:outputText escape="false" value="Click to enter statement (required)"/></i>
<h:outputText escape="false" value="#{statement}"/>
</f:facet>
<f:facet name="input">

<p:textEditor id="pStatementText" value="#{statement}" widgetVar="pStatementTextWdg">
<ui:include src="/resources/textEditor/toolbarConfig.xhtml"></ui:include>
</p:textEditor>

</f:facet>
</p:inplace>
<script type="text/javascript">

// CHECK QUILL EDITOR LINK DIALOG IF EDITABLE
jQuery("button.ql-link").on('click', function (e) {
setTimeout(function(){

var quillLinkInput = $('.ql-tooltip.ql-editing > :input');

console.log('quillLinkInput disabled = '+quillLinkInput.prop('disabled')+
' quillLinkInput readonly = '+quillLinkInput.prop('readonly') +
' quillLinkInput type = '+quillLinkInput.prop('type') );

quillLinkInput.on("click", function(e){
e.preventDefault();

console.log('quillLinkInput.click called');

//quillLinkInput.enable();
//e.currentTarget.enable();

jQuery(this).find('input[type=text]').prop('disabled', false);
})
}, 300);

});

</script>
</h:form>
</p:dialog>
</h:body>
</html>

And the definition for my toolbar on the texteditor:

<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-clean"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-list" value="ordered"></button>
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-link"></button>
</span>
</f:facet>

Thanks.

Hyperlink of texteditor inside dialog is not working

Who is online