lijianqi/uai-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加字体设置菜单

Browse Source
This commit is contained in:
麦香缘
2025-02-18 11:24:31 +08:00
parent 7c78fb9e1a
commit 3a35cc45a5
10 changed files with 523 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menus/toolbar/Classic.ts
+31
View File
@@ -7,11 +7,17 @@ import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEdito
import menuIcon from "../../../assets/icons/menu.svg";
import { ScrollableDiv } from "./ScrollableDiv";
import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";
import { Redo } from "./base/Redo";
import { Undo } from "./base/Undo";
import { FormatPainter } from "./base/FormatPainter";
import { ClearFormat } from "./base/ClearFormat";
import { FontFamily } from "./base/FontFamily";
import { FontSize } from "./base/FontSize";
/**
* 传统菜单栏
*/
@@ -33,6 +39,11 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
baseMenuFormatPainter!: FormatPainter;
baseMenuClearFormat!: ClearFormat;
baseMenuFontFamily!: FontFamily;
baseMenuFontSize!: FontSize;
baseMenuFontSizeIncrease!: FontSizeIncrease;
baseMenuFontSizeDecrease!: FontSizeDecrease;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
this.defaultToolbarMenus = defaultToolbarMenus;
@@ -118,6 +129,18 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.baseMenuClearFormat = new ClearFormat({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuClearFormat);
this.baseMenuFontFamily = new FontFamily({ menuType: "select", enable: true });
this.eventComponents.push(this.baseMenuFontFamily);
this.baseMenuFontSize = new FontSize({ menuType: "select", enable: true });
this.eventComponents.push(this.baseMenuFontSize);
this.baseMenuFontSizeIncrease = new FontSizeIncrease({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuFontSizeIncrease);
this.baseMenuFontSizeDecrease = new FontSizeDecrease({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuFontSizeDecrease);
}
/**
* 创建基础菜单
@@ -139,5 +162,13 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
group1.appendChild(this.baseMenuRedo);
group1.appendChild(this.baseMenuFormatPainter);
group1.appendChild(this.baseMenuClearFormat);
const group2 = document.createElement("div");
group2.classList.add("uai-classic-virtual-group");
this.classicMenuBaseGroup.appendChild(group2);
group2.appendChild(this.baseMenuFontFamily);
group2.appendChild(this.baseMenuFontSize);
group2.appendChild(this.baseMenuFontSizeIncrease);
group2.appendChild(this.baseMenuFontSizeDecrease);
}
}
src/components/menus/toolbar/Ribbon.ts
+36 -1
View File
@@ -7,12 +7,18 @@ import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEdito
import { t } from "i18next";
import { ScrollableDiv } from "./ScrollableDiv";
import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";
import { Redo } from "./base/Redo";
import { Undo } from "./base/Undo";
import { FormatPainter } from "./base/FormatPainter";
import { ClearFormat } from "./base/ClearFormat";
import { FontFamily } from "./base/FontFamily";
import { FontSize } from "./base/FontSize";
/**
* 经典菜单栏
*/
@@ -32,10 +38,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
// 基础菜单
baseMenuUndo!: Undo;
baseMenuRedo!: Redo;
baseMenuFormatPainter!: FormatPainter;
baseMenuClearFormat!: ClearFormat;
baseMenuFontFamily!: FontFamily;
baseMenuFontSize!: FontSize;
baseMenuFontSizeIncrease!: FontSizeIncrease;
baseMenuFontSizeDecrease!: FontSizeDecrease;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
this.defaultToolbarMenus = defaultToolbarMenus;
@@ -141,6 +151,18 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.baseMenuClearFormat = new ClearFormat({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuClearFormat);
this.baseMenuFontFamily = new FontFamily({ menuType: "select", enable: true });
this.eventComponents.push(this.baseMenuFontFamily);
this.baseMenuFontSize = new FontSize({ menuType: "select", enable: true });
this.eventComponents.push(this.baseMenuFontSize);
this.baseMenuFontSizeIncrease = new FontSizeIncrease({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuFontSizeIncrease);
this.baseMenuFontSizeDecrease = new FontSizeDecrease({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuFontSizeDecrease);
}
/**
@@ -171,5 +193,18 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
group1.appendChild(group1row2);
group1row2.appendChild(this.baseMenuFormatPainter);
group1row2.appendChild(this.baseMenuClearFormat);
const group2 = document.createElement("div");
group2.classList.add("uai-ribbon-virtual-group");
this.ribbonMenuBaseGroup.appendChild(group2);
const group2row1 = document.createElement("div");
group2row1.classList.add("uai-ribbon-virtual-group-row");
group2.appendChild(group2row1);
group2row1.appendChild(this.baseMenuFontFamily);
group2row1.appendChild(this.baseMenuFontSize);
group2row1.appendChild(this.baseMenuFontSizeIncrease);
group2row1.appendChild(this.baseMenuFontSizeDecrease);
}
}
src/components/menus/toolbar/base/FontFamily.ts
+93
View File
@@ -0,0 +1,93 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
/**
* 基础菜单：设置字体
*/
export class FontFamily extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "select",
enable: true,
hideText: true,
text: t('base.fontFamily.text'),
tooltip: t('base.fontFamily.text'),
}
// 功能按钮
menuButton: MenuButton;
constructor(options: MenuButtonOptions) {
super();
// 初始化功能按钮选项
this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
// 创建功能按钮
this.menuButton = new MenuButton(this.menuButtonOptions);
}
/**
* 定义创建方法
* @param event
* @param options
*/
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
this.menuButton.onCreate(event, options);
this.menuButton.container.classList.add("uai-editor-menu-select");
this.menuButton.menuButtonContent.style.fontSize = "11px";
this.menuButton.menuButtonContent.style.width = "125px";
// 设置可选字体
options.dicts?.fontFamilies?.forEach(font => {
const option = document.createElement("option");
option.label = font.label;
option.value = `${font.value}`;
(this.menuButton.menuButtonContent as HTMLSelectElement).options.add(option);
})
this.appendChild(this.menuButton);
// 定义按钮点击事件，设置当前内容的字体
this.addEventListener("change", (e: Event) => {
if (this.menuButtonOptions.enable) {
const fontFamily = (e.target as HTMLSelectElement).value;
if (fontFamily === "") {
event.editor.chain().focus().unsetFontFamily().run();
} else {
event.editor.chain().focus().setFontFamily(fontFamily).run();
}
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButtonContent && this.menuButtonOptions.enable) {
var fontFamily = event.editor.getAttributes('textStyle').fontFamily;
// 清除所有选项的选中状态
(this.menuButton.menuButtonContent as HTMLSelectElement).querySelectorAll("option").forEach(option => {
option.selected = false;
});
// 设置指定值的选项为选中状态
const optionToSelect = (this.menuButton.menuButtonContent as HTMLSelectElement).querySelector(`option[value="${fontFamily}"]`) as HTMLOptionElement;
if (optionToSelect) {
optionToSelect.selected = true;
}
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
}
src/components/menus/toolbar/base/FontSize.ts
+92
View File
@@ -0,0 +1,92 @@
// Copyright (c) 2024-present AI-Labs
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
/**
* 基础菜单：设置字号
*/
export class FontSize extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "select",
enable: true,
hideText: true,
text: t('base.fontSize.text'),
tooltip: t('base.fontSize.text'),
}
// 功能按钮
menuButton: MenuButton;
constructor(options: MenuButtonOptions) {
super();
// 初始化功能按钮选项
this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
// 创建功能按钮
this.menuButton = new MenuButton(this.menuButtonOptions);
}
/**
* 定义创建方法
* @param event
* @param options
*/
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
this.menuButton.onCreate(event, options);
this.menuButton.container.classList.add("uai-editor-menu-select");
this.menuButton.menuButtonContent.style.fontSize = "11px";
this.menuButton.menuButtonContent.style.width = "65px";
// 设置可选字号
options.dicts?.fontSizes?.forEach(font => {
const option = document.createElement("option");
option.label = `${font.label}`;
option.value = `${font.value}`;
(this.menuButton.menuButtonContent as HTMLSelectElement).options.add(option);
})
this.appendChild(this.menuButton);
// 定义按钮点击事件，设置当前内容的字号
this.addEventListener("change", (e: Event) => {
if (this.menuButtonOptions.enable) {
const fontSize = (e.target as HTMLSelectElement).value;
if (fontSize === "") {
event.editor.chain().focus().unsetFontSize().run();
} else {
event.editor.chain().focus().setFontSize(fontSize).run();
}
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButtonContent && this.menuButtonOptions.enable) {
var fontSize = event.editor.getAttributes('textStyle').fontSize;
// 清除所有选项的选中状态
(this.menuButton.menuButtonContent as HTMLSelectElement).querySelectorAll("option").forEach(option => {
option.selected = false;
});
// 设置指定值的选项为选中状态
const optionToSelect = (this.menuButton.menuButtonContent as HTMLSelectElement).querySelector(`option[value="${fontSize}"]`) as HTMLOptionElement;
if (optionToSelect) {
optionToSelect.selected = true;
}
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
}