Search code examples
tinymceumbraco

Umbraco 11 Rich Text Editor Text Size Picker not showing

I have added the following to my appsettings:

  "RichTextEditor": {
    "Commands": [
      {
        "Alias": "forecolor",
        "Name": "Change Color",
        "Mode": "Selection"
      },
      {
        "Alias": "fontselect",
        "Name": "Change Font Family",
        "Mode": "Selection"
      },
      {
        "Alias": "fontsizeselect",
        "Name": "Change Font Size",
        "Mode": "Selection"
      }
    ],
    "Plugins": [
      "textcolor",
      "colorpicker"
    ],
    "CustomConfig": {
      "color_map": "[ \"53565a\", \"Default Text\", \"000000\", \"Black\", \"ffffff\", \"White\", \"ffa400\", \"Yellow\", \"a10e2f\", \"Red\" ]",
    }

And I can see the following in my data type for the rich text editor:

enter image description here

But neither the font picker nor the text size picker are showing in the editor:

enter image description here

Have I missed something - do I need another plugin to make the text size and font family pickers show?

Solution

  • It looks like umbraco 11 is using tiny mce 6 and the aliases for the font size and font family have changed - see change log here.

    Changing the config to the following fixed my issue:

      "RichTextEditor": {
    "Commands": [
      {
        "Alias": "forecolor",
        "Name": "Change Font Colour",
        "Mode": "Selection"
      },
      {
        "Alias": "fontfamily",
        "Name": "Change Font Family",
        "Mode": "Selection"
      },
      {
        "Alias": "fontsize",
        "Name": "Change Font Size",
        "Mode": "Selection"
      }
    ],
    "Plugins": [
      "textcolor",
      "colorpicker"
    ],
    "CustomConfig": {
      "color_map": "[ \"53565a\", \"Default Text\", \"000000\", \"Black\", \"ffffff\", \"White\", \"ffa400\", \"Yellow\", \"a10e2f\", \"Red\" ]",
      "font_family_formats": "Default=Roboto, sans-serif;Arial=Arial;",
      "font_size_formats": "0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.375rem 1.5rem 1.625rem 1.75rem 1.875rem"
    }
  }