how to add color and font size featured to richtext editor umbraco8 - Umbraco 8

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Saif Obeidat 79 posts 296 karma points

Jul 07, 2019 @ 08:53

1

How to add color and font size features to Richtext Editor - Umbraco8

Hi,

Is it possible to add color picker and font size to Richtext Editor on Umbraco 8 ?

If yes, please tell me how.

Thanks

Copy Link
Saif Obeidat 79 posts 296 karma points

Jul 08, 2019 @ 14:07
105
OK,

Once the tinyMceConfig.config file has changed a little bit, I have done some changes on the commands code, as per the plugins available in :

Text Color Plugin which provides specific And also colorpicker which enables users to pick any color they want

Fullpage which provides multiple features such as font size and font family

Follow the below steps to add those features is :
- Go to tinyMceConfig.config file, and between the commands tag add the below code :
```
 <command alias="forecolor" name="Change Color" mode="Selection" />
 <command alias="fontselect" name="Change Font Family" mode="Selection" />
 <command alias="fontsizeselect" name="Change Font Size" mode="Selection" />
```
- Add the below code between plugins tag
```
<plugin>textcolor</plugin>
<plugin>colorpicker</plugin>
<plugin>fullpage</plugin>
```
- Now from Umbraco - settings - datatypes - richtext editor, add the new properties, and do the same to the richtext editor property from its Document type
Copy Link
Matty 34 posts 148 karma points

Sep 17, 2020 @ 01:29

0

This is the best! you are a saint!

Copy Link
Mus'ab 158 posts 387 karma points notactivated

Nov 19, 2019 @ 09:21

1

Thx a million you are the best

Copy Link
Anant Jaiswal 1 post 21 karma points

May 01, 2021 @ 08:01

0

Where do we find the tinyMceConfig.config file in Umbraco 9 beta version

Copy Link

Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib

May 01, 2021 @ 09:29

HI Anant

It should all be moved into the appsettings.json configuration file for the application.

Warren has put together a video that explains a bit about it:

https://www.youtube.com/watch?v=rpUg-oySw8g

and from the schema definition that he talks about: (which I think is here: https://github.com/SchemaStore/schemastore/blob/master/src/schemas/json/appsettings.json)

The following looks to be how to configure the TinyMce editor and plugins/commands:

 "umbracoRichTextEditor": {
            "properties": {
                "Commands": {
                    "description": "Commands to add to the TinyMCE Richtext editor",
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/umbracoRichTextEditorCommands"
                    }
                },
                "Plugins": {
                    "description": "An array of TinyMCE Plugins to load such as 'paste', 'table'",
                    "type": [
                        "string"
                    ]
                },
                "CustomConfig": {
                    "description": "Custom configuration for TinyMCE and its plugins",
                    "type": "object"
                },
                "ValidElements": {
                    "description": "A CSV string of valid HTML elements in the richtext editor. Ex: iframe[*],button[class|title]",
                    "type": "string"
                },
                "InvalidElements": {
                    "description": "A CSV string of invalid HTML elements in the richtext editor. Ex: font",
                    "type": "string"
                }
            }
        },
        "umbracoRichTextEditorCommands": {
            "properties": {
                "Name": {
                    "description": "Friendly name of Richtext Editor Command",
                    "type": "string"
                },
                "Alias": {
                    "description": "Alias of the Richtext Editor Command",
                    "type": "string"
                },
                "Mode": {
                    "description": "Set how the Richtext Editor Command can be used. Such as when a selction is made",
                    "enum": [
                        "Insert",
                        "Selection",
                        "All"
                    ]
                }
            }
        },

regards

Marc

Copy Link

Mona 36 posts 106 karma points

Jun 28, 2021 @ 13:31

0

Dear Saif,

I'm facing issue with multi language website. Secondary lang website created from Settings > Languages and added the domain into Culture and Hostnames. Secondary lang website is not working showing 404 error. Could you plz assist on this.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

How to add color and font size features to Richtext Editor - Umbraco8