3

I want to set the html value of a rich text editor component by attribute.

The tag and attributes below results in the printscreen below. How can I set the html-value by attribute?

<vaadin-rich-text-editor html-value="<p>Hello</p>"></vaadin-rich-text-editor>

In the element inspection I can see the value but the value which was set is just <p><br></p> instead of <p>Hello</p>. (see printscreens below)

component view result
google chrome developer tools element inspection

user15905221
  • 95
  • 4

1 Answers1

5

The htmlValue property in <vaadin-rich-text-editor>is read only, so it can't be used to set values. Setting HTML to a property in HTML opens up risks. You can set the value as HTML from JavaScript, with the dangerouslySetHtmlValue(htmlValue) function.

But as the name indicates, and the documentation says:

Sets content represented by HTML snippet into the editor.
The snippet is interpreted by [Quill's Clipboard matchers](https://quilljs.com/docs/modules/clipboard/#matchers),
which may not produce the exactly input HTML.

**NOTE:** Improper handling of HTML can lead to cross site scripting (XSS) and failure to sanitize
properly is both notoriously error-prone and a leading cause of web vulnerabilities.
This method is aptly named to ensure the developer has taken the necessary precautions.
@param {string} htmlValue

I tested this code and it works:

this.richTextEditor.dangerouslySetHtmlValue('<p>hello <b>world</b></p>');

Picture of Rich Text Editor with set HTML

You can see more in the component documentation.

Jens Jansson
  • 4,626
  • 4
  • 25
  • 29
  • This is only possible in Vaadin 21. We use Vaadin 14, so is there in Vaadin 14 a way to set the html content of the text editor directly in the html/js with for example with some properties in the javascript (vaadin designer created) file? I currently link it by @Id(..) and set the value in Java. But I don't want to have an text editor instance in Java, it's memory consuming. (I want to use it in a "card" grid like the Vaadin start apps with a template renderer. But for now it's mandatory to set the value in Java, so I can't fully create a template renderer. – user15905221 Jul 08 '21 at 09:31