umbraco tiptap rte insert custom content

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Stefan Stankovic 18 posts 165 karma points

Dec 17, 2024 @ 13:53

I'm trying to implement a custom extension for the new RTE (Tiptap). This is how my manifest:

{
  "type": "tiptapToolbarExtension",
  "kind": "button",
  "alias": "Tiptap.Toolbar.SoftHyphen",
  "name": "Soft Hyphen",
  "api": "/App_Plugins/CustomExtensions/softHyphenTiptap.js",
  "meta": {
    "alias": "softHyphen",
    "icon": "icon-brush",
    "label": "Soft Hyphen"
  }
}

This is my extension:

import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';

export default class KwSoftHyphenTiptapExtensionApi extends UmbTiptapToolbarElementApiBase {
    override execute(editor?: Editor) {
        editor?.commands.insertContent("&shy;")
    }
}

The extension inserts to the selected place, but the & symbol has been encoded.

View:

enter image description here

The source code:

enter image description here

The same happens if you use some HTML such as < mark >, but an example from their support page with < h1 > tag works.

I'm not sure if there is a list of allowed characters.

How to prevent encoding?

Copy Link

Afreed 76 posts 352 karma points

Dec 19, 2024 @ 12:17
0
Hi Stefan,

could you try using
```
editor?.commands.insertContent('\u00AD');
```
FYI you can't see the hyphens unless you copy to some other editor.
Copy Link
Stefan Stankovic 18 posts 165 karma points

Dec 19, 2024 @ 14:19

0

I appreciate your help, but it inserted just space instead of &

Copy Link

Afreed 76 posts 352 karma points

Dec 20, 2024 @ 04:25

its working fine for me but the editor ignores the hyphen, as I mentioned above if you just copy pasted the content to a notepad you can see the hyphen.

import { UmbTiptapToolbarElementApiBase as a } from "@umbraco-cms/backoffice/tiptap";
class t extends a {
  execute(e) {
    e == null || e.commands.insertContent("");
  }
}
export {
  t as default
};
//# sourceMappingURL=insert-soft-hyphen.tiptap-toolbar-api-DwwA4TH_.js.map

Copy Link

Stefan Stankovic 18 posts 165 karma points

Dec 20, 2024 @ 13:57

0

This solution works: https://our.umbraco.com/forum/using-umbraco-and-getting-started/115111-umbraco-tiptap-rte-insert-custom-content#comment-352487

Thank you for your help.

Copy Link
is working on a reply...

Please Sign in or register to post replies