Customizing the XbyK Rich Text widget

We have a custom Rich Text widget that we are using in place of the stock XbyK*** Rich Text widget. We've been able to use most of the features from the stock widget, but having troubles with the page picker. Has anyone else been able to get this working on a custom RTE widget?

I'm including our working JSON file with the features we've included so far. As soon as I add anything to do with the page picker, our custom RTE widget breaks:

{
  "imageDefaultWidth": 0,
  "imageResize": true,
  "imageUpload": false,
  "imagePaste": false,
  "imageDefaultMargin": null,
  "imageMove": true,
  "imageAddNewLine": false,
  "toolbarButtons": [
    "paragraphFormat",
    "|",
    "bold",
    "italic",
    "underline",
    "|",
    "align",
    "formatOL",
    "formatUL",
    "|",
    "insertAsset",
    "insertLinkDropDown",
    "insertVideo",
    "|",
    "insertTable",
    "tableRows",
    "tableColumns",
    "tableHeader",
    "tableCellStyle",
    "|",
    "html"
  ],
  "imageEditButtons": [
    "imageReplace",
    "imageAlt",
    "imageAlign",
    "imageDisplay",
    "imageSize",
    "imageRemove"
  ],
  "linkStyles": {
    "btn btn-primary": "Button"
  },
  "linkEditButtons": [
    "linkOpen",
    "linkStyle",
    "linkEdit",
    "linkRemove"
  ],
  "customPlugins": [
    {
      "pluginName": "@kentico/xperience-admin-base/Asset"
    },
    {
      "pluginName": "@kentico/xperience-admin-base/Link",
      "pluginOptions": {
        "dropdownOptions": [
          {
            "linkOption": "asset",
            "componentName": "@kentico/xperience-admin-base/AssetPanel"
          },
          {
            "linkOption": "external"
          }
        ]
      }
    }
  ]
}

Environment

  • Xperience by Kentico version: [30.11.0]

  • .NET version: [8]

Tags:
Page Builder v30.11.0
0

Answers

Although may be 'too late now,' what is the reason you wrote your own Rich Text Widget?

There's a couple hacks to modify the 'existing' rich text widget that I know of, which can help if you're trying to do things like adjust the Froala editor in it or add markup.

0
Accepted answer

The reason we created our own custom widget was that we needed to both add additional fields and extend the styles. We have been able to successfully use many of the stock features in our custom Rich Text widget - including image picker, asset picker, and video embed. We are only having trouble with the page picker. Is there a way to add this feature?

UPDATE: I just figured this out. For some reason, even after recompiling this was erroring, but it did finally end up working and shows up in the dropdown list.

I added this link option to the link dropdown options:

{
  "imageDefaultWidth": 0,
  "imageResize": true,
  "imageUpload": false,
  "imagePaste": false,
  "imageDefaultMargin": null,
  "imageMove": true,
  "imageAddNewLine": false,
  "toolbarButtons": [
    "paragraphFormat",
    "|",
    "bold",
    "italic",
    "underline",
    "|",
    "align",
    "formatOL",
    "formatUL",
    "|",
    "insertAsset",
    "insertLinkDropDown",
    "insertVideo",
    "|",
    "insertTable",
    "tableRows",
    "tableColumns",
    "tableHeader",
    "tableCellStyle",
    "|",
    "html"
  ],
  "imageEditButtons": [
    "imageReplace",
    "imageAlt",
    "imageAlign",
    "imageDisplay",
    "imageSize",
    "imageRemove"
  ],
  "linkStyles": {
    "btn btn-primary": "Button"
  },
  "linkEditButtons": ["linkOpen", "linkStyle", "linkEdit", "linkRemove"],
  "customPlugins": [
    {
      "pluginName": "@kentico/xperience-admin-base/Asset"
    },
    {
      "pluginName": "@kentico/xperience-admin-base/Link",
      "pluginOptions": {
        "dropdownOptions": [
          {
            "linkOption": "asset",
            "componentName": "@kentico/xperience-admin-base/AssetPanel"
          },
          {
            "linkOption": "external"
          },
          {
            "linkOption": "webpage",
            "componentName": "@kentico/xperience-admin-websites/PageLink"
          }
        ]
      }
    }
  ]
}
0

To response this discussion, you have to login first.