Add more text size and fill more colors on post editor

Dear All,

As per the title, how can we add more text sizes and fill more colors on post editor?

My forum infomation you can find on my profile.



Thank you!
Alex.

For colors go to admin panel -> configuration -> Messages and e-mails -> Type of the editor colors palette : Extened

Hey @AlexisMcDevin,

For font sizes go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Paste the code below :

Code:

$(function(){$(function() {
  $('.sceditor-button-size').click(function() {
    addSize(8, 'before');
    addSize(6, 'before');
   
    addSize(26, 'after');
    addSize(28, 'after');
    addSize(30, 'after');
 
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size, position){
    var data = '<a unselectable="on" class="sceditor-fontsize-option new-size" href="#" data-size="'+size+'"><span unselectable="on" style="font-size:'+size+'px;">'+size+'</span></a>';
    if (position == 'after' || position == null) $('.sceditor-fontsize-picker div').append(data);
    if (position == 'before') $('.sceditor-fontsize-picker div').prepend(data);
  }
})});

To add sizes write : addSize(number, position)

number : the size of the font e.g. 1, 2, 3..
position : where the option will be placed e.g. before, after..
- before places the option before all current fonts
- after places the option after all current fonts

Hi @Ange Tuteur,

Text size (30) does not work. However, All other numbers is perfect. It is okay with me.

How about the color board? Can we add more colors or we should remove JS of this color board and using the original color board in PAC setting per "help.forummotion" forum?

(Type of the editor colors palette: Extended)

Here is the code of color board that I am using:

Code:

$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    var mColorBasic = [],
    html = $('<div />');
               
    // begin list of colors
             
    mColorBasic["Black"] = "#000000";
    mColorBasic["Dark Blue"] = "#00008B";
    mColorBasic["Teal"] = "#008080";
    mColorBasic["Dark Green"] = "#006400";
    mColorBasic["Indigo"] = "#4B0082";
    mColorBasic["Crimson"] = "#DC143C";
    mColorBasic["Orange"] = "#FF4500";
    mColorBasic["Brown"] = "#663300";
       
    mColorBasic["Dark Gray"] = "#666666";
    mColorBasic["Royal Blue"] = "#4169E1";
    mColorBasic["Dark Turquoise"] = "#00CED1";
    mColorBasic["Green"] = "#008000";
    mColorBasic["Purple"] = "#9400D3";
    mColorBasic["Red"] = "#FF0000";
    mColorBasic["Light Orange"] = "#FF9933";
    mColorBasic["Sienna"] = "#A0522D";
       
    mColorBasic["Light Gray"] = "#D3D3D3";
    mColorBasic["Sky Blue"] = "#87CEEB";
    mColorBasic["Cyan"] = "#00FFFF";
    mColorBasic["Green Apple"] = "#32CD32";
    mColorBasic["Mauve"] = "#DA70D6";
    mColorBasic["Salmon"] = "#FA8072";
    mColorBasic["Gold"] = "#FFD700";
    mColorBasic["Light Brown"] = "#CD853F";
       
    mColorBasic["White"] = "#FFFFFF";
    mColorBasic["Pale Turquoise"] = "#AFEEEE";
    mColorBasic["Blue Green"] = "#7FFFD4";
    mColorBasic["Pale Green"] = "#98FB98";
    mColorBasic["Pink"] = "#FFC0CB";
    mColorBasic["Peach"] = "#FFDAB9";
    mColorBasic["Yellow"] = "#FFFF00";
    mColorBasic["Wood"] = "#DEB887";
             
    // end list of colors
             
    for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
             
    html.find('span').click(function(e) {
      callback($(this).attr('color'));
      editor.closeDropDown(true);
      e.preventDefault();
    });
             
    editor.createDropDown(caller, "color-picker", html);
  }
})});

Below is the image after insert text szie for our reference only.

Opps, the color bloard can be changed in my proviced code ablove.

Everything.... DONE!

Topic solved.

Thank you!
Alex.

Ohh you're welcome

I don't think font-size 30 is in our bbcode, and for the color palette, it is explain here : https://help.forumotion.com/t134603-personalize-the-color-palette-of-the-editor#906632 ^^

Topic archived

Have a nice day