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 294 karma points
    Jul 07, 2019 @ 08:53
    Saif Obeidat
    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

  • Saif Obeidat 79 posts 294 karma points
    Jul 08, 2019 @ 14:07
    Saif Obeidat
    104

    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
  • milkman matty 19 posts 100 karma points
    Sep 17, 2020 @ 01:29
    milkman matty
    0

    This is the best! you are a saint!

  • Mus'ab 155 posts 380 karma points notactivated
    Nov 19, 2019 @ 09:21
    Mus'ab
    1

    Thx a million you are the best

  • Anant Jaiswal 1 post 21 karma points
    17 days ago
    Anant Jaiswal
    0

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

  • Marc Goodson 1504 posts 10060 karma points MVP 5x c-trib
    17 days ago
    Marc Goodson
    2

    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

Please Sign in or register to post replies

Write your reply to:

Draft