How to dynamically remove TextEditor toolbar ?

[schlebe]

Hello,

I use multiple TextEditor widgets in a form.

I want that when form is first displayed, all TextEditor widgets are displayed without toolbar.

But, when I click on input zone, I want that the toolbar is immediatly displayed.

I have developed a solution with 2 widgets: 1 TextEditor and 1 div and I switch visiblity so that TextEditor when widget is editable and that toolbar is needed.

This solution work well but it not perfect.

So I search another solution more simple.

Hidding or showing dynamically Toolbar can help me.

Question: How to DYNAMICALLY remove TextEditor toolbar ? Is that possible ?

Thanks for any help.

[kukeltje]

CSS? With good specificity?

[RueKow]

Due to missing onFocus and onBlur attributes for TextEditor you can use p:ajax for these events.

Code: Select all

<h:form id="form">
	<p:textEditor id="te" value="#{bean.text}">
		<p:ajax event="focus" onstart="showToolbar('form:te');" />
		<p:ajax event="blur" onstart="hideToolbar('form:te');" />
	</p:textEditor>
</h:form>

Javascript functions to show or hide the toolbar.

Code: Select all

function hideToolbar(div)
{
	var id1 = '[id="' + div + '_toolbar"]';
	var id2 = '[id="' + div + '_editor"]';
	$(id1).hide();
	$(id2).css('border-top', '1px solid #cccccc');
}
function showToolbar(div)
{
	var id1 = '[id="' + div + '_toolbar"]';
	var id2 = '[id="' + div + '_editor"]';
	$(id1).show();
	$(id2).css('border-top', '0px');
}

[tandraschko]

i would add "return false" in the onstart attribute as no ajax request is required Or using pe:javascript.

[Melloware]

+1 for pe:javascript for these types of Ajax events where you don't want to actually make a server side call.

https://www.primefaces.org/showcase-ext ... aviour.jsf

[schlebe]

Thanks ... this work well with Primefaces 6.1.14.

Just for information, I have first tested with Primefaces 6.1.1 but this has not worked !

[schlebe]

I have found a definitive solution for me that is a mix of Primefaces and JQuery.

In a form I have 3 TextEditor widgets.

Code: Select all

<p:panel>
    <p:textEditor       
        id="TplCommentEditor"
        value="#{oController.txtTplComment.text}"
        >
    <p:textEditor       
        id="SteercoCommentEditor"
        value="#{oController.txtSteercoComment.text}"
        >
    <p:textEditor       
        id="TlecCommentEditor"
        value="#{oController.txtTlecComment.text}"
        >
</p:panel>

When the <h:form> or <p:dialog> object is loaded, I start that following Javascript function

Code: Select all

function onLoadDialog()
    {
    // 1. hide toolbar of all TextEditorWidjet
    jQuery(".ql-toolbar").css('border','0px');
    jQuery(".ql-toolbar").css('display','none');
    jQuery(".ql-container").css('border','0px');

    // 2. intercept FOCUS event to show toolbar
    jQuery(".ql-editor").focus(function()
        {
        showTextEditorToolbar($(this));
        });

    // 3. intercept FOCUSOUT event to hide toolbar
    jQuery(".ql-toolbar").focusout(function(e)
        {
        TextEditorLostFocus($(this),e);    
        });

    jQuery(".ql-container").focusout(function(e)
        {
        TextEditorLostFocus($(this),e);    
        });

Point 3. is more complicated. It has been added splitted in 2 FOCUSOUT event because first DIV of TextEditor doesn't have (by default) a class defined.

The function that implements Toolbar removing is

Code: Select all

 function TextEditorLostFocus(wgTextEditor,e)
    {
    var sTextEditorId = wgTextEditor.parent().prop("id");
    var wgFocus = $(e.relatedTarget);
    bHideToolbar = true;
    iCount = 4;
    while(iCount-- > 0)
        {
        if (wgFocus.prop("id") === sTextEditorId)
            {
            bHideToolbar = false;    
            break;
            }
        wgFocus = wgFocus.parent();    
        if (wgFocus == null) break;
        }
            
    if (bHideToolbar)
        {
        hideTextEditorToolbar(wgTextEditor);
        }
    }

This script take the ID of the widget that will gain the focus and compare it with TextEditorWidget ID.
If both ID are same that will say that widget that will gain the focus is contained in TextEditor widget.
In this case the Toolbar must not be removed !
The script loop 4 times in parent() direction to be sure to search up enough.

The function to Show and Hide toolbar are:

Code: Select all

function hideToolbar(wg)
    {
    var qlToolbar = wg.children(":first-child");
    var qlEditor = wg.children(":nth-child(2)");

    qlToolbar.hide();
    qlEditor.css('border', '0px');
    }

function showToolbar(wg)
    {
    var qlToolbar = wg.children(":first-child");
    var qlEditor = wg.children(":nth-child(2)");

    qlToolbar.show();
    qlToolbar.css('border', '1px solid #cccccc');
    qlEditor.css('border', '1px solid #cccccc');
    }

I hope that can help others