Adding a TipTap Rich Text Editor to a custom property editor

Questions
,
1

Hello.

Apologies if this is documented somewhere, but I cannot find anything that explains how I can add an RTE into a Custom Property Editor using Lit.

For simpler fields (i.e. Input fields, Dropdown, Etc…) I’ve made use of https://uui.umbraco.com/ elements with associated events, but need to somehow add a Rich Text Editor too.

I am using Lit to build the property editor.

Is this possible, and is there any documentation that could put me on the right path?

Thank you in advance,
Rob

2

I haven’t done it yet, but is this something? Integrate Property Editors | Umbraco CMS

1 Like
3

Thank you Luuk. That has certainly put me on the right path and have learnt a lot in the process too. Thanks again.

4

If you only need the editor element rendered without all the property stuff, then this might give you something to work with:

import { html } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import '@umbraco-cms/backoffice/tiptap';

@customElement('my-element')
export class MyElement extends UmbLitElement {
  
  render() {
    return html`
      <umb-input-tiptap value="My start value" @change=${this.#onChange}></umb-input-tiptap>
    `
  }

  #onChange(e: Event) {
    console.log(e.target.value);
  }
}

The element also accepts a configuration property. You can see all the properties here:

1 Like
5

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.