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

添加插入视频菜单

Browse Source
This commit is contained in:
wux_labs
2024-12-25 21:36:38 +08:00
parent 6a49ef311a
commit 6ab33e2060
8 changed files with 232 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/index.ts
View File

@@ -53,6 +53,7 @@ import { Print } from "./menus/toolbar/base/Print.ts";
import { Link } from "./menus/toolbar/insert/Link.ts";
import { Image } from "./menus/toolbar/insert/Image.ts";
import { Video } from "./menus/toolbar/insert/Video.ts";
// 注册组件
defineCustomElement('uai-editor-header', Header);
@@ -107,3 +108,4 @@ defineCustomElement('uai-editor-base-menu-print', Print);
defineCustomElement('uai-editor-insert-menu-link', Link);
defineCustomElement('uai-editor-insert-menu-image', Image);
defineCustomElement('uai-editor-insert-menu-video', Video);

6
src/components/menus/toolbar/Classic.ts
View File

@@ -48,6 +48,7 @@ import { Print } from "./base/Print.ts";
import { Link } from "./insert/Link.ts";
import { Image } from "./insert/Image.ts";
import { Video } from "./insert/Video.ts";
/**
* 传统菜单栏
@@ -107,6 +108,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
// 插入菜单
insertMenuLink!: Link;
insertMenuImage!: Image;
insertMenuVideo!: Video;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
@@ -282,6 +284,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.insertMenuImage = new Image({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.insertMenuImage);
this.insertMenuVideo = new Video({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.insertMenuVideo);
}
/**
* 创建基础菜单
@@ -361,5 +366,6 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuInsertGroup.appendChild(group1);
group1.appendChild(this.insertMenuLink);
group1.appendChild(this.insertMenuImage);
group1.appendChild(this.insertMenuVideo);
}
}

6
src/components/menus/toolbar/Ribbon.ts
View File

@@ -50,6 +50,7 @@ import { Print } from "./base/Print.ts";
import { Link } from "./insert/Link.ts";
import { Image } from "./insert/Image.ts";
import { Video } from "./insert/Video.ts";
/**
* 经典菜单栏
@@ -110,6 +111,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
// 插入菜单
insertMenuLink!: Link;
insertMenuImage!: Image;
insertMenuVideo!: Video;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
@@ -305,6 +307,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.insertMenuImage = new Image({ menuType: "button", enable: true, huge: true });
this.eventComponents.push(this.insertMenuImage);
this.insertMenuVideo = new Video({ menuType: "button", enable: true, huge: true });
this.eventComponents.push(this.insertMenuVideo);
}
/**
@@ -458,5 +463,6 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.ribbonMenuInsertGroup.appendChild(group1);
group1.appendChild(this.insertMenuLink);
group1.appendChild(this.insertMenuImage);
group1.appendChild(this.insertMenuVideo);
}
}

72
src/components/menus/toolbar/insert/Video.ts Normal file
View File

@@ -0,0 +1,72 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import icon from "../../../../assets/icons/video.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
/**
* 插入菜单：插入视频
*/
export class Video extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "button",
enable: true,
icon: icon,
hideText: false,
text: t('insert.video'),
tooltip: t('insert.video'),
}
// 功能按钮
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.appendChild(this.menuButton);
// 定义按钮点击事件，插入视频
this.addEventListener("click", () => {
if (this.menuButtonOptions.enable) {
event.editor.chain().focus().selectFiles('video', true).run()
}
})
}
/**
* 定义Transaction监听方法
* @param event
* @param options
*/
onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
this.menuButton.onTransaction(event, options);
if (this.menuButton.menuButton) {
var disable = event.editor.isEditable;
this.onEditableChange(disable);
}
}
onEditableChange(editable: boolean) {
this.menuButtonOptions.enable = editable;
this.menuButton.onEditableChange(editable);
}
}

6
src/core/UAIEditor.ts
View File

@@ -88,6 +88,12 @@ export type UAIEditorOptions = {
uploadFormName?: string,
uploader?: Uploader,
},
video?: {
uploadUrl?: string,
uploadHeaders?: (() => Record<string, any>) | Record<string, any>,
uploadFormName?: string,
uploader?: Uploader,
},
}
/**

2
src/core/UAIExtensions.ts
View File

@@ -25,6 +25,7 @@ import LineHeight from "../extensions/LineHeight.ts"
import NodeAlign from "../extensions/NodeAlign.ts";
import OrderedList from "../extensions/OrderedList.ts";
import SelectFile from "../extensions/SelectFile.ts";
import Video from "../extensions/Video.ts";
/**
* 定义编辑器的所有自定义扩展组件
@@ -67,6 +68,7 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
}),
TextStyle,
Underline,
Video,
];
return extensions;

22
src/extensions/SelectFile.ts
View File

@@ -54,6 +54,7 @@ const mimeTypes: any = {
'image/svg+xml',
'image/apng',
],
video: ['video/mp4', 'video/webm', 'video/ogg'],
}
/**
@@ -171,6 +172,27 @@ export default Node.create<SelectFileOptions>({
});
});
}
// 视频
if (type.startsWith('video/') && mimeTypes.video.includes(type)) {
previewType = 'video';
uploader = editorOptions.video?.uploader ?? Base64Uploader;
uploader(file, editorOptions.video?.uploadUrl, editorOptions.video?.uploadHeaders, editorOptions.video?.uploadFormName || "video")
.then(json => {
view.dispatch(tr.setMeta(actionKey, { type: "remove", id }));
this.editor.commands.insertContentAt(tr.selection.from, {
type: autoType ? (previewType ?? 'file') : 'file',
attrs: {
[previewType === 'file' ? 'url' : 'src']: json.data.src,
name,
type,
size,
file,
previewType,
},
});
});
}
return true;
},
selectFiles:

116
src/extensions/Video.ts Normal file
View File

@@ -0,0 +1,116 @@
// Copyright (c) 2024-present AI-Labs
import { mergeAttributes, Node } from '@tiptap/core'
import { resize } from '../utils/resize'
declare module '@tiptap/core' {
interface Commands<ReturnType> {
setVideo: {
/**
* 设置视频
* @param options
* @returns
*/
setVideo: (options: any) => ReturnType
}
}
}
export default Node.create({
name: 'video',
group: 'block',
atom: true,
addAttributes() {
return {
vnode: {
default: true,
},
id: {
default: null,
},
file: {
default: null,
},
name: {
default: null,
},
size: {
default: null,
},
src: {
default: null,
},
width: {
default: '500px',
},
height: {
default: 'auto',
},
controls: {
default: true,
},
draggable: {
default: false,
},
uploaded: {
default: false,
},
previewType: {
default: 'video',
},
}
},
parseHTML() {
return [{ tag: 'video' }]
},
renderHTML({ HTMLAttributes }) {
return ['video', mergeAttributes(HTMLAttributes)]
},
addCommands() {
return {
setVideo:
(options) =>
({ commands, editor }) => {
return commands.insertContentAt(editor.state.selection.anchor, {
type: this.name,
attrs: options,
})
},
}
},
addNodeView() {
return (props) => {
const container = document.createElement('div');
const { src, width, nodeAlign } = props.node.attrs;
container.classList.add(`uai-node-view`);
container.style.justifyContent = nodeAlign;
if (!this.editor.isEditable) {
return {
dom: container
}
}
container.innerHTML = `
<div class="uai-resize-wrapper">
<div class="uai-resize">
<div class="uai-resize-btn-top-left" data-position="1" draggable="true"></div>
<div class="uai-resize-btn-top-center" data-position="2" draggable="true"></div>
<div class="uai-resize-btn-top-right" data-position="3" draggable="true"></div>
<div class="uai-resize-btn-left-center" data-position="4" draggable="true"></div>
<div class="uai-resize-btn-right-center" data-position="5" draggable="true"></div>
<div class="uai-resize-btn-bottom-left" data-position="6" draggable="true"></div>
<div class="uai-resize-btn-bottom-center" data-position="7" draggable="true"></div>
<div class="uai-resize-btn-bottom-right" data-position="8" draggable="true"></div>
</div>
<video controls="controls" width="${width}" class="resize-obj">
<source src="${src}">
</video>
</div>
`
resize(container, this.editor.view.dom, (attrs) => this.editor.commands.updateAttributes("video", attrs));
return {
dom: container,
}
}
},
})