v14/15 - Using TinyMCE RTE in custom backoffice ex...
# help-with-umbraco
m
I'm currently working on aBackoffice section using custom functionality and I'm wondering if anyone has any experience with using the TinyMCE RTE in custom Lit elements for the new Backoffice UI? I'm having a hard time finding code examples or docs on how this is done. I've gotten as far as rendering what seems to be the editor itself, but it's pretty bare-bones, so I assume I'm probably missing some configuration:
Copy code
import { LitElement, css, html, customElement, query, state, property } from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import "@umbraco-cms/backoffice/tiny-mce";
import { UmbInputTinyMceElement } from "@umbraco-cms/backoffice/tiny-mce";

@customElement("test-rte")
export class TestRteElement extends UmbElementMixin(LitElement) {
    
    render() {
        return html`
            <h1>Header</h1>
            <h2>Subheader</h2>
            <div style="max-width: 600px;">
                <umb-input-tiny-mce .value=${'Value!'} id="test-editor"></umb-input-tiny-mce>
            </div>
        `;
    }

    static styles = [
        css`
      :host {
        display: block;
        padding: 24px;
      }
    `,
    ];
}

export default TestRteElement;

declare global {
    interface HTMLElementTagNameMap {
        'test-rte': TestRteElement;
    }
}
https://cdn.discordapp.com/attachments/1315981927676907561/1315981927832092733/image.png?ex=6759632d&is=675811ad&hm=0b3421a9aa2088e9eb28e30b7f9431f32c9db1389acae7adaf80cd24304219c7&
g
hey, I know my answer is late, but since you helped me, I thought I'd help you 🙂 You need to add configuration to the editor, I used the following as an example: https://github.com/umbraco/Umbraco-CMS/blob/5457521f19a367c9b5194bffc020a188ac440bfb/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.stories.ts#L7
17 Views