tongChong
/
wangEditor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor: 统一处理 class 属性权限：public protected private

This commit is contained in:
wangfupeng 2020-06-15 11:42:38 +08:00
parent 57e7f50dd4
commit 63e9da46d3
14 changed files with 97 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/editor/command.ts
View File

@ -8,7 +8,7 @@ import { UA } from '../utils/util'
import Editor from './index'
class Command {
editor: Editor
public editor: Editor
constructor(editor: Editor) {
this.editor = editor
@ -19,10 +19,10 @@ class Command {
* @param name name
* @param value value
*/
do(name: string): void
do(name: string, value: string): void
do(name: string, value: DomElement): void
do(name: string, value?: string | DomElement): void {
public do(name: string): void
public do(name: string, value: string): void
public do(name: string, value: DomElement): void
public do(name: string, value?: string | DomElement): void {
const editor = this.editor
// // 使用 styleWithCSS —— 暂不使用
@ -44,14 +44,14 @@ class Command {
// 执行
switch (name) {
case 'insertHTML':
this._insertHTML(value as string)
this.insertHTML(value as string)
break
case 'insertElem':
this._insertElem(value as DomElement)
this.insertElem(value as DomElement)
break
default:
// 默认 command
this._execCommand(name, value as string)
this.execCommand(name, value as string)
break
}
@ -70,14 +70,14 @@ class Command {
* 插入 html
* @param html html 字符串
*/
_insertHTML(html: string): void {
private insertHTML(html: string): void {
const editor = this.editor
const range = editor.selection.getRange()
if (range == null) return
if (this.queryCommandSupported('insertHTML')) {
// W3C
this._execCommand('insertHTML', html)
this.execCommand('insertHTML', html)
} else if (range.insertNode) {
// IE
range.deleteContents()
@ -93,7 +93,7 @@ class Command {
* 插入 DOM 元素
* @param $elem DOM 元素
*/
_insertElem($elem: DomElement): void {
private insertElem($elem: DomElement): void {
const editor = this.editor
const range = editor.selection.getRange()
if (range == null) return
@ -109,7 +109,7 @@ class Command {
* @param name name
* @param value value
*/
_execCommand(name: string, value: string): void {
private execCommand(name: string, value: string): void {
document.execCommand(name, false, value)
}
@ -117,7 +117,7 @@ class Command {
* 执行 document.queryCommandValue
* @param name name
*/
queryCommandValue(name: string): string {
public queryCommandValue(name: string): string {
return document.queryCommandValue(name)
}
@ -125,7 +125,7 @@ class Command {
* 执行 document.queryCommandState
* @param name name
*/
queryCommandState(name: string): boolean {
public queryCommandState(name: string): boolean {
return document.queryCommandState(name)
}
@ -133,7 +133,7 @@ class Command {
* 执行 document.queryCommandSupported
* @param name name
*/
queryCommandSupported(name: string): boolean {
public queryCommandSupported(name: string): boolean {
return document.queryCommandSupported(name)
}
}

36
src/editor/index.ts
View File

@ -19,22 +19,22 @@ import initConfig from './init-fns/init-config'
let EDITOR_ID = 1
class Editor {
id: string
toolbarSelector: string
textSelector: string | undefined
customConfig: ConfigType
config: ConfigType
$toolbarElem: DomElement
$textContainerElem: DomElement
$textElem: DomElement
toolbarElemId: string
textElemId: string
isFocus: boolean
selection: SelectionAndRangeAPI
cmd: CommandAPI
txt: Text
menus: Menus
change: Function
public id: string
public toolbarSelector: string
public textSelector: string | undefined
public customConfig: ConfigType
public config: ConfigType
public $toolbarElem: DomElement
public $textContainerElem: DomElement
public $textElem: DomElement
public toolbarElemId: string
public textElemId: string
public isFocus: boolean
public selection: SelectionAndRangeAPI
public cmd: CommandAPI
public txt: Text
public menus: Menus
public change: Function
/**
* 构造函数
@ -73,14 +73,14 @@ class Editor {
* 初始化选区
* @param newLine 新建一行
*/
initSelection(newLine?: boolean): void {
public initSelection(newLine?: boolean): void {
initSelection(this, newLine)
}
/**
* 创建编辑器实例
*/
create(): void {
public create(): void {
// 初始化配置
initConfig(this)

26
src/editor/selection.ts
View File

@ -8,8 +8,8 @@ import { UA } from '../utils/util'
import Editor from './index'
class SelectionAndRange {
editor: Editor
_currentRange: Range | null
public editor: Editor
private _currentRange: Range | null
constructor(editor: Editor) {
this.editor = editor
@ -19,7 +19,7 @@ class SelectionAndRange {
/**
* 获取当前 range
*/
getRange(): Range | null {
public getRange(): Range | null {
return this._currentRange
}
@ -27,7 +27,7 @@ class SelectionAndRange {
* 保存选区范围
* @param _range 选区范围
*/
saveRange(_range?: Range): void {
public saveRange(_range?: Range): void {
if (_range) {
// 保存已有选区
this._currentRange = _range
@ -65,7 +65,7 @@ class SelectionAndRange {
* 折叠选区范围
* @param toStart true 开始位置，false 结束位置
*/
collapseRange(toStart: boolean = false): void {
public collapseRange(toStart: boolean = false): void {
const range = this._currentRange
if (range) {
range.collapse(toStart)
@ -75,7 +75,7 @@ class SelectionAndRange {
/**
* 获取选区范围内的文字
*/
getSelectionText(): string {
public getSelectionText(): string {
const range = this._currentRange
if (range) {
return range.toString()
@ -88,7 +88,7 @@ class SelectionAndRange {
* 获取选区范围的 DOM 元素
* @param range 选区范围
*/
getSelectionContainerElem(range?: Range): DomElement | undefined {
public getSelectionContainerElem(range?: Range): DomElement | undefined {
let r: Range | null | undefined
r = range || this._currentRange
let elem: Node
@ -102,7 +102,7 @@ class SelectionAndRange {
* 选区范围开始的 DOM 元素
* @param range 选区范围
*/
getSelectionStartElem(range?: Range): DomElement | undefined {
public getSelectionStartElem(range?: Range): DomElement | undefined {
let r: Range | null | undefined
r = range || this._currentRange
let elem: Node
@ -116,7 +116,7 @@ class SelectionAndRange {
* 选区范围结束的 DOM 元素
* @param range 选区范围
*/
getSelectionEndElem(range?: Range): DomElement | undefined {
public getSelectionEndElem(range?: Range): DomElement | undefined {
let r: Range | null | undefined
r = range || this._currentRange
let elem: Node
@ -129,7 +129,7 @@ class SelectionAndRange {
/**
* 选区是否为空（没有选择文字）
*/
isSelectionEmpty(): boolean {
public isSelectionEmpty(): boolean {
const range = this._currentRange
if (range && range.startContainer) {
if (range.startContainer === range.endContainer) {
@ -144,7 +144,7 @@ class SelectionAndRange {
/**
* 恢复选区范围
*/
restoreSelection(): void {
public restoreSelection(): void {
const selection = window.getSelection()
const r = this._currentRange
if (selection && r) {
@ -156,7 +156,7 @@ class SelectionAndRange {
/**
* 创建一个空白（即 &#8203 字符）选区
*/
createEmptyRange(): void {
public createEmptyRange(): void {
const editor = this.editor
const range = this.getRange()
let $elem: DomElement
@ -195,7 +195,7 @@ class SelectionAndRange {
* @param toStart true 开始位置，false 结束位置
* @param isContent 是否选中 $elem 的内容
*/
createRangeByElem($elem: DomElement, toStart?: boolean, isContent?: boolean): void {
public createRangeByElem($elem: DomElement, toStart?: boolean, isContent?: boolean): void {
if (!$elem.length) {
return
}

4
src/menus/bold/index.ts
View File

@ -21,7 +21,7 @@ class Bold extends BtnMenu implements MenuActive {
/**
* 点击事件
*/
clickHandler(): void {
public clickHandler(): void {
const editor = this.editor
const isSelectEmpty = editor.selection.isSelectionEmpty()
@ -43,7 +43,7 @@ class Bold extends BtnMenu implements MenuActive {
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void {
public tryChangeActive(): void {
const editor = this.editor
if (editor.cmd.queryCommandState('bold')) {
this.active()

4
src/menus/head/index.ts
View File

@ -35,7 +35,7 @@ class Head extends DropListMenu implements MenuActive {
* 执行命令
* @param value value
*/
command(value: string): void {
public command(value: string): void {
const editor = this.editor
const $selectionElem = editor.selection.getSelectionContainerElem()
if ($selectionElem && editor.$textElem.equal($selectionElem)) {
@ -50,7 +50,7 @@ class Head extends DropListMenu implements MenuActive {
/**
* 尝试改变菜单激活（高亮）状态
*/
tryChangeActive() {
public tryChangeActive() {
const editor = this.editor
const reg = /^h/i
const cmdValue = editor.cmd.queryCommandValue('formatBlock')

6
src/menus/index.ts
View File

@ -6,11 +6,11 @@
import Editor from '../editor/index'
import Menu from './menu-constructors/Menu'
import MenuConstructorList from './menu-list'
import { MenuActive } from './menu-constructors/Menu'
// import { MenuActive } from './menu-constructors/Menu'
class Menus {
editor: Editor
menuList: Menu[]
public editor: Editor
public menuList: Menu[]
constructor(editor: Editor) {
this.editor = editor

8
src/menus/link/index.ts
View File

@ -20,11 +20,11 @@ class Link extends PanelMenu implements MenuActive {
/**
* 菜单点击事件
*/
clickHandler(): void {
public clickHandler(): void {
const editor = this.editor
let $linkElem
if (this._active) {
if (this.isActive) {
// 菜单被激活，说明选区在链接里
$linkElem = editor.selection.getSelectionContainerElem()
if (!$linkElem) {
@ -50,7 +50,7 @@ class Link extends PanelMenu implements MenuActive {
* @param text 文本
* @param link 链接
*/
createPanel(text: string, link: string): void {
private createPanel(text: string, link: string): void {
const conf = createPanelConf(this.editor, text, link)
const panel = new Panel(this, conf)
panel.create()
@ -61,7 +61,7 @@ class Link extends PanelMenu implements MenuActive {
/**
* 尝试修改菜单 active 状态
*/
tryChangeActive() {
public tryChangeActive() {
const editor = this.editor
if (isActive(editor)) {
this.active()

25
src/menus/menu-constructors/DropList.ts
View File

@ -21,13 +21,14 @@ export type DropListConf = {
}
class DropList {
menu: DropListMenu
conf: DropListConf
hideTimeoutId: number
showTimeoutId: number
$container: DomElement
_rendered: boolean
_show: boolean
private menu: DropListMenu
private conf: DropListConf
private $container: DomElement
private rendered: boolean
private _show: boolean
public hideTimeoutId: number
public showTimeoutId: number
constructor(menu: DropListMenu, conf: DropListConf) {
this.hideTimeoutId = 0
@ -80,14 +81,14 @@ class DropList {
// 记录属性
this.$container = $container
this._rendered = false
this.rendered = false
this._show = false
}
/**
* 显示 DropList
*/
show() {
public show() {
if (this.hideTimeoutId) {
// 清除之前的定时隐藏
clearTimeout(this.hideTimeoutId)
@ -99,7 +100,7 @@ class DropList {
if (this._show) {
return
}
if (this._rendered) {
if (this.rendered) {
// 显示
$container.show()
} else {
@ -110,7 +111,7 @@ class DropList {
// 加入到 DOM
$menuELem.append($container)
this._rendered = true
this.rendered = true
}
// 修改属性
@ -120,7 +121,7 @@ class DropList {
/**
* 隐藏 DropList
*/
hide() {
public hide() {
if (this.showTimeoutId) {
// 清除之前的定时显示
clearTimeout(this.showTimeoutId)

2
src/menus/menu-constructors/DropListMenu.ts
View File

@ -9,7 +9,7 @@ import Menu from './Menu'
import DropList, { DropListConf } from './DropList'
class DropListMenu extends Menu {
dropList: DropList
public dropList: DropList
constructor($elem: DomElement, editor: Editor, conf: DropListConf) {
super($elem, editor)

13
src/menus/menu-constructors/Menu.ts
View File

@ -14,9 +14,9 @@ export interface MenuActive {
}
class Menu {
$elem: DomElement
editor: Editor
_active: boolean // 菜单是否处于激活状态，如选中一段加粗文字时，bold 菜单要被激活（即高亮显示）
public $elem: DomElement
public editor: Editor
private _active: boolean // 菜单是否处于激活状态，如选中一段加粗文字时，bold 菜单要被激活（即高亮显示）
constructor($elem: DomElement, editor: Editor) {
this.$elem = $elem
@ -54,6 +54,13 @@ class Menu {
this._active = false
this.$elem.removeClass('w-e-active')
}
/**
* 是否处于激活状态
*/
public get isActive() {
return this._active
}
}
export default Menu

10
src/menus/menu-constructors/Panel.ts
View File

@ -28,9 +28,9 @@ export type PanelConf = {
}
class Panel {
menu: PanelMenu
conf: PanelConf
$container: DomElement
private menu: PanelMenu
private conf: PanelConf
private $container: DomElement
constructor(menu: PanelMenu, conf: PanelConf) {
this.menu = menu
@ -41,7 +41,7 @@ class Panel {
/**
* 创建并展示 panel
*/
create(): void {
public create(): void {
const menu = this.menu
if (CREATED_MENUS.has(menu)) {
// 创建过了
@ -177,7 +177,7 @@ class Panel {
/**
* 移除 penal
*/
remove(): void {
public remove(): void {
const menu = this.menu
const $container = this.$container
if ($container) {

2
src/menus/menu-constructors/PanelMenu.ts
View File

@ -9,7 +9,7 @@ import Menu from './Menu'
import Panel from './Panel'
class PanelMenu extends Menu {
panel: Panel | undefined
public panel: Panel | undefined
constructor($elem: DomElement, editor: Editor) {
super($elem, editor)

18
src/text/index.ts
View File

@ -19,8 +19,8 @@ type TextEventHooks = {
}
class Text {
editor: Editor
eventHooks: TextEventHooks // Text 各个事件的钩子函数，如 keyup 时要执行哪些函数
public editor: Editor
public eventHooks: TextEventHooks // Text 各个事件的钩子函数，如 keyup 时要执行哪些函数
constructor(editor: Editor) {
this.editor = editor
@ -38,7 +38,7 @@ class Text {
/**
* 初始化
*/
init(): void {
public init(): void {
// 实时保存选取范围
this._saveRange()
@ -52,7 +52,7 @@ class Text {
/**
* 清空内容
*/
clear(): void {
public clear(): void {
this.html('<p><br></p>')
}
@ -60,7 +60,7 @@ class Text {
* 设置/获取 html
* @param val html 字符串
*/
html(val?: string): void | string {
public html(val?: string): void | string {
const editor = this.editor
const $textElem = editor.$textElem
@ -84,7 +84,7 @@ class Text {
* 获取/设置 字符串内容
* @param val text 字符串
*/
text(val?: string): void | string {
public text(val?: string): void | string {
const editor = this.editor
const $textElem = editor.$textElem
@ -106,7 +106,7 @@ class Text {
* 追加 html 内容
* @param html html 字符串
*/
append(html: string): void {
public append(html: string): void {
const editor = this.editor
const $textElem = editor.$textElem
$textElem.append($(html))
@ -118,7 +118,7 @@ class Text {
/**
* 每一步操作，都实时保存选区范围
*/
_saveRange(): void {
private _saveRange(): void {
const editor = this.editor
const $textElem = editor.$textElem
@ -146,7 +146,7 @@ class Text {
/**
* 绑定事件，事件会触发钩子函数
*/
_bindEvent(): void {
private _bindEvent(): void {
const $textElem = this.editor.$textElem
const eventHooks = this.eventHooks

2
test/menus/index.test.ts
View File

@ -16,5 +16,5 @@ test('初始化 menus', () => {
test('修改菜单激活状态', () => {
const menus = editor.menus
menus.changeActive()
expect(menus.menuList[0]._active).toBeFalsy()
expect(menus.menuList[0].isActive).toBeFalsy()
})