feat:设置字体功能实现
This commit is contained in:
NeverSellSuteAC
parent
0840146130
commit
00f334e8c1
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
wangEditor demo
|
||||
|
|
@ -27,8 +29,14 @@
|
|||
// editor.customConfig.onfocus = function (newHtml) {
|
||||
// console.log('onfocus', newHtml)
|
||||
// }
|
||||
editor.customConfig.fontNames = [
|
||||
'宋体',
|
||||
'微软雅黑',
|
||||
]
|
||||
|
||||
editor
|
||||
editor.create()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
export default {
|
||||
menus: ['bold', 'head', 'link', 'underline', 'strikethrough'],
|
||||
menus: ['bold', 'head', 'link', 'underline', 'strikethrough', "fontStyle"],
|
||||
|
||||
fontNames: ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'],
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* @description 字体 class
|
||||
* @author dyl
|
||||
*/
|
||||
import $, { DomElement } from '../../utils/dom-core'
|
||||
|
||||
export type DroListItem = {
|
||||
$elem: DomElement
|
||||
value: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 封装的一个字体菜单列表数据的组装对象,
|
||||
* 原因是因为在constructor函数中,直接执行此流程,会让代码量看起来较多,
|
||||
* 如果要在constructor调用外部函数,个人目前发现会有错误提示,
|
||||
* 因此,想着顺便研究实践下ts,遍创建了这样一个类
|
||||
*/
|
||||
class FontStyleList {
|
||||
private itemList: DroListItem[]
|
||||
|
||||
constructor(list: string[]) {
|
||||
this.itemList = []
|
||||
list.forEach(fontValue => {
|
||||
this.itemList.push(
|
||||
{
|
||||
$elem: $(`<p style="font-family:'${fontValue}'">${fontValue}</p>`),
|
||||
value: fontValue
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
public getItemList(): DroListItem[] {
|
||||
return this.itemList
|
||||
}
|
||||
}
|
||||
|
||||
export default FontStyleList
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* @description 字体样式 FontStyle
|
||||
* @author dyl
|
||||
*
|
||||
*/
|
||||
|
||||
import DropListMenu from '../menu-constructors/DropListMenu'
|
||||
import $ from '../../utils/dom-core'
|
||||
import Editor from '../../editor/index'
|
||||
import { MenuActive } from '../menu-constructors/Menu'
|
||||
import FontStyleList from './FontStyleList'
|
||||
|
||||
class FontStyle extends DropListMenu implements MenuActive {
|
||||
constructor(editor: Editor) {
|
||||
const $elem = $(
|
||||
`<div class="w-e-menu">
|
||||
<i class="w-e-icon-font"></i>
|
||||
</div>`
|
||||
)
|
||||
let fontStyleList = new FontStyleList(editor.customConfig.fontNames)
|
||||
const fontListConf = {
|
||||
width: 100,
|
||||
title: '设置字体',
|
||||
type: 'list',
|
||||
list: fontStyleList.getItemList(),
|
||||
clickHandler: (value: string) => {
|
||||
// this 是指向当前的 FontStyle 对象
|
||||
this.command(value)
|
||||
},
|
||||
}
|
||||
super($elem, editor, fontListConf)
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行命令
|
||||
* @param value value
|
||||
*/
|
||||
public command(value: string): void {
|
||||
const editor = this.editor
|
||||
editor.cmd.do('fontName', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 尝试修改菜单激活状态
|
||||
* ?字体是否需要有激活状态这个操作?
|
||||
*/
|
||||
public tryChangeActive(): void {
|
||||
// const editor = this.editor
|
||||
// const cmdValue = editor.cmd.queryCommandValue('fontName')
|
||||
// if (menusCongfig.fontNames.indexOf(cmdValue) >= 0) {
|
||||
// this.active()
|
||||
// } else {
|
||||
// this.unActive()
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export default FontStyle
|
||||
|
|
@ -8,6 +8,7 @@ import Head from './head/index'
|
|||
import Link from './link/index'
|
||||
import Underline from './underline/index'
|
||||
import Strikethrough from './strikethrough/index'
|
||||
import FontStyle from './font-style/index'
|
||||
|
||||
export default {
|
||||
bold: Bold,
|
||||
|
|
@ -15,4 +16,5 @@ export default {
|
|||
link: Link,
|
||||
underline: Underline,
|
||||
strikethrough: Strikethrough,
|
||||
fontStyle: FontStyle
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* @description FontStyle menu
|
||||
* @author dyl
|
||||
*/
|
||||
|
||||
import Editor from '../../src/editor'
|
||||
import createEditor from '../fns/create-editor'
|
||||
import mockCmdFn from '../fns/command-mock'
|
||||
import FontStyle from '../../src/menus/font-style'
|
||||
import { getMenuInstance } from '../fns/menus'
|
||||
|
||||
let editor: Editor
|
||||
let fontStyleMenu: FontStyle
|
||||
|
||||
test('FontStyle 菜单：dropList', () => {
|
||||
editor = createEditor(document, 'div1') // 赋值给全局变量
|
||||
fontStyleMenu = getMenuInstance(editor, FontStyle) as FontStyle // 赋值给全局变量
|
||||
expect(fontStyleMenu.dropList).not.toBeNull()
|
||||
fontStyleMenu.dropList.show()
|
||||
expect(fontStyleMenu.dropList.isShow).toBe(true)
|
||||
fontStyleMenu.dropList.hide()
|
||||
expect(fontStyleMenu.dropList.isShow).toBe(false)
|
||||
})
|
||||
|
||||
test('FontStyle 菜单：设置字体', () => {
|
||||
mockCmdFn(document)
|
||||
const cmdVal = '宋体'
|
||||
fontStyleMenu.command(cmdVal)
|
||||
expect(document.execCommand).toBeCalledWith('fontName', false, cmdVal)
|
||||
})
|
||||
Loading…
Reference in New Issue