### Description Context & Appreciation: First of all, I want to express my support for the new UI direction. I understand that major refactoring (like the removal of the top toolbar) is necessary for the project's evolution. I am actively trying to adapt my workflow to the new system (e.g., migrating my custom toolbar actions to widgets). However, during this transition, I have encountered significant difficulties with compatibility that I cannot solve on my own. The Issue: I use a custom script that dynamically converts specific video links (e.g., Bilibili) into playable embedded iframes when the note is in Read-Only mode. In the Old UI: This worked perfectly. The script intercepted the link and rendered the video player inline. (See Image 1)

In the New UI: The script fails to render the iframe. It only displays the standard link button, as if the script isn't running or the DOM manipulation is being blocked. (See Image 2)

Investigation: I verified the underlying source code of the note, and it remains exactly the same as before. The HTML is standard: ```

B站视频 BV1yb421J7oX

``` Since the source is unchanged, I suspect the rendering logic or the DOM sanitization in the new UI has changed, preventing my script from "injecting" the iframe as it used to. My Request: Guidance on Customization: Could you provide insights on how to achieve this kind of DOM manipulation in the new UI? I've noticed other users in the Issues section struggling with broken custom tools as well. A guide or "best practice" for migrating legacy scripts to the new architecture would be incredibly helpful for the community. Feature Request (Video Support): If "hacking" the DOM is no longer recommended, could you consider adding native support for embedding external video links or local videos? Compatibility: Is there a way to enable backward compatibility for these types of rendering scripts? Below is the code for the script I am using. I hope this helps in reproducing the issue or suggesting a fix. Script Code: ``` class VideoEmbedV14 extends api.NoteContextAwareWidget { get parentWidget() { return 'center-pane'; } doRender() { this.$widget = $(``); return this.$widget; } async refreshWithNote() { setTimeout(() => { this.addButton(); this.renderVideos(); this.startObserver(); }, 200); } /** * 监听 DOM 变化，自动渲染新视频 */ startObserver() { if (this.observer) this.observer.disconnect(); this.observer = new MutationObserver( this.debounce(() => this.renderVideos(), 300) ); const target = document.querySelector('.note-detail-printable-content'); if (target) { this.observer.observe(target, { childList: true, subtree: true }); } } /** * 防抖函数 */ debounce(fn, delay) { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } /** * 渲染视频播放器 */ renderVideos() { const container = document.querySelector( '.note-detail-readonly-text-content, .note-detail-book-content, .include-note-content' ); if (!container) return; // 确保不在编辑模式 if (container.closest('.ck-editor__editable')) return; const videoLinks = container.querySelectorAll( 'a[href*="#video-native"], a[href*="#video-iframe"]' ); videoLinks.forEach(link => { if (link.dataset.rendered === 'true') return; link.dataset.rendered = 'true'; const href = link.getAttribute('href'); const isNative = href.includes('#video-native'); const url = href.replace(/#video-(native|iframe)$/, ''); const title = link.textContent || this.extractTitle(url); const platform = this.detectPlatform(url); // 创建播放器 const player = this.createPlayer(url, title, platform, isNative); // 隐藏原链接，插入播放器 link.style.display = 'none'; link.parentNode.insertBefore(player, link.nextSibling); }); } /** * 创建播放器 DOM */ createPlayer(url, title, platform, isNative) { const player = document.createElement('div'); player.className = 'trilium-video-player'; player.dataset.url = url; player.innerHTML = `

加载中...

⚠️ 视频加载失败

${platform.icon} ${platform.name} ${title}

`; const container = player.querySelector('.video-container'); const retryBtn = player.querySelector('.retry-btn'); const copyBtn = player.querySelector('.copy-url-btn'); const openBtn = player.querySelector('.open-url-btn'); // 加载视频 this.loadVideo(container, url, isNative, player); // 重试按钮 retryBtn.onclick = () => { player.classList.remove('error'); this.loadVideo(container, url, isNative, player); }; // 复制链接 copyBtn.onclick = () => { navigator.clipboard.writeText(url).then(() => { copyBtn.textContent = '✅ 已复制'; setTimeout(() => copyBtn.textContent = '📋 复制', 1500); }); }; // 新窗口打开 openBtn.onclick = () => window.open(url, '_blank'); return player; } /** * 加载视频元素 */ loadVideo(container, url, isNative, player) { // 移除旧的视频元素 const oldMedia = container.querySelector('video, iframe'); if (oldMedia) oldMedia.remove(); if (isNative) { const video = document.createElement('video'); video.src = url; video.controls = true; video.setAttribute('playsinline', ''); video.preload = 'metadata'; video.onloadeddata = () => player.classList.add('loaded'); video.onerror = () => player.classList.add('error'); container.appendChild(video); } else { const iframe = document.createElement('iframe'); iframe.src = url; iframe.allowFullscreen = true; iframe.allow = 'autoplay; fullscreen; picture-in-picture'; iframe.onload = () => player.classList.add('loaded'); iframe.onerror = () => player.classList.add('error'); // iframe 加载超时处理 setTimeout(() => { if (!player.classList.contains('loaded')) { player.classList.add('loaded'); // 假设加载成功 } }, 3000); container.appendChild(iframe); } } /** * 检测视频平台 */ detectPlatform(url) { if (url.includes('bilibili.com') || url.includes('player.bilibili.com')) { return { name: 'Bilibili', icon: '📺', class: 'bilibili' }; } if (url.includes('youtube.com') || url.includes('youtu.be')) { return { name: 'YouTube', icon: '▶️', class: 'youtube' }; } if (url.includes('vimeo.com')) { return { name: 'Vimeo', icon: '🎬', class: 'vimeo' }; } if (url.includes('youku.com')) { return { name: '优酷', icon: '🎯', class: 'youku' }; } if (url.includes('qq.com') || url.includes('v.qq.com')) { return { name: '腾讯视频', icon: '📹', class: 'tencent' }; } if (url.includes('douyin.com') || url.includes('tiktok.com')) { return { name: '抖音', icon: '🎵', class: 'douyin' }; } if (url.includes('localhost') || url.includes('127.0.0.1') || url.includes('/p/')) { return { name: '本地', icon: '💾', class: 'local' }; } return { name: '视频', icon: '🎬', class: 'default' }; } /** * 从 URL 提取标题 */ extractTitle(url) { try { const decoded = decodeURIComponent(url); const filename = decoded.split('/').pop().split('?')[0].split('#')[0]; return filename || '未命名视频'; } catch { return '视频'; } } /** * 添加工具栏按钮 */ addButton() { // 找到工具栏容器 const $ribbon = $("div.component.note-split:not(.hidden-ext) div.ribbon-tab-title").parent(); if ($ribbon.length === 0) return; // 1. 检查按钮是否已存在，如果存在则跳过插入，只更新事件 // 这样可以防止每次刷新笔记时按钮跑到最后面去 if ($ribbon.find('.video-converter-button').length === 0) { // 2. 找到当前的最后一个按钮 (通常这会排在“笔记详情”按钮之前) const $lastBtn = $ribbon.find('.ribbon-tab-title:not(.backToHis)').last(); // 3. 构建按钮 HTML (包含 spacer 间隔符，这很重要) const btnHtml = `

`; // 4. 插入到最后一个按钮之后 if ($lastBtn.length > 0) { // $lastBtn.after(btnHtml); $lastBtn.before(btnHtml); } else { // $ribbon.prepend(btnHtml); $ribbon.append(btnHtml); } } // 绑定点击事件 (先 off 再 on 防止重复) // 注意：只绑定到 title 元素，不绑定到 spacer const $btn = $ribbon.find('div.video-converter-button.ribbon-tab-title'); $btn.off('click').on('click', () => this.convertVideos()); } /** * 转换视频链接（后端处理） */ async convertVideos() { const note = api.getActiveContextNote(); if (!note) return; const $icon = $('.video-converter-icon'); $icon.removeClass('success').addClass('loading'); api.showMessage('🔄 正在转换视频链接...'); try { const result = await api.runAsyncOnBackendWithManualTransactionHandling(async (noteId) => { const note = await api.getNote(noteId); if (!note) return { success: false, error: '笔记不存在' }; let content = await note.getContent(); const originalContent = content; let count = 0; // 生成视频链接 HTML const createVideoLink = (url, title, type) => { const hash = type === 'native' ? '#video-native' : '#video-iframe'; const safeTitle = (title || '视频').replace(/"/g, '"').replace(/${safeTitle}

`; }; // URL 处理器 const processUrl = (url) => { url = url.trim(); if (url.includes('#video-native') || url.includes('#video-iframe')) return null; // 本地/直链视频 if (/\.(mp4|webm|ogg|mov|m3u8|mkv|avi|flv)(\?.*)?$/i.test(url) || url.includes('/p/') || url.includes('localhost') || url.includes('127.0.0.1')) { const filename = decodeURIComponent(url.split('/').pop().split('?')[0].split('#')[0]); return { type: 'native', url, title: filename || '本地视频' }; } // Bilibili if (url.includes('bilibili.com')) { const bv = url.match(/(BV[\w]+)/i); if (bv) { return { type: 'iframe', url: `https://player.bilibili.com/player.html?bvid=${bv[1]}&high_quality=1&autoplay=0`, title: `B站视频 ${bv[1]}` }; } } // YouTube if (url.includes('youtube.com') || url.includes('youtu.be')) { let vid = url.match(/(?:v=|youtu\.be\/)([^&?#]+)/); if (vid) { return { type: 'iframe', url: `https://www.youtube.com/embed/${vid[1]}`, title: `YouTube ${vid[1]}` }; } } // Vimeo if (url.includes('vimeo.com')) { const vid = url.match(/vimeo\.com\/(\d+)/); if (vid) { return { type: 'iframe', url: `https://player.vimeo.com/video/${vid[1]}`, title: `Vimeo ${vid[1]}` }; } } // 优酷 if (url.includes('youku.com')) { const vid = url.match(/id_([^.]+)/); if (vid) { return { type: 'iframe', url: `https://player.youku.com/embed/${vid[1]}`, title: `优酷视频` }; } } return null; }; // 处理标签 content = content.replace(/]*href=["']([^"']+)["'][^>]*>[\s\S]*?<\/a>/gi, (match, url) => { const result = processUrl(url); if (result) { count++; return createVideoLink(result.url, result.title, result.type); } return match; }); // 处理

内的纯文本 URL content = content.replace(/]*>([\s\S]*?)<\/p>/gi, (match, inner) => { const trimmed = inner.replace(/ /g, ' ').replace(//gi, ' ').trim(); if (/"]+)$/i); if (urlMatch) { const result = processUrl(urlMatch[1]); if (result) { count++; return createVideoLink(result.url, result.title, result.type); } } return match; }); // 修复旧版 ck-media__wrapper content = content.replace( /]*class="[^"]*ck-media__wrapper[^"]*"[^>]*data-oembed-url="([^"]+)"[^>]*>[\s\S]*?<\/div>/gi, (match, url) => { if (url) { count++; const isNative = match.includes('data-is-native="true"'); const title = decodeURIComponent(url.split('/').pop().split('?')[0]) || '视频'; return createVideoLink(url, title, isNative ? 'native' : 'iframe'); } return match; } ); // 清理空结构 content = content.replace(/

\s*

\s*( |\s)*<\/div>\s*<\/div>/gi, ''); if (content !== originalContent) { await note.setContent(content); return { success: true, count }; } return { success: false, count: 0 }; }, [note.noteId]); $icon.removeClass('loading'); if (result.success) { $icon.addClass('success'); api.showMessage(`✅ 已转换 ${result.count} 个视频链接`); setTimeout(() => { $icon.removeClass('success'); api.activateNote(note.noteId); }, 1000); } else if (result.error) { api.showMessage('❌ ' + result.error); } else { api.showMessage('ℹ️ 没有找到可转换的视频链接'); } } catch (e) { console.error('[VideoEmbed]', e); api.showMessage('❌ 转换出错: ' + e.message); $('.video-converter-icon').removeClass('loading'); } } entitiesReloadedEvent({ loadResults }) { if (loadResults.isNoteReloaded(this.noteId)) { setTimeout(() => this.renderVideos(), 300); } } } module.exports = new VideoEmbedV14(); ``` ### TriliumNext Version 0.101.1 ### What operating system are you using? Windows ### What is your setup? Local (no sync) ### Operating System Version Windows 11 ### Error logs _No response_

[New UI Feedback] Custom script for embedding videos (Read-Only mode) broken in new rendering logic #8185

Company

Community

Support

Connect