如何在TinyMCE中集成lite-youtube插件？

要在TinyMCE中成功集成lite-youtube，需要完成以下几个关键步骤：

1. 引入lite-youtube核心资源 #

首先确保你的项目中已引入lite-youtube的CSS样式和JS脚本（直接复制以下代码到本地文件即可）：

核心CSS样式 #

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
    aspect-ratio: 16 / 9;
}

lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="white"></path></svg>');
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: filter 0.1s cubic-bezier(0.05, 0.03, 0.35, 1);
}

lite-youtube:hover::before {
    filter: brightness(0.8);
}

lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

lite-youtube .lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="white"></path></svg>');
    filter: grayscale(100%);
    transition: filter 0.1s cubic-bezier(0.05, 0.03, 0.35, 1);
    border: none;
    cursor: pointer;
}

lite-youtube:hover .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

核心JS脚本 #

class LiteYTEmbed extends HTMLElement {
    connectedCallback() {
        this.videoId = this.getAttribute('videoid');
        this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
        
        // 设置海报图
        this.style.backgroundImage = `url('${this.posterUrl}')`;
        
        // 创建播放按钮
        const playBtn = document.createElement('button');
        playBtn.className = 'lty-playbtn';
        playBtn.setAttribute('aria-label', 'Play video');
        this.appendChild(playBtn);
        
        // 绑定点击事件
        this.addEventListener('click', () => this.loadVideo());
    }
    
    loadVideo() {
        // 创建iframe
        const iframe = document.createElement('iframe');
        iframe.src = `https://www.youtube-nocookie.com/embed/${this.videoId}?autoplay=1`;
        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
        iframe.setAttribute('allowfullscreen', '');
        this.appendChild(iframe);
        
        // 移除播放按钮和点击事件
        this.removeChild(this.querySelector('.lty-playbtn'));
        this.removeEventListener('click', this.loadVideo);
    }
}
customElements.define('lite-youtube', LiteYTEmbed);

2. 修改TinyMCE配置 #

将你原来的TinyMCE配置更新为以下完整版本，修正了原代码中的正则匹配问题和语法错误：

tinymce.init({
    selector: '#myTextarea',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    language: 'he_IL',
    image_class_list: [{title: 'Full size', value: 'great_picture_of_the_article'}],
    image_dimensions: false,
    link_class_list: [{title: 'Formatted link', value: 'link_to_external_site'}],
    
    // 拦截媒体URL，转换YouTube链接为lite-youtube标签
    media_url_resolver: function (data, resolve) {
        // 匹配所有常见YouTube URL格式
        const youtubePattern = /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|.*[&?]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
        const matchResult = data.url.match(youtubePattern);
        
        if (matchResult) {
            const videoId = matchResult[1];
            const embedHtml = `<lite-youtube videoid="${videoId}"></lite-youtube>`;
            resolve({html: embedHtml});
        } else {
            // 非YouTube链接，交给TinyMCE默认处理
            resolve({html: ''});
        }
    },
    
    // 自定义视频插入模板，替换默认video标签为lite-youtube
    video_template_callback: function(data) {
        const youtubePattern = /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|.*[&?]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
        const matchResult = data.source1.match(youtubePattern);
        
        if (matchResult) {
            const videoId = matchResult[1];
            return `<lite-youtube videoid="${videoId}"></lite-youtube>`;
        }
        // 非YouTube视频，返回默认视频模板
        return `<video src="${data.source1}" controls></video>`;
    }
});

关键说明 #

• 移除了原配置中重复的image插件和工具栏按钮，避免冗余
• 使用正则表达式匹配所有常见的YouTube URL格式（包括普通链接、短链接、嵌入链接），准确提取视频ID
• media_url_resolver负责处理通过媒体对话框输入的URL，直接转换为lite-youtube标签
• video_template_callback负责自定义插入视频时的模板，确保插入的YouTube视频使用lite-youtube组件

内容的提问来源于stack exchange，提问作者Gavriel Adi