项目中用到了wangEditor这个编辑器组件,官网地址:http://www.wangeditor.com,最新版本效果图如下:
,没有字体大小控制和字体样式的功能。只好在此基础上做修改,想达到效果如下:
话不多说,直接上代码:
1)首先是配置信息:
var config = {
// 字体大小配置
fontSizes: {h1:1,h2:2,h3:3,h4:4,h5:5,h6:6,h7:7},
...
}
2)字体配置函数及构造函数
/*
menu - fontsize
*/
//构造函数
function FontSize(editor) {
var _this = this;
this.editor = editor;
this.$elem = $('<div><i><i/></div>');
this.type = 'droplist';
// 当前是否 active 状态
this._active = false;
// 初始化 droplist
this.droplist = new DropList(this, {
width: 100,
$title: $('<p>设置字体</p>'),
type: 'list', // droplist 以列表形式展示
list: [{ $elem: $('<span>一号字体</span>'), value: '<p>' },
{ $elem: $('<span>二号字体</span>'), value: '<p>' },
{ $elem: $('<span>三号字体</span>'), value: '<p>' },
{ $elem: $('<span>四号字体</span>'), value: '<p>' },
{ $elem: $('<span>五号字体</span>'), value: '<p>' },
{ $elem: $('<span>六号字体</span>'), value: '<p>' },
{ $elem: $('<span>七号字体</span>'), value: '<p>' }],
onClick: function onClick(value) {
// 注意 this 是指向当前的 Head 对象cb
_this._command(value);
}
});
}
// 原型
FontSize.prototype = {
constructor: FontSize,
// 执行命令
_command: function _command(value) {
var editor = this.editor;
var key = $(value).attr("class");
var fs = editor.config.fontSizes[key];
//console.log("key",key+" ;value: "+fs);
var text = editor.selection.getSelectionText();
//console.log("selection text : ",text);
editor.cmd.do('fontSize', fs);
},
// 试图改变 active 状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem;
//var reg = /^h/i;
var cmdValue = editor.cmd.queryCommandValue('fontSize');
if (cmdValue) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};
3)存储菜单的构造函数:
MenuConstructors.fontsize = FontSize;
测试哈