94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import React, { memo, useState } from 'react';
|
|
import type { EditorProps } from './EditorProps';
|
|
|
|
/**
|
|
* 链接编辑器组件，用于编辑链接元素。
|
|
*/
|
|
export const LinkEditor: React.FC<EditorProps> = memo(({ element }) => {
|
|
const linkElement = element as HTMLAnchorElement;
|
|
const [href, setHref] = useState(linkElement.getAttribute('href') || '');
|
|
const [content, setContent] = useState(linkElement.innerHTML);
|
|
const [target, setTarget] = useState(linkElement.target);
|
|
|
|
const handleHrefChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newHref = e.target.value;
|
|
setHref(newHref);
|
|
linkElement.href = newHref;
|
|
};
|
|
|
|
const handleContentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newContent = e.target.value;
|
|
setContent(newContent);
|
|
linkElement.innerHTML = newContent;
|
|
};
|
|
|
|
const handleTargetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const newTarget = e.target.value;
|
|
setTarget(newTarget);
|
|
linkElement.target = newTarget;
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<label style={{ display: 'block', fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}>链接地址</label>
|
|
<input
|
|
type="text"
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px',
|
|
border: '1px solid #cbd5e1',
|
|
outline: 'none',
|
|
borderRadius: '4px',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
value={href}
|
|
onChange={handleHrefChange}
|
|
placeholder="https://upage.ai"
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<label style={{ display: 'block', fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}>链接文本</label>
|
|
<input
|
|
type="text"
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px',
|
|
border: '1px solid #cbd5e1',
|
|
outline: 'none',
|
|
borderRadius: '4px',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
value={content}
|
|
onChange={handleContentChange}
|
|
placeholder="链接文本"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '14px', fontWeight: 500, marginBottom: '4px' }}>打开方式</label>
|
|
<select
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px',
|
|
border: '1px solid #cbd5e1',
|
|
outline: 'none',
|
|
borderRadius: '4px',
|
|
backgroundColor: 'white',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
value={target}
|
|
onChange={handleTargetChange}
|
|
>
|
|
<option value="">当前窗口</option>
|
|
<option value="_blank">新窗口</option>
|
|
<option value="_self">当前框架</option>
|
|
<option value="_parent">父框架</option>
|
|
<option value="_top">整个窗口</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|