Sign in Register
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
    Stefan Stankovic
    0

    Umbraco Tiptap RTE insert custom content

    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("­")
    }
}

    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 86 posts 383 karma points MVP
    Dec 19, 2024 @ 12:17
    Afreed
    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
    Stefan Stankovic
    0

    I appreciate your help, but it inserted just space instead of & enter image description here

    Copy Link
  • Afreed 86 posts 383 karma points MVP
    Dec 20, 2024 @ 04:25
    Afreed
    102

    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
    Stefan Stankovic
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" button below.

    Continue discussion

Please Sign in or register to post replies