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:28:33 +08:00
parent c4d637c943
commit 7ebb20813c
9 changed files with 556 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Icons.ts
+10
View File
@@ -0,0 +1,10 @@
// Copyright (c) 2024-present AI-Labs
/**
* 定义常用的图标
*/
export const Icons = {
ArrowDown: `<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="3 5 24 14"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 14L8 10H16L12 14Z"></path></svg>`,
Loading: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#FF6700" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>`,
// Loading: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 3C16.9706 3 21 7.02944 21 12H19C19 8.13401 15.866 5 12 5V3Z"></path></svg>`,
}
src/components/index.ts
+8
View File
@@ -10,6 +10,7 @@ import { Classic } from "./menus/toolbar/Classic.ts";
import { ScrollableDiv } from "./menus/toolbar/ScrollableDiv.ts";
import { MenuButton } from "./menus/MenuButton.ts";
import { ColorPicker } from "./popups/ColorPicker.ts";
import { FontSizeIncrease } from "./menus/common/FontSizeIncrease.ts";
import { FontSizeDecrease } from "./menus/common/FontSizeDecrease.ts";
@@ -21,6 +22,9 @@ import { Strike } from "./menus/common/Strike.ts";
import { Subscript } from "./menus/common/Subscript.ts";
import { Superscript } from "./menus/common/Superscript.ts";
import { FontColor } from "./menus/common/FontColor.ts";
import { Highlight } from "./menus/common/Highlight.ts";
import { Undo } from "./menus/toolbar/base/Undo.ts";
import { Redo } from "./menus/toolbar/base/Redo.ts";
import { FormatPainter } from "./menus/toolbar/base/FormatPainter.ts";
@@ -39,6 +43,7 @@ defineCustomElement('uai-editor-classic-menu', Classic);
defineCustomElement('uai-editor-scrollable-div', ScrollableDiv);
defineCustomElement('uai-editor-menu-button', MenuButton);
defineCustomElement('uai-editor-popup-color-picker', ColorPicker);
defineCustomElement('uai-editor-common-menu-font-size-increase', FontSizeIncrease);
defineCustomElement('uai-editor-common-menu-font-size-decrease', FontSizeDecrease);
@@ -50,6 +55,9 @@ defineCustomElement('uai-editor-common-menu-strike', Strike);
defineCustomElement('uai-editor-common-menu-subscript', Subscript);
defineCustomElement('uai-editor-common-menu-superscript', Superscript);
defineCustomElement('uai-editor-common-menu-font-color', FontColor);
defineCustomElement('uai-editor-common-menu-highlight', Highlight);
defineCustomElement('uai-editor-base-menu-undo', Undo);
defineCustomElement('uai-editor-base-menu-redo', Redo);
defineCustomElement('uai-editor-base-menu-format-painter', FormatPainter);
src/components/menus/MenuButton.ts
+44 -1
View File
@@ -4,12 +4,13 @@
import { EditorEvents } from "@tiptap/core";
import { UAIEditorEventListener, UAIEditorOptions } from "../../core/UAIEditor.ts";
import tippy, { Instance, Props } from "tippy.js";
import { Icons } from "../Icons.ts";
/**
* 菜单按钮选项
*/
export type MenuButtonOptions = {
menuType: "button" | "select",
menuType: "button" | "select" | "color",
enable: boolean,
className?: string,
header?: "ribbon" | "classic",
@@ -59,6 +60,10 @@ export class MenuButton extends HTMLElement implements UAIEditorEventListener {
// 下拉选择
this.createMenuSelect()
}
if (this.menuButtonOptions.menuType === "color") {
// 颜色选择
this.createMenuColor()
}
// 提示信息
var tipsContent = this.menuButtonOptions.tooltip;
@@ -146,4 +151,42 @@ export class MenuButton extends HTMLElement implements UAIEditorEventListener {
this.menuButtonContent.classList.add("uai-button-content");
this.menuButton.appendChild(this.menuButtonContent);
}
/**
* 创建颜色选择框
*/
createMenuColor() {
this.menuButton = document.createElement("div");
this.menuButton.classList.add("uai-menu-button");
this.container.appendChild(this.menuButton);
// 按钮内容
this.menuButtonContent = document.createElement("div");
this.menuButtonContent.classList.add("uai-button-content");
// 按钮图标，偏小一点
const iconDiv = document.createElement("div");
iconDiv.style.height = "14px";
iconDiv.style.display = "flex";
if (this.menuButtonOptions.icon) {
iconDiv.innerHTML = `<img src="${this.menuButtonOptions.icon}" width="14" height="14" />`
}
// 当前颜色展示容器，展示当前选中的颜色
const colorDiv = document.createElement("div");
colorDiv.id = "currentColor";
colorDiv.style.height = "3px";
colorDiv.style.marginTop = "1px";
this.menuButtonContent.style.display = "block";
this.menuButtonContent.appendChild(iconDiv);
this.menuButtonContent.appendChild(colorDiv);
this.menuButton.style.display = "flex";
this.menuButton.appendChild(this.menuButtonContent);
// 颜色弹出框下拉三角箭头
this.menuButtonArrow = document.createElement("div");
this.menuButtonArrow.classList.add("uai-button-icon-arrow");
this.menuButtonArrow.innerHTML = Icons.ArrowDown;
this.menuButton.appendChild(this.menuButtonArrow);
}
}
src/components/menus/common/FontColor.ts
+136
View File
@@ -0,0 +1,136 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
import icon from "../../../assets/icons/color.svg";
import { t } from "i18next";
import { InnerEditor, UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
import tippy, { Instance, Props } from "tippy.js";
import { ColorPicker } from "../../popups/ColorPicker.ts";
/**
* 公共菜单：设置字体颜色
*/
export class FontColor extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "color",
enable: true,
icon: icon,
hideText: true,
text: t('base.color'),
tooltip: t('base.color'),
}
// 当前选中的颜色
currentColor?: string
// 功能按钮
menuButton: MenuButton;
// 颜色选择器
colorPicker: ColorPicker;
// 颜色显示器
colorElement!: HTMLElement;
constructor(options: MenuButtonOptions) {
super();
// 初始化功能按钮选项
this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
// 创建功能按钮
this.menuButton = new MenuButton(this.menuButtonOptions);
// 创建颜色选择器
this.colorPicker = new ColorPicker();
}
/**
* 定义创建方法
* @param event
* @param options
*/
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
this.menuButton.onCreate(event, options);
// 初始化颜色展示器
this.colorElement = this.menuButton.menuButtonContent.querySelector("#currentColor") as HTMLElement;
// 初始化颜色选择器
this.colorPicker.onCreate(event, options);
this.colorPicker.element = this.colorElement;
this.appendChild(this.menuButton);
// 定义按钮点击事件，设置字体颜色
this.menuButton.menuButtonContent.addEventListener("click", () => {
if (this.menuButtonOptions.enable) {
const color = this.colorElement.style.backgroundColor;
if (color === '') {
event.editor.chain().focus().unsetColor().run();
} else {
event.editor.chain().focus().setColor(color).run();
}
}
})
if (this.menuButtonOptions.enable && this.menuButton.menuButtonArrow) {
const instance = tippy(this.menuButton.menuButtonArrow, {
content: this.colorPicker,
placement: 'bottom',
trigger: 'click',
interactive: true,
arrow: false,
})
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
// 这里可以执行你需要的操作
instance.hide();
const color = this.colorElement.style.backgroundColor;
if (color === '') {
event.editor.chain().focus().unsetColor().run();
} else {
event.editor.chain().focus().setColor(color).run();
}
}
}
});
// 配置观察器选项
const config = { attributes: true, attributeFilter: ['style'] };
// 开始观察目标节点
observer.observe(this.colorElement, config);
}
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
this.colorPicker.onTransaction(event, options);
try {
// 获取当前文字的字体颜色
const color = `${event.editor.getAttributes('textStyle').color}`;
// 颜色展示器切换到当前字体颜色
if (color) {
this.colorElement.style.backgroundColor = color;
} else {
this.colorElement.style.backgroundColor = "#000";
}
} catch (error) {
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
}
src/components/menus/common/Highlight.ts
+142
View File
@@ -0,0 +1,142 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
import icon from "../../../assets/icons/highlight.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
import tippy from "tippy.js";
import { ColorPicker } from "../../popups/ColorPicker.ts";
/**
* 公共菜单：高亮
*/
export class Highlight extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "color",
enable: true,
icon: icon,
hideText: true,
text: t('base.highlight.text'),
tooltip: t('base.highlight.text'),
shortcut: "Ctrl+Shift+H",
}
// 当前高亮颜色
currentColor?: string;
// 功能按钮
menuButton: MenuButton;
// 颜色选择器
colorPicker!: ColorPicker;
// 颜色显示器
colorElement!: HTMLElement;
constructor(options: MenuButtonOptions) {
super();
// 初始化功能按钮选项
this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
// 创建功能按钮
this.menuButton = new MenuButton(this.menuButtonOptions);
// 创建颜色选择器
this.colorPicker = new ColorPicker();
}
/**
* 定义创建方法
* @param event
* @param options
*/
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
this.menuButton.onCreate(event, options);
// 初始化颜色展示器
this.colorElement = this.menuButton.menuButtonContent.querySelector("#currentColor") as HTMLElement;
// 初始化颜色选择器
this.colorPicker.onCreate(event, options);
this.colorPicker.element = this.colorElement;
this.appendChild(this.menuButton);
// 定义按钮点击事件，设置高亮颜色
this.menuButton.menuButtonContent.addEventListener("click", () => {
if (this.menuButtonOptions.enable) {
const color = this.colorElement.style.backgroundColor;
if (color === '') {
event.editor.chain().focus().unsetHighlight().run();
} else {
event.editor.chain().focus().setHighlight({ color }).run();
}
}
})
if (this.menuButtonOptions.enable && this.menuButton.menuButtonArrow) {
const instance = tippy(this.menuButton.menuButtonArrow, {
content: this.colorPicker,
placement: 'bottom',
trigger: 'click',
interactive: true,
arrow: false,
})
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
// 这里可以执行你需要的操作
instance.hide();
const color = this.colorElement.style.backgroundColor;
if (color === '') {
event.editor.chain().focus().unsetHighlight().run();
} else {
event.editor.chain().focus().setHighlight({ color }).run();
}
}
}
});
// 配置观察器选项
const config = { attributes: true, attributeFilter: ['style'] };
// 开始观察目标节点
observer.observe(this.colorElement, config);
}
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
this.colorPicker.onTransaction(event, options);
try {
// 获取当前文字的高亮颜色
const color = `${event.editor.getAttributes('highlight').color}`;
// 颜色展示器切换到当前字体高亮颜色
if (color) {
this.colorElement.style.backgroundColor = color;
} else {
this.colorElement.style.backgroundColor = "#000";
}
} catch (error) {
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
onColorChange(color: string) {
this.currentColor = color;
(this.menuButton.menuButtonContent.querySelector("#currentColor") as HTMLElement).style.backgroundColor = color;
}
}
src/components/menus/toolbar/Classic.ts
+13
View File
@@ -17,6 +17,9 @@ import { Strike } from "../common/Strike.ts";
import { Subscript } from "../common/Subscript.ts";
import { Superscript } from "../common/Superscript.ts";
import { FontColor } from "../common/FontColor.ts";
import { Highlight } from "../common/Highlight.ts";
import { Redo } from "./base/Redo";
import { Undo } from "./base/Undo";
import { FormatPainter } from "./base/FormatPainter";
@@ -57,6 +60,8 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
baseMenuStrike!: Strike;
baseMenuSubscript!: Subscript;
baseMenuSuperscript!: Superscript;
baseMenuFontColor!: FontColor;
baseMenuHighlight!: Highlight;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
@@ -173,6 +178,12 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuSuperscript);
this.baseMenuFontColor = new FontColor({ menuType: "color", enable: true });
this.eventComponents.push(this.baseMenuFontColor);
this.baseMenuHighlight = new Highlight({ menuType: "color", enable: true });
this.eventComponents.push(this.baseMenuHighlight);
}
/**
* 创建基础菜单
@@ -208,5 +219,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
group2.appendChild(this.baseMenuStrike);
group2.appendChild(this.baseMenuSubscript);
group2.appendChild(this.baseMenuSuperscript);
group2.appendChild(this.baseMenuFontColor);
group2.appendChild(this.baseMenuHighlight);
}
}
src/components/menus/toolbar/Ribbon.ts
+13
View File
@@ -17,6 +17,9 @@ import { Strike } from "../common/Strike.ts";
import { Subscript } from "../common/Subscript.ts";
import { Superscript } from "../common/Superscript.ts";
import { FontColor } from "../common/FontColor.ts";
import { Highlight } from "../common/Highlight.ts";
import { Redo } from "./base/Redo";
import { Undo } from "./base/Undo";
@@ -59,6 +62,8 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
baseMenuStrike!: Strike;
baseMenuSubscript!: Subscript;
baseMenuSuperscript!: Superscript;
baseMenuFontColor!: FontColor;
baseMenuHighlight!: Highlight;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
@@ -195,6 +200,12 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
this.eventComponents.push(this.baseMenuSuperscript);
this.baseMenuFontColor = new FontColor({ menuType: "color", enable: true });
this.eventComponents.push(this.baseMenuFontColor);
this.baseMenuHighlight = new Highlight({ menuType: "color", enable: true });
this.eventComponents.push(this.baseMenuHighlight);
}
/**
@@ -247,5 +258,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
group2row2.appendChild(this.baseMenuStrike);
group2row2.appendChild(this.baseMenuSubscript);
group2row2.appendChild(this.baseMenuSuperscript);
group2row2.appendChild(this.baseMenuFontColor);
group2row2.appendChild(this.baseMenuHighlight);
}
}
src/components/popups/ColorPicker.ts
+184
View File
@@ -0,0 +1,184 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { EditorEvents } from "@tiptap/core";
import { UAIEditorEventListener, UAIEditorOptions } from "../../core/UAIEditor.ts";
import { t } from "i18next";
/**
* 所有可选颜色
*/
const colors = [
"#FFF", "#000", "#4A5366", "#3B74EC", "#45A2EF", "#529867", "#CD4A3F", "#EA8D40", "#EEC543", "#8E45D0",
"#F2F2F2", "#7F7F7F", "#F4F5F7", "#CBDCFC", "#E8F6FE", "#EDFAF2", "#FCEAE9", "#FDF3EC", "#FEF9E5", "#FAECFE",
"#EEE", "#595959", "#C6CAD2", "#CEEBFD", "#CBDCFC", "#CBE9D7", "#F7CBC9", "#FADDC7", "#FDEEB5", "#EBCAFC",
"#BFBFBF", "#3F3F3F", "#828B9D", "#A0BEFA", "#A7DCFC", "#A6D5B8", "#F2A19C", "#F5BC8C", "#FBE281", "#CB94F9",
"#A5A5A5", "#262626", "#363B44", "#2452B2", "#3473A1", "#417A53", "#922B22", "#AD642A", "#9E8329", "#57297D",
"#939393", "#0D0D0D", "#25272E", "#15316A", "#1C415A", "#284D34", "#511712", "#573213", "#635217", "#36194E",
]
/**
* 所有标准颜色
*/
const standardColors = ['#B12318', '#EB3323', '#F6C143', '#FFFE55', '#A0CD63', '#4FAD5B', '#4CAFEA', '#2D70BA', '#06215C', '#68389B']
/**
* 当前使用过的颜色
*/
const recentColors: string[] = []
/**
* 颜色选取器
*/
export class ColorPicker extends HTMLElement implements UAIEditorEventListener {
container!: HTMLElement;
element!: HTMLElement;
recentColorTitle!: HTMLElement;
recentColorGroup!: HTMLElement;
constructor() {
super();
}
/**
* 颜色选择监听，设置当前选取的颜色、渲染颜色展示
* @param color
*/
colorClickListener(color: string) {
this.listRecentColors(color);
this.element.style.backgroundColor = "#000";
this.element.style.backgroundColor = color;
}
/**
* 更新界面，添加当前已选择过的颜色，展示在弹出框
* @param color
*/
listRecentColors(color: string) {
const index = recentColors.indexOf(color);
if (index > -1) {
recentColors.splice(index, 1);
}
recentColors.unshift(color);
if (recentColors.length > 10) {
recentColors.pop();
}
this.recentColorGroup.innerHTML = "";
if (recentColors.length > 0) {
this.recentColorTitle.style.display = "block";
this.recentColorGroup.style.display = "flex";
} else {
this.recentColorTitle.style.display = "none";
this.recentColorGroup.style.display = "none";
}
recentColors.forEach(color => {
const item = document.createElement("div");
item.classList.add("uai-color-picker-item");
item.style.backgroundColor = color;
this.recentColorGroup.appendChild(item);
item.addEventListener("click", () => {
this.colorClickListener(color);
})
})
}
/**
* 定义创建方法
* @param event
* @param options
*/
onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
const parent = document.createElement("div");
parent.classList.add("uai-color-picker");
// 颜色选取容器
this.container = document.createElement("div");
this.container.classList.add("uai-color-picker-container");
// 默认颜色按钮
const defaultButtonDiv = document.createElement("div");
defaultButtonDiv.classList.add("uai-color-picker-default-button");
const defaultButton = document.createElement("div");
defaultButton.classList.add("uai-button");
defaultButton.innerHTML = t('colorPicker.default');
// 添加点击事件，设置默认颜色
defaultButton.addEventListener("click", () => {
this.colorClickListener("");
});
defaultButtonDiv.appendChild(defaultButton);
this.container.appendChild(defaultButtonDiv);
// 可选颜色分组
const colorsGroup = document.createElement("div");
colorsGroup.classList.add("uai-color-picker-group");
// 设置所有可选颜色
colors.forEach(color => {
const item = document.createElement("div");
item.classList.add("uai-color-picker-item");
item.style.backgroundColor = color;
item.addEventListener("click", () => {
this.colorClickListener(color);
})
colorsGroup.appendChild(item);
})
this.container.appendChild(colorsGroup);
// 标准颜色容器
const standardColor = document.createElement("div");
standardColor.classList.add("uai-color-picker-group-title");
standardColor.innerHTML = t('colorPicker.standard');
this.container.appendChild(standardColor);
// 标准颜色分组
const standardColorsGroup = document.createElement("div");
standardColorsGroup.classList.add("uai-color-picker-group");
// 设置所有标准颜色
standardColors.forEach(color => {
const item = document.createElement("div");
item.classList.add("uai-color-picker-item");
item.style.backgroundColor = color;
standardColorsGroup.appendChild(item);
item.addEventListener("click", () => {
this.colorClickListener(color);
})
})
this.container.appendChild(standardColorsGroup);
// 当前已使用过的颜色展示
this.recentColorTitle = document.createElement("div");
this.recentColorTitle.classList.add("uai-color-picker-group-title");
this.recentColorTitle.innerHTML = t('colorPicker.recent');
this.recentColorTitle.style.display = "none";
this.container.appendChild(this.recentColorTitle);
// 当前颜色分组
this.recentColorGroup = document.createElement("div");
this.recentColorGroup.classList.add("uai-color-picker-group");
this.recentColorGroup.style.display = "none";
this.container.appendChild(this.recentColorGroup);
// 分割线
const divider = document.createElement("div");
divider.classList.add("uai-color-picker-divider");
this.container.appendChild(divider);
parent.appendChild(this.container);
this.appendChild(parent);
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
}
onEditableChange(editable: boolean) {
}
}
src/core/UAIExtensions.ts
+6
View File
@@ -5,7 +5,9 @@ import { Extensions } from "@tiptap/core";
import { UAIEditor, UAIEditorOptions } from "./UAIEditor";
import { StarterKit } from "@tiptap/starter-kit";
import { Color } from "@tiptap/extension-color";
import { FontFamily } from "@tiptap/extension-font-family";
import { Highlight } from "@tiptap/extension-highlight";
import { Subscript } from "@tiptap/extension-subscript";
import { Superscript } from "@tiptap/extension-superscript";
import { TextStyle } from "@tiptap/extension-text-style";
@@ -25,9 +27,13 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
bulletList: false,
orderedList: false,
}),
Color,
FontFamily,
FontSize.configure({
}),
Highlight.configure({
multicolor: true
}),
Subscript,
Superscript,