I'm trying to add a button to change the font size in Redactor JS but it doesn't work. Here's my code to intialise Redactor :
$('#redactor_content').redactor({
buttons: buttons,
buttonsCustom: {
superscript: {
title: 'Superscript',
callback: function(obj, event, key) {
obj.execCommand('superscript')
}
},
subscript: {
title: 'Subscript',
callback: function(obj, event, key) {
obj.execCommand('subscript')
}
}
},
plugins: ['fontsize']
});
and this is my plugin :
RedactorPlugins.fontsize = {
init: function()
{
var fonts = [10, 11, 12, 14, 16, 18, 20, 24, 28, 30];
var that = this;
var dropdown = {};
$.each(fonts, function(i, s)
{
dropdown['s' + i] = { title: s + 'px', callback: function() { that.setFontsize(s); } };
});
dropdown['remove'] = { title: 'Remove font size', callback: function() { that.resetFontsize(); } };
this.buttonAdd( 'fontsize', 'Change font size', false, dropdown);
},
setFontsize: function(size)
{
this.inlineSetStyle('font-size', size + 'px');
},
resetFontsize: function()
{
this.inlineRemoveStyle('font-size');
}
};
But nothing appears in the toolbar. Any idea? Did I do anything wrong?
Try adding this code before yuour plugin
if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.fontsize = {
init: function(){
var fonts = [10, 11, 12, 14, 16, 18, 20, 24, 28, 30];
var that = this;
var dropdown = {};
$.each(fonts, function(i, s){
dropdown['s' + i] = { title: s + 'px', callback: function() { that.setFontsize(s); } };
});
dropdown['remove'] = { title: 'Remove font size', callback: function() { that.resetFontsize(); } };
this.buttonAdd( 'fontsize', 'Change font size', false, dropdown);
},
setFontsize: function(size){
this.inlineSetStyle('font-size', size + 'px');
},
resetFontsize: function(){
this.inlineRemoveStyle('font-size');
}
};
Also remove any extra code to ensure you're having a problem with the code in question. Maybe also stick it in a document ready event
<script type="text/javascript">
$(document).ready(
function()
{
$('#redactor_content').redactor({
focus: true,
plugins: ['fontsize']
});
}
);
</script>
Code works for me.
You can use the official "fontsize" plugin for that if you want: https://github.com/johnsardine/redactor-plugins
There are also other new plugins available:
fontcolor.js, fontsize.js and fontfamily.js
When included, you can use them like this:
elem.redactor({
plugins: ['fontcolor', 'fontsize', 'fontfamily']
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.