;

How to add more options to your Umbraco Rich Text Editor?

How to add more options to your Umbraco Rich Text Editor?

I haven't found any Umbraco CMS website which doesn't have the rich text editor (RTE) as at least one property of the document type.

It's common that the editors would like to feel free to express themselves by using as many rich text options as they can.

It is usually not a good idea to provide unlimited freedom for editors, neither to allow all options (keep it as simple as possible), mainly because front-end developers do not cover all possible tags, styles, etc. On the other hand, allowing an editor to incorporate their own styling may crash the site's look and feel.

A clean installation of Umbraco comes with the default settings which normally disable some of the features.

Looking into the past, I found myself usually enabling two features. These were blockquote tag and text colour picker with predefined colors (usually defined by the design).

It's pretty straightforward to enable it, you just need to follow a few steps.

Step 1: Enhance the tinyMceConfig.config file

In order to do that, please add the following tag definitions into the commands tag:

<command>
      <umbracoAlias>Blockquote</umbracoAlias>
      <icon>images/editor/quote.gif</icon>
      <tinyMceCommand value="" userInterface="false" frontendCommand="blockquote">blockquote</tinyMceCommand>
      <priority>45</priority>
    </command>

<command>
  <umbracoAlias>mceForeColor</umbracoAlias>
  <icon>images/editor/forecolor.gif</icon>
  <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>
  <priority>46</priority>
</command>

You can customize the order of showing features by adapting the priority tag value.

Step 2: Enable loading text-colour picker by tinyMceConfig.config file enhancement

Find the plugins section of the tinyMceConfig.config file and add the following line:

<plugin loadOnFrontend="true">textcolor</plugin>

Step 3: Configure the predefined colours by tinyMceConfig.config file enhancement

Find the customConfig tag and add the following config tag with your predefined colours.

<config key="textcolor_map">
  [
  "48CFAD", "Mint Light",
  "37BC9B", "Mint",
  "4FC1E9", "Aqua Light",
  "3BAFDA", "Aqua",
  "5D9CEC", "Blue Jeans",
  "FFCE54", "Sunflower"
  ]
</config>

Step 4: Save the web.config file

In order to recycle the application pool and to see the necessary changes - trigger it by saving the web.config file.

Step 5: Umbraco back office configuration

Log in to the Umbraco back office.

Open the Developer section.

Expand the data types.

Click on the Rich Text Editor data type.

Tick two boxes like it is shown in the screenshot below.

Save the data type changes.

That is all. You are now able to use the new features. Happy "block-quoting" and text fore coloring :)



Comments

  • Vlada 6/1/2018 1:24:51 PM

    Great article, Jovica! Many thanks :)

Leave a Comment