Can't figure this one out on my own.
It selects every font via some large font (I assume it's the fontSize=7). So, if I select font size, let's say 13px, and start typing it goes to a huge font first, but if I select the 13px font again it starts rendering the 13px font. It does this for every font. (Huge font first then it goes to the font you click on the second time). Any ideas why?
This is a link to the editor's files: https://github.com/wysiwygjs/wysiwyg.js
// Fontsize plugin
fontsize: index != 0 ? false : {
title: 'Size',
image: '\uf034', // <img src="path/to/image.png" width="16" height="16" alt="" />
popup: function( $popup, $button ) {
// Hack: http://stackoverflow.com/questions/5868295/document-execcommand-fontsize-in-pixels/5870603#5870603
var list_fontsizes = [];
for( var i=8; i <= 11; ++i )
list_fontsizes.push(i+'px');
for( var i=12; i <= 28; i+=2 )
list_fontsizes.push(i+'px');
list_fontsizes.push('36px');
list_fontsizes.push('48px');
list_fontsizes.push('72px');
var $list = $('<div/>').addClass('wysiwyg-plugin-list')
.attr('unselectable','on');
$.each( list_fontsizes, function( index, size ) {
var $link = $('<a/>').attr('href','#')
.html( size )
.click(function(event) {
$(element).wysiwyg('shell').fontSize(7).closePopup();
$(element).wysiwyg('container')
.find('font[size=7]')
.removeAttr("size")
.css("font-size", size);
// prevent link-href-#
event.stopPropagation();
event.preventDefault();
return false;
});
$list.append( $link );
});
$popup.append( $list );
}
//showstatic: true, // wanted on the toolbar
//showselection: true // wanted on selection
},
I made some progress. I changed it like this and it seems to be changing the fonts now without that large font jump but it doesn't want to cancel a previous font and start a new one. It keep changing the entire text to a new font even when you do a new line.
// Fontsize plugin
fontsize: index != 0 ? false : {
title: 'Size',
image: '\uf034', // <img src="path/to/image.png" width="16" height="16" alt="" />
popup: function( $popup, $button ) {
// Hack: http://stackoverflow.com/questions/5868295/document-execcommand-fontsize-in-pixels/5870603#5870603
var list_fontsizes = [];
for( var i=8; i <= 11; ++i )
list_fontsizes.push(i+'px');
for( var i=12; i <= 28; i+=2 )
list_fontsizes.push(i+'px');
list_fontsizes.push('36px');
list_fontsizes.push('48px');
list_fontsizes.push('72px');
var $list = $('<div/>').addClass('wysiwyg-plugin-list')
.attr('unselectable','on');
$.each( list_fontsizes, function( fontSize, size ) {
var $link = $('<a/>').attr('href','#')
.html( size )
.click(function(event) {
$(element).wysiwyg('shell').fontSize().closePopup();
$(element).wysiwyg('container')
.removeAttr("size")
.css("font-size", size);
// prevent link-href-#
event.stopPropagation();
event.preventDefault();
return false;
});
$list.append( $link );
});
$popup.append( $list );
}
//showstatic: true, // wanted on the toolbar
//showselection: true // wanted on selection
},
