plugin-audio/src/module/render-elem.ts

wangEditor 上传音频

/**
 * @description audio render elem
 * @author wulijie
 */
import { AudioElement } from './custom-types'
import { DomEditor, IDomEditor, SlateElement } from "@wangeditor/editor";
import { h, VNode } from "snabbdom";

function renderAudioElement(elemNode: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
    const { src = '', width = 'auto', height = 'auto' } = elemNode as AudioElement;
    const selected = DomEditor.isNodeSelected(editor, elemNode);
    // 检查编辑器是否处于禁用(只读)状态
    const isDisabled = editor.isDisabled()
    
    // 音频元素样式 - 在只读模式下固定宽度，防止被挤压
    const audioStyle: Record<string, string> = {
        'max-width': '100%',
        'min-width': isDisabled ? '300px' : '', // 只读模式下设置最小宽度
        'width': isDisabled ? '100%' : (width !== 'auto' ? width + 'px' : 'auto'),
    }
    
    // 只在非只读模式下应用自定义高度
    if (!isDisabled && height !== 'auto') {
        audioStyle.height = height + 'px';
    }
    
    const audioVnode = h(
        'audio', // html标签
        {
            attrs: {
                src: src,
                controls: 'controls',
                // 在只读模式下禁用拖拽调整大小
                style: isDisabled ? 'resize: none;' : ''
            },
            style: audioStyle
        }
    )
    
    // 容器样式 - 确保在只读模式下有足够的空间
    const containerStyle: Record<string, string> = {
        'display': 'block',
        'width': '100%'
    }
    
    // 只读模式下的容器样式
    if (isDisabled) {
        containerStyle.border = 'none';
        containerStyle.backgroundColor = 'transparent';
        containerStyle.backgroundImage = 'none';
        containerStyle.padding = '8px 0'; // 增加垂直间距，防止挤压
        containerStyle.margin = '8px 0';
        containerStyle.resize = 'none'; // 禁止调整大小
    }
    
    const vnode = h(
        'div',
        {
            attrs: {
                'class': 'w-e-textarea-video-container',
                'data-selected': (!isDisabled && selected) ? 'true' : '',
                'data-disabled': isDisabled ? 'true' : ''
            },
            style: containerStyle
        },
        audioVnode
    )
    
    // 最外层容器 - 在只读模式下添加额外保护
    return h(
        'div',
        {
            attrs: {
                'contenteditable': 'false',
                'class': isDisabled ? 'w-e-audio-container-disabled' : ''
            },
            style: {
                'display': 'block',
                'width': '100%',
                'margin': isDisabled ? '10px 0' : '0', // 增加外部间距
                'pointer-events': isDisabled ? 'none' : 'auto', // 禁用编辑相关事件
            },
            on: {
                mousedown: (e: MouseEvent) => {
                    e.preventDefault();
                    // 在只读模式下阻止所有可能导致编辑的事件
                    if (isDisabled) {
                        e.stopPropagation();
                    }
                },
            }
        },
        vnode
    )
}

const renderAudioConf = {
    type: 'audio',
    renderElem: renderAudioElement,
}

export { renderAudioConf }