Adding rich text editors to custom dashboards

Questions
1

Hey everyone, I’ve recently been attempting to create a custom dashboard - as part of a package - in which users can create an entry consisting of a title (text string) and a message (rich text). However, the rich text editor is displaying the following error in the console on page load, and every time it is updated:

TypeError: Cannot read properties of undefined (reading 'mandatory')
    at validate (umbraco.directives.min.js?d=638866067150000000:1:616462)
    at m.$digest (angular.js:19270:23)
    at m.$apply (angular.js:19630:13)
    at n.UUIButtonElement.<anonymous> (angular.js:29127:13)
    at n.UUIButtonElement.dispatch (jquery.min.js?d=638866067150000000:2:40035)
    at v.handle (jquery.min.js?d=638866067150000000:2:38006)

Does anyone have any advice/best practice for adding rich text editors to custom dashboards like this?

For additional context, the package is targeting V13 currently. Here is a general idea of the dashboard:

UEG-1
UEG-11038×498 9.06 KB

2

For some additional context, here is the HTML/JS I have for this rich text editor so far:

      <umb-property-editor id="editorguides-input" model="rteEditorGuides"></umb-property-editor>

$scope.rteEditorGuides = {
  view: Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/views/propertyeditors/rte/rte.html',
  config: {
    editor: {
      toolbar: ["ace", "undo", "redo", "bold", "italic", "bullist", "numlist", "link", "fullscreen"],
      style_formats: [{ title: "Heading 1", inline: "h1" }],
      plugins: ["fullscreen"],
      stylesheets: [],
      dimensions: { height: 300 }
    }
  }
};
3

Heya Sam
I have never had to use a RTE in a dashboard or my own custom views in Umbraco 13.

However some Googling brought up this thread that may be of use to you

Also the wonderful Lee Kelleher and his contentment package has a RTE in it, which may be of use to take a look at his approach of using tinyMceService to initialize an editor.

4

But reading the error perhaps the JSON object you are passing to <umb-property-editor> might need a property mandatory: false

This is just guess work but perhaps worth a shot

$scope.rteEditorGuides = {
  view: Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/views/propertyeditors/rte/rte.html',
  mandatory: false,
  config: {
    editor: {
      toolbar: ["ace", "undo", "redo", "bold", "italic", "bullist", "numlist", "link", "fullscreen"],
      style_formats: [{ title: "Heading 1", inline: "h1" }],
      plugins: ["fullscreen"],
      stylesheets: [],
      dimensions: { height: 300 }
    }
  }
};
5

Well your guess work has paid off - I updated it the initialisation to this:

$scope.rteEditorGuides = {
  view: Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/views/propertyeditors/rte/rte.html',
  config: {
    editor: {
      toolbar: ["ace", "undo", "redo", "bold", "italic", "bullist", "numlist", "link", "fullscreen"],
      style_formats: [{ title: "Heading 1", inline: "h1" }],
      plugins: ["fullscreen"],
      stylesheets: [],
      dimensions: { height: 300 }
    }
  },
  validation: {
    mandatory: false,
  }
};

And it works like a charm! Thanks Warren!

1 Like