富文本编辑器字号字体

virtual
15008401624 2020-12-02 15:56:48 +08:00
parent 55a66cbd72
commit a463d3298e
1 changed files with 117 additions and 3 deletions

View File

@ -546,8 +546,38 @@
var config = {
// 默认菜单配置
menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'],
menus: ['head', 'bold','fontSize','fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'],
fontNames: ['微软雅黑','黑体', '仿宋', '楷体', '标楷体', '华文仿宋', '华文楷体', '宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'],
fontSizes: {
'x-small': {
name: '10px',
value: '1'
},
small: {
name: '13px',
value: '2'
},
normal: {
name: '16px',
value: '3'
},
large: {
name: '18px',
value: '4'
},
'x-large': {
name: '24px',
value: '5'
},
'xx-large': {
name: '32px',
value: '6'
},
'xxx-large': {
name: '48px',
value: '7'
}
},
colors: ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff'],
// // 语言配置
@ -1349,6 +1379,86 @@
}
};
function FontSize(editor) {
var _this = this;
this.editor = editor;
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"><i/></div>');
this.type = 'droplist';
// 当前是否 active 状态
this._active = false;
// 初始化 droplist
this.droplist = new DropList(this, {
width: 160,
$title: $('<p>字号</p>'),
type: 'list', // droplist 以列表形式展示
list: [{ $elem: $('<span style="font-size: x-small;">x-small</span>'), value: '1' }, { $elem: $('<span style="font-size: small;">small</span>'), value: '2' }, { $elem: $('<span>normal</span>'), value: '3' }, { $elem: $('<span style="font-size: large;">large</span>'), value: '4' }, { $elem: $('<span style="font-size: x-large;">x-large</span>'), value: '5' }, { $elem: $('<span style="font-size: xx-large;">xx-large</span>'), value: '6' }],
onClick: function onClick(value) {
// 注意 this 是指向当前的 FontSize 对象
_this._command(value);
}
});
}
// 原型
FontSize.prototype = {
constructor: FontSize,
// 执行命令
_command: function _command(value) {
var editor = this.editor;
editor.cmd.do('fontSize', value);
}
};
/*
menu - fontName
*/
// 构造函数
function FontName(editor) {
var _this = this;
this.editor = editor;
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"><i/></div>');
this.type = 'droplist';
// 当前是否 active 状态
this._active = false;
// 获取配置的字体
var config = editor.config;
var fontNames = config.fontNames || [];
// 初始化 droplist
this.droplist = new DropList(this, {
width: 100,
$title: $('<p>字体</p>'),
type: 'list', // droplist 以列表形式展示
list: fontNames.map(function (fontName) {
return { $elem: $('<span style="font-family: ' + fontName + ';">' + fontName + '</span>'), value: fontName };
}),
onClick: function onClick(value) {
// 注意 this 是指向当前的 FontName 对象
_this._command(value);
}
});
}
// 原型
FontName.prototype = {
constructor: FontName,
_command: function _command(value) {
var editor = this.editor;
editor.cmd.do('fontName', value);
}
};
/*
menu - link
*/
@ -2977,6 +3087,10 @@
MenuConstructors.head = Head;
MenuConstructors.fontSize = FontSize;
MenuConstructors.fontName = FontName;
MenuConstructors.link = Link;
MenuConstructors.italic = Italic;