富文本编辑器字号字体
parent
55a66cbd72
commit
a463d3298e
|
@ -546,10 +546,40 @@
|
|||
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'],
|
||||
|
||||
|
||||
// // 语言配置
|
||||
// lang: {
|
||||
// '设置标题': 'title',
|
||||
|
@ -1348,6 +1378,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
|
||||
|
@ -2976,6 +3086,10 @@
|
|||
MenuConstructors.bold = Bold;
|
||||
|
||||
MenuConstructors.head = Head;
|
||||
|
||||
MenuConstructors.fontSize = FontSize;
|
||||
|
||||
MenuConstructors.fontName = FontName;
|
||||
|
||||
MenuConstructors.link = Link;
|
||||
|
||||
|
|
Loading…
Reference in New Issue