Copied to clipboard

Flag this post as spam?

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


  • Topic author was deleted

    Dec 05, 2017 @ 21:31

    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?

  • Comment author was deleted

    Dec 05, 2017 @ 22:55

    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 6132 posts 23951 karma points MVP 7x admin c-trib
    Dec 05, 2017 @ 23:01
    Alex Skrypnyk
    0

    Hi Alessandro, so the issue is solved?

  • Comment author was deleted

    Dec 05, 2017 @ 23:03

    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 176 posts 842 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/

  • Comment author was deleted

    Dec 06, 2017 @ 10:34

    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 176 posts 842 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>
    
  • Comment author was deleted

    Dec 06, 2017 @ 11:29

    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

Please Sign in or register to post replies

Write your reply to:

Draft