To configure the rich text editor, you need to add an extension type called tinyMcePlugin in a manifest file. The manifest file is a JSON file that describes the plugin and how it should be loaded. You can add plugins to the rich text editor, define your own custom styles, and set the valid elements using this file.

The manifest file should be placed in a folder in App_Plugins/{YourPackageName}, with the name umbraco-package.json. Learn how to use the package manifests.

In the example below I am going to add the 'codesample' plugin to the RTE, add the code tag to valid elements, and also add some styles for formatting.

To add these items we need to add a "config" section, in this section we add the definitions for the plugins, valid elements, and styles. For the codesample plugin we need to add a reference to the plugin and make the code tag a valid element by adding +code[*] to the valid elements list, this is the same ValidElements used in the appsettings file in previous versions, however in the manifest it is now called valid_elements. Style formats can be added using the same style_formats string used in appsettings.

In order to use the codesample plugin we also need to add a button to be used from the toolbar, this is accomplished by adding a toolbar section to the manifest.

Our completed manifest is below.

App_Plugins/YourPackageName/umbraco-package.json

{
  "name": "My TinyMCE Plugin",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "tinyMcePlugin",
      "alias": "mytinymceplugin",
      "name": "My TinyMCE Plugin",
      "meta": {
        "SanitizeTinyMce": false,

        "config": {
          "plugins": [ "codesample" ],
          "valid_elements": "+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,+i[class|style],+code[*]",
          "style_formats": [
            {
              "title": "Headings",
              "items": [
                {
                  "title": "Heading h3",
                  "block": "h3"
                },
                {
                  "title": "Heading h4",
                  "block": "h4"
                },
                {
                  "title": "Heading h5",
                  "block": "h5"
                },
                {
                  "title": "Heading h6",
                  "block": "h6"
                }
              ]
            },
            {
              "title": "Inline",
              "items": [
                {
                  "title": "Bold",
                  "block": "strong"
                },
                {
                  "title": "Italics",
                  "block": "em"
                },
                {
                  "title": "Underline",
                  "inline": "span",
                  "attributes": { "style": "text-decoration: underline;" }
                },
                {
                  "title": "Strikethrough",
                  "inline": "span",
                  "attributes": { "style": "text-decoration: line-through;" }
                },
                {
                  "title": "Superscript",
                  "block": "sup"
                },
                {
                  "title": "Subscript",
                  "block": "sub"
                }
              ]
            },
            {
              "title": "Blocks",
              "items": [
                {
                  "title": "Blockquote",
                  "block": "blockquote"
                },
                {
                  "title": "pre",
                  "block": "pre"
                }
              ]
            }
          ]
        },
        "toolbar": [
          {
            "alias": "codesample",
            "label": "Code sample",
            "icon": "code-sample"
          }
        ]
      }
    }
  ]
}