Copied to clipboard

Flag this post as spam?

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


  • vuser1 1 post 21 karma points
    Oct 26, 2009 @ 21:40
    vuser1
    0

    RichTextEditor features - font color, text size

    It looks like TinyMCE included in Umbarco does not support font color and text size. Instead, I have to create CSS, populate "Styles" combobox and use CSS styles for articles. Is it true? Is there a way to activate text color&size in text editor?

     

  • Chris Koiak 700 posts 2626 karma points
    Oct 27, 2009 @ 14:40
    Chris Koiak
    2

    This is correct and intended.

    It allows you/designer to limit what is available for your clients to do. It also simplifies the styling options for your client making it easier and quicker for them to add custom styles their pages.

    Howver, you can probably re-enable these features in config/tinyMceConfig.config.

  • Gary 20 posts 44 karma points
    Nov 02, 2009 @ 23:58
    Gary
    3

    I figured out the text colour. I'm sure the size is something similar.

    In config/tinyMceConfig.config add the following to the commands node

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

    Not sure what the umbracoAlias is used for but the rest is pretty straight forward. change the priority to change where the button shows in the toolbar (should be unique but haven't tested)

    tinyMCE uses spans to change the colour and by default the config in umbraco disables styles in spans so you need to modify the <validElements> node. basically look for:

    -span[class|align]

    and change it to

    -span[class|align|style]

    Then touch web.config or manually restart the website to read the new config. Log into the umbraco and go to Developer --> Data types --> Richtext editor and you should see the icon for the colour palette. You'll need to tick it to be shown in the content editor.

    I think that's all I needed to do!

  • Shulamit Umansky 3 posts 27 karma points
    Nov 14, 2009 @ 18:06
    Shulamit Umansky
    4

    Here is the code for font color and font size selectors:

    <command>
    <umbracoAlias>mcefontselect</umbracoAlias>
    <icon>images/editor/fontselect.png</icon>
    <tinyMceCommand value="" userInterface="true" frontendCommand="fontselect">fontselect</tinyMceCommand>
    <priority>17</priority>
    </command>
    <command>
    <umbracoAlias>mcefontsizeselect</umbracoAlias>
    <icon>images/editor/fontsizeselect.png</icon>
    <tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>
    <priority>18</priority>
    </command>

     

    However, you have to make the icons for these two buttons yourself (fontselect.png and forntsizeselect.png) in order for them to be displayed nicely in Data Types->RichText Editor configuation page.

  • Bohdan 3 posts 23 karma points
    Feb 07, 2011 @ 15:31
    Bohdan
    0

    thanks - give more xml snippets for newbies like me

  • Douglas Ludlow 210 posts 366 karma points
    Feb 11, 2012 @ 00:32
    Douglas Ludlow
    0

    Here's a few more. Took me a bit to stumble around and find them. I'm really loving the customConfig section. Bravo, to whomever came up  with the concept on that.

    To remove the "More Colors" link in the text color menu, you have to add the following to the section of the tinyMceConfig.config:

    <config key="theme_umbraco_more_colors">false</config>

    (Reference: http://www.tinymce.com/wiki.php/Configuration:theme_advanced_more_colors)

    Then to limit the colors that are available to the user:

    <config key="theme_umbraco_text_colors">000000,0079E3,FF0033</config>

    This will limit it to only 3 colors. Of course you can add as many as you like.

    (Reference: http://www.tinymce.com/wiki.php/Configuration:theme_advanced_text_colors)

     

  • Dane Garcia 6 posts 56 karma points
    Feb 13, 2013 @ 20:36
    Dane Garcia
    0

    I've tried to add the suggested code about to no avail, has Umbraco fully disabled this in a newer release? I add the exact code and nothing changes, I look in "Developer" > "Data Types" > "Richtext editor" > "Buttons" I don't see the new options. I also don't see them in tinyMCE.

  • Jan Skovgaard 11239 posts 23375 karma points MVP 6x admin c-trib
    Feb 13, 2013 @ 22:02
    Jan Skovgaard
    0

    Hi Dane

    To see the new buttons after you have added some of the config elements above, make sure that you recycle your app pool - you can simply just touch the web.config file.

    Then go back to the developers section and load your rich text editor data type again. Now you should see the new options that can be activated in the RTE.

    Hope this helps.

    /Jan

  • Douglas Ludlow 210 posts 366 karma points
    Feb 14, 2013 @ 22:18
    Douglas Ludlow
    0

    @Jan is right. Here's a little walkthrough that may help: https://blunderings.wordpress.com/2012/02/21/using-the-tinymce-color-picker-in-umbraco/

  • prinzie 13 posts 42 karma points
    Jan 16, 2014 @ 11:50
    prinzie
    0

    Anyone know where you can customize those font sizes?  

    I found the file: editor_template_src.js in the dictionary:

    Umbraco_Client\Tinymce3\Themes\Advanced

    Umbraco_Client\Tinymce3\Themes\Simple

    Umbraco_Client\Tinymce3\Themes\Umbraco

     

    But none of them seem to be ‘active’ (yes I have recycled the app pool )

  • Anders Schmidt 74 posts 205 karma points
    Apr 28, 2014 @ 12:50
    Anders Schmidt
    0

    Hi, 

    Is there any update on this one. Using Umbraco 7.

    Text colors added and working. But I would like to select colors to pick.

    My code:

        <customConfig>
            <!--  <config key="myKey">mySetting</config>-->
            <config key="entity_encoding">raw</config>
            <config key="spellchecker_rpc_url">GoogleSpellChecker.ashx</config>
            <config key="theme_umbraco_more_colors">false</config>
            <config key="theme_umbraco_text_colors">000000,0079E3,FF0033</config>
        </customConfig>

     

    Thanks

  • Jan Skovgaard 11239 posts 23375 karma points MVP 6x admin c-trib
    Apr 28, 2014 @ 12:57
    Jan Skovgaard
    0

    Hi Anders

    You Probably need to add

    in your tinymceconfig.config file as well.

    Remember to recycle the app pool (simply touch web.config) and see if the change is taking effect.

    Hope this helps.

    /Jan

  • Jan Skovgaard 11239 posts 23375 karma points MVP 6x admin c-trib
    Apr 28, 2014 @ 12:58
    Jan Skovgaard
    0

    argh, the editor ate my code so it's missing in my first post.

    Here it is!

    <plugin loadOnFrontend="true">template</plugin>
    
  • Anders Schmidt 74 posts 205 karma points
    Apr 28, 2014 @ 13:20
    Anders Schmidt
    0

    Hi Jan.

    Thanks for this quicky. It did not help me. I have added with.

    My plugins:

           <plugin loadOnFrontend="true">template</plugin> <plugin loadOnFrontend="true">code</plugin> <plugin loadOnFrontend="true">paste</plugin> <plugin loadOnFrontend="true">umbracolink</plugin> <plugin loadOnFrontend="true">anchor</plugin> <plugin loadOnFrontend="true">charmap</plugin> <plugin loadOnFrontend="true">table</plugin> <plugin loadOnFrontend="true">textcolor</plugin> <plugin loadOnFrontend="true">lists</plugin>

    I have added the textcolor also. The color btn is working. Only thing is to modify the colors inside btn.

    Thanks

  • André Nøbbe Christiansen 10 posts 71 karma points
    Jun 11, 2014 @ 20:10
    André Nøbbe Christiansen
    0

    I'm having the same problem as you Anders. Did you ever figured out any solution?

  • Anders Schmidt 74 posts 205 karma points
    Jun 11, 2014 @ 21:53
    Anders Schmidt
    0

    @Andre, No sorry I have never found solution on costume colors...

  • Kristoffer Eriksen 169 posts 388 karma points
    Jun 27, 2014 @ 12:34
    Kristoffer Eriksen
    0

    I've succeded with this thread

    http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/49556-TinyMCE-and-forecolor-%28text-color-picker%29

    Didn't need to include

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

  • Søren H. Pedersen 15 posts 65 karma points
    Aug 11, 2014 @ 12:33
    Søren H. Pedersen
    0

    Hello there

    I was in need of a font size editor and found this lovely post, and It works like charm.

    However, the icons I've created is not showing up at all, even though I've "touched" the webconfig file and reloaded the side.

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

    Any ideas how to fix this?

    Kind Regards Søren

Please Sign in or register to post replies

Write your reply to:

Draft