Add or Append text in p:textEditor

Question

I have p:textEditor like the following

<p:textEditor 
                id="editor"
                widgetVar="editor"
                value="#{xxxController.editorText}" 
                height="300" 
                placeholder="Enter your content"
                toolbarVisible="false"/>

Have the following command button to add/append values to p:textEditor

<p:commandButton onclick="insertTag('[myValue]')" value="myValue" type="button" />

JavaScript
<script>
             
        function insertTag( t )
        {
            PF( 'editor' ).insertText( t ) ;
        }
        </script>

But i get SCRIPT5007: Unable to get property 'insertText' of undefined or null reference when i try to click the <p:commandButton.

So how do we insert/append text using widgetVar or JavaScript to p:textEditor?

Version details

JSF 2.2, PrimeFaces 6.2

Melloware · Accepted Answer · 2020-06-26T11:52:38.847

4

You need to do this... Once you have the widget the "editor" variable is QuillJS object.

PF('editor').editor.insertText(0, 'Hello', 'bold', true);

See: https://quilljs.com/docs/api/#inserttext

See: https://quilljs.com/docs/api/#getlength

edited Jun 26 '20 at 11:52

answered Jun 26 '20 at 11:38

Melloware

10,435
2
32
62

+1 this solved my issue but it always inserts the text at the beginning, how do we insert at the cursor? like if i type Hi and hit the button it should come like Hi Hello? – Joe Jun 26 '20 at 11:47
3

Yep read the docs for QuillJS its inserting at position 0. I am sure with this example you can get clever and know how to find `length` and use that position to append. My job was to get you working. – Melloware Jun 26 '20 at 11:49
1

Thank you very much for spending your valuable time, i got it working, just added editor.getLength()-1. – Joe Jun 26 '20 at 12:05

score 1 · Answer 2 · answered Jun 26 '20 at 11:45

1

See Using the component ID as widgetVar name

[...] This will cause all original widget var functions to be completely unavailable because the variable editor is now referencing a HTMLDivElement instance which doesn't have the same functions as the original widget var like show(), etc. [...]

(Append a _vw to every widgetvar name, to eliminate that issue)

SCRIPT5007: Unable to get property 'insertText' of undefined or null reference

guess, that's exactly the cause, your code is not referencing the "editor"-widgetVar, but the "editor" html element, which does not know "insertText".

answered Jun 26 '20 at 11:45

dognose

20,360
9
61
107

sure, will rename it like the way you suggested :) +1 – Joe Jun 26 '20 at 11:48
1

@CodeNotFound beside that: `isWidgetVarExist(id)` looks strange to me... maybe remove that check for debugging. – dognose Jun 26 '20 at 11:52
Yes, it worked without that method, will remove it. – Joe Jun 26 '20 at 11:53
@dognose: this id widgetvar thing is not applicable anymore in recent versions afaik, they can be the same. The widgetvar is not stored in the document (or window) anymore – Kukeltje Jun 26 '20 at 18:46
@Kukeltje okay, not sure what the most recent version is, and if OP is using that - so, i outlined that, cause it caused me headache years ago as well :) – dognose Jun 27 '20 at 18:44

Add or Append text in p:textEditor

2 Answers2