KindEditor 上傳影片後獲取 URL 並賦值至富文本編輯器的實作方法

問題背景

在使用 KindEditor 富文本編輯器進行影片上傳功能開發時，常見需求是：使用者在上傳對話框中確認後，如何取得輸入框中的影片 URL，並將其自動插入到編輯器內容中。本文提供具體的程式碼修改方向與關鍵邏輯說明。

核心檔案與修改位置

KindEditor 的媒體上傳邏輯主要集中在外掛目錄下的 kindeditor/plugins/media/media.js 檔案中。重點關注「確定」按鈕的點擊事件處理函式，約在第 56 行左右。

關鍵程式碼邏輯解析

yesBtn: {
    name: self.lang('yes'),
    click: function(e) {
        // 1. 獲取 URL 輸入框的值並去除首尾空白
        var url = K.trim(urlBox.val());
        
        // 2. 這裡的 url 變數即為使用者輸入的影片連結
        // 後續邏輯通常包含：
        // - 驗證 URL 格式
        // - 生成對應的 HTML 標籤 (如 <video> 或 <embed>)
        // - 呼叫 editor.insertHtml(html) 將內容插入編輯器
    }
}

實作建議

1. 備份原檔：修改前務必備份 media.js。
2. 擴充驗證：在獲取 url 後，加入正則表達式驗證，確保為合法的影片連結（支援 mp4, m3u8, YouTube 等）。
3. 插入編輯器：使用 editor.insertHtml('<video src="' + url + '" controls></video>') 將影片標籤插入光標位置。
4. 關閉對話框：插入成功後呼叫 self.hideDialog().focus(); 關閉上傳視窗並讓編輯器重獲焦點。

進階提示

若專案需整合雲端儲存（如 AWS S3、阿里雲 OSS），建議在 click 事件中改為觸發檔案上傳流程，上傳成功後由回呼函式取得 CDN URL，再插入編輯器，而非直接使用者手動輸入 URL。