Copied to clipboard

Flag this post as spam?

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


  • AlessandroDM 21 posts 122 karma points
    Dec 05, 2017 @ 21:31
    AlessandroDM
    0

    HOW? TinyMCE - more Font Size, more Colors and more Font Family

    Hello, I have installed the new tinyMce, I also have activated font family, font size and color selector buttons. They work fine, but they are really limited. Reading online I didn't find still a solution for umbraco to integrate the color picker, to allow the users to get all the colors they would. (Like using spectrum inside tinyMCE) Reading the documentation I see that I can add some colors but, I don't understand where I should do it. I would also add the font Calibri to the list of available fonts, and add all the sizes to the font size selector.

    Anybody can provide some know-how to me please?

  • AlessandroDM 21 posts 122 karma points
    Dec 05, 2017 @ 22:55
    AlessandroDM
    0

    Adding this code to the tinyMceConfig.config you get: The possibility to add custom colors by inserting the RGB code or their HASH code when you click on your forecolor button in the editor (you get a new line "Custom..." and some "Recent" colors)

  • Alex Skrypnyk 5908 posts 22603 karma points MVP 4x admin c-trib
    Dec 05, 2017 @ 23:01
    Alex Skrypnyk
    0

    Hi Alessandro, so the issue is solved?

  • AlessandroDM 21 posts 122 karma points
    Dec 05, 2017 @ 23:03
    AlessandroDM
    0

    Hi Alex, I don't think so, I am still searching how to:

    • add more font families
    • add more font sizes

    any idea?

  • Ben Palmer 166 posts 811 karma points c-trib
    Dec 06, 2017 @ 10:04
    Ben Palmer
    0

    Hi Alessandro,

    You can add styles to the format dropdown by adding a stylesheet in the settings section within umbraco. There's a video on Umbraco TV explaining here - https://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/stylesheets-and-javascript/setting-up-rte-styles/

  • AlessandroDM 21 posts 122 karma points
    Dec 06, 2017 @ 10:34
    AlessandroDM
    0

    Hi Ben, I know about this feature thanks, but as there is a dropdown list of sizes and fonts, I'm pretty sure there is a list somewhere that is built and we can configure, just I can't still figure out where it is, and I wonder about that

    Thank you

  • Ben Palmer 166 posts 811 karma points c-trib
    Dec 06, 2017 @ 11:13
    Ben Palmer
    108

    Hi Alessandro,

    For for font sizes, you first need to add the command (which you've possibly already done:

    <command>
        <umbracoAlias>mcefontsizeselect</umbracoAlias>
        <icon>images/editor/fontsizeselect.gif</icon>
        <tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>
        <priority>76</priority>
    </command>
    

    Secondly, you can change the options by adding a custom config key:

    <config key="fontsize_formats">8px 10px 36px</config>
    

    Spaces count as a separator so don't add any extra whitespace. The only thing I'm not sure of with this is how to set a default text - when I do this 12pt is shown as the default. Probably not a massive issue but little annoying, nonetheless.

    For font family, add a command:

    <command>
        <umbracoAlias>mcefontselect</umbracoAlias>
        <icon>images/editor/fontselect.gif</icon>
        <tinyMceCommand value="" userInterface="true" frontendCommand="fontselect">fontselect</tinyMceCommand>
        <priority>77</priority>
    </command>
    

    Then add a custom config like so:

    <config key="font_formats">Arial=arial,helvetica,sans-serif;Helvetica=helvetica;</config>
    

    Each value should be in the format FONTNAME=VALUE seperated by a ;.

    And finally, for the color picker - you can change the default values by adding something like this:

    <config key="textcolor_map">
        [
        "000000", "Black",
        "993300", "Burnt orange",
        "333300", "Dark olive"
        ]
    </config>
    
  • AlessandroDM 21 posts 122 karma points
    Dec 06, 2017 @ 11:29
    AlessandroDM
    1

    Oh, that is exactly what I was trying to figure out. Thank you a lot Ben.

    I think that an explanation like this was really missing in the forum.

    I had already all command sections, but did not know how to manage the config key.

    Thank you a lot again

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies