Adding a TipTap Rich Text Editor to a custom property editor

Questions
,
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