SCEditor
SCEditor copied to clipboard
Font-size BBCode
I try to replace font sizes (1-7) by pixel sizes. So far, I have done this:
sceditor.formats.bbcode.set("size", {
tags: {
span: null
},
styles: {
'font-size': null
},
format: function (element, content) {
fontSize = sceditor.dom.css(element, 'fontSize');
return '[size="'+ fontSize +'"]' + content + '[/size]';
},
html: function (token, attrs, content) {
return '<span style="font-size: '+ attrs.defaultattr +'px;">' + content + '</span>';
},
isInline: true
});
sceditor.command.set("size", {
exec: function(caller) {
var editor = this, $content = $("<div />");
var sizes = [10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 60];
for (var i = 0; i < sizes.length; i++)
{
$('<a class="sceditor-size-option" href="#">' +
'<span style="font-size: ' + sizes[i] + 'px; line-height: ' + sizes[i] + 'px;">' + sizes[i] + 'px</span>' +
'</a>')
.data('size', sizes[i])
.click(function (e) {
editor.wysiwygEditorInsertHtml('<span style="font-size: ' + $(this).data('size') + 'px;">', '</span>');
editor.closeDropDown(true);
e.preventDefault();
})
.appendTo($content);
}
editor.createDropDown(caller, "size-picker", $content.get(0));
},
tooltip: "Font size"
});
Dropdown with sizes works and the preview is correct. However, when I change for source mode, [size] is doubled like this:
[size=40px][size=40px]Nullam pulvinar purus purus, eu pellentesque enim bibendum id[/size][/size]
And if I do it multiple times, I end up with size replaced with another value like this:
[size=14px][size=14px]Nullam pulvinar purus purus, eu pellentesque enim bibendum id[/size][/size]
Am I missing something? Thanks!
Unfortunately it is a bug. Custom format not working as expected and described in docs at https://www.sceditor.com/documentation/custom-bbcodes/ and running twice when we try to overload defaults.
I'm stuck with it when trying to overload font
.
@samclarke any comments or suggestion?