Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690

Sceditor - Use pixels at font-size

$
0
0
Hi,

I don't use Mybb, but after googling something related to sceditor, i've found that Mybb uses sceditor as wysiwyg bbcode editor.
I use sceditor for my site, so i would like to share this modification in case you are interested into it.
It replaces the font size values (1-7) to pixels.
So this: 

.png   s1.png (Size: 2.97 KB / Downloads: 140)
Becomes:

.png   s2.png (Size: 3.28 KB / Downloads: 153)

You will need to edit your /jscripts/bbcodes_sceditor.js file.
And replace the content between:
Code:
/***********************************************************
     * Update size tag to use xx-small-xx-large instead of 1-7 *
     ***********************************************************/
And
Code:
/********************************************
     * Update quote to support pid and dateline *
     ********************************************/
So we will replace the size bbcode ($.sceditor.plugins.bbcode.bbcode.set('size', {...) and the size command ($.sceditor.command.set('size', {...)

To this:

Code:
$.sceditor.plugins.bbcode.bbcode.set('size', {
    format: function($element, content) {
        var size  = $element.css('font-size').replace('px', '');

        return '[size='+size+']'+content+'[/size]';
    },
    html: function(token, attrs, content) {

        return '<span style="font-size:'+attrs.defaultattr+'px">'+content+'</span>';
    }
});
$.sceditor.command.set('size', {
    _dropDown: function(editor, caller, callback) {
        var    content   = $('<div/>', {style:'overflow-y:auto;overflow-x:hidden;max-height:243px;min-width:89px;'}),
            clickFunc = function (e) {
                callback($(this).data('size'));
                editor.closeDropDown(true);
                e.preventDefault();
            };

        for (var i=9; i <= 24; i++) {
            content.append($('<a href="javascript:;" class="sceditor-fontsize-option" data-size="'+i+'" style="font-size:'+i+'px;">'+i+'px</a>').click(clickFunc));
        }
        editor.createDropDown(caller, 'fontsize-picker', content);
    },
    exec: function(caller) {
        var    editor = this;

        $.sceditor.command.get('size')._dropDown(
            editor,
            caller,
            function(size) {
                editor.execCommand('fontsize', size);
                var getBody = editor.getBody();
                
                $(getBody).find('font[size]').removeAttr("size").css("font-size", size+"px");
            }
        );
    },
    txtExec: function(caller) {
        var    editor = this;

        $.sceditor.command.get('size')._dropDown(
            editor,
            caller,
            function(size) {
                editor.insertText('[size='+size+']', '[/size]');
            }
        );
    }
});
I've set it to show values from 9-24px but you may modify it to your needs.

Please mind that it may break your current posts.
Eg the text of an old post which has size=7 will be converted to ...font-size:"7px".... so in that case you should modify your bbcode parser to check if value of size= is <9 then modify the size=3 to eg ...font-size:"9px"...., the size=4 to eg ...font-size:"10px".... etc.

Viewing all articles
Browse latest Browse all 690

Trending Articles