Sceditor - Use pixels at font-size

Aforic · 22-01-2017, 01:14 PM

Hi,

I don't use Mybb,but after googling something related to sceditor, i've found that Mybb uses sceditor as wysiwyg bbcodeeditor.
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:

Becomes:

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

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

And
Code:

Code:
/********************************************
 * Update quote to support pid and dateline *
 ********************************************/

So we will replace thesize bbcode ($.sceditor.plugins.bbcode.bbcode.set('size', {...)and the size command ($.sceditor.command.set('size', {...)

To this:

Code:

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) {
 varcontent  = $('<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) {
 vareditor = 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) {
 vareditor = this;
 
 $.sceditor.command.get('size')._dropDown(
 editor,
 caller,
 function(size) {
 editor.insertText('[size='+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.[/size]

Sceditor - Use pixels at font-size

Submitted by Aforic, 22-01-2017, 01:14 PM, Thread ID: 28304