Rich Text Editor insert text

Ask us anything
1

Example:
I have a rich text editor to edit a letter body.
With a button, I want to insert a paragraph into the rich text editor at cursor position.
I didn’t find any component action to do this. Is it possible to add it?
If not, is there a way to do that in js?
BTW, what component is the weweb rich text editor using?

Thanks

1 Like
2

For more details, that’s what I’m looking for (but in weweb):

3

Here’s the user story:

1 Like
4

Hello @valery , have you found a solution?

5

No not yet

6

I think we need to emphasize this difficulty,
I’m also having trouble interacting with the selected text within the rich text.

7

@Broberto
@Doc

Please,
we need help to insert text into the editor.
Is there any tutorial?

8

@weweb-team

We don’t have any answers

9

No answers yet :frowning:
@aurelie @flo Please help on this… it’s the last showstopper for my application.
Thanks!

10

You try create actions with string manipulation?

I thought of a variable that stores the position of the cursor you clicked (I believe that in JS you can do this) and then create an action that would place the default text in the position of the variable (and then it would be a copy and paste).

You can try to use WeWeb’s AI to try, via JavaScript, to capture the cursor position within the Rich Text…

(I don’t know if I helped or hindered hahaha)

11

There’s no way to get the cursor position.
And even if it was possible, the position would be in a HTML text…
But ALL the rich text editor have a insertText or even insertHTML function available.
The clue is doing that inside weweb.

12

Hi, @valery

Have you tried this code?

function insertTextIntoRichTextInput(text) {

const richTextInput = document.querySelector(‘[contenteditable=“true”]’);

if (!richTextInput) {
    alert('Rich Text Input element not found');
    return;
}

// Insert the text at the cursor position or at the end if no selection
const selection = window.getSelection();
if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(document.createTextNode(text));
} else {
    richTextInput.appendChild(document.createTextNode(text));
}

// Trigger an input event to ensure WeWeb recognizes the change
richTextInput.dispatchEvent(new Event('input', { bubbles: true }));

alert('Text inserted successfully');

}

insertTextIntoRichTextInput(‘Hello World’);
1 Like
13

Hi,
I’ve tried it. The js seems OK but nothing happens in the richtext when executing.
How to fix this ?
Thanks

14

Hi, that’s weird. It should work with that code. You can set it up a JS action on click of a button. Can you send me the link to your project in private, please? Are you using the code like this?

workflow
workflow2368×804 111 KB

15

Here’s a test project where you can see the issue

BTW, I had to fix a double quote syntax error in the js
Thanks

16

You need to execute the function insertTextIntoRichTextInput(‘Hello World’); at the end of the code in the JS action. I’ve done it now and it seems to work. I don’t know which double quote syntax error you’re talking about, JS is fine.

17

Yes, it works great with text!
And thanks for completing insert HTML too!

1 Like