MyBB Community Forums

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: 
[attachment=35901]
Becomes:
[attachment=35902]

You will need to edit your /jscripts/bbcodes_sceditor.js file.
And replace the content between:

/***********************************************************
	 * Update size tag to use xx-small-xx-large instead of 1-7 *
	 ***********************************************************/

And

/********************************************
	 * 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:

$.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.

thanks bro,