ckeditor新增插入flv視訊的外掛
昨天寫在網頁中播放flv的博文的時候,想在博文中插入視訊,但是發現無法實現。
因為用的編輯器是ckeditor,決定自己寫個外掛插入視訊。
官方的教程在這裡,寫得很好,又簡明又清楚。
寫一個外掛需要建立的資料夾和檔案如圖所示:
主目錄video(此目錄名即外掛名)要放到ckeditor的plugins資料夾下,其中包含最主要的檔案plugin.js。
如果需要對話方塊,則需要dialogs資料夾和與外掛同名的js檔案,本例中即video.js。
圖示放在icons資料夾下,命名為xxx.png,大小為16*16畫素。
主檔案plugin.js內容如下:
CKEDITOR.plugins.add( 'video', {
icons: 'video',
init: function( editor ) {
editor.addCommand( 'video', new CKEDITOR.dialogCommand( 'videoDialog' ) );
editor.ui.addButton( 'Video', {
label: '視訊',
command: 'video',
toolbar: 'insert'
});
CKEDITOR.dialog.add( 'videoDialog', this.path + 'dialogs/video.js' );
}
});
其中涉及“video”的地方基於約定都要與外掛名保持一致,不要挑戰這個約定,毫無必要且毫無意義。
彈出對話方塊檔案video.js內容如下:
CKEDITOR.dialog.add( 'videoDialog', function ( editor ) {
return {
title: '視訊屬性',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'flv',
label: 'VIDEO URL',
elements: [
{
type: 'text',
id: 'flvLink',
label: '輸入視訊路徑',
validate: CKEDITOR.dialog.validate.notEmpty( "視訊路徑不能為空!" )
}
]
}
],
onOk: function() {
var dialog = this;
var url = dialog.getValueOf('flv', 'flvLink');
var video = editor.document.createElement( 'video' );
video.setAttribute('src', url);
editor.insertElement( video );
}
};
});
其中contents定義對話方塊中的選項卡和表單項,onOk是點選對話方塊的“確定”按鈕時觸發的回撥函式。
顯然onOk這個函式是重中之重。最關鍵的有兩個步驟:
1)從對話方塊表單中取值,即示例程式碼中的var url = dialog.getValueOf('flv', 'flvLink');
2)向編輯器中插入內容,即示例程式碼中的editor.insertElement( video );
這兩個步驟要根據具體需要自行實現。
外掛編寫完成後在頁面js中顯式引入之即可:
CKEDITOR.replace( 'editor', {
language: 'zh-cn',
extraPlugins : 'video'
} );
示例程式碼已上傳到github。
TODO:目前只能插入指定url的視訊,視訊上傳沒做,可以仿照圖片上傳的功能來實現。
相關推薦
ckeditor新增插入flv視訊的外掛
昨天寫在網頁中播放flv的博文的時候,想在博文中插入視訊,但是發現無法實現。 因為用的編輯器是ckeditor,決定自己寫個外掛插入視訊。 官方的教程在這裡,寫得很好,又簡明又清楚。 寫一個外掛需要建立的資料夾和檔案如圖所示: 主目錄video(此目錄名即外掛名)要放到ckeditor的plugins資料
在網頁中插入FLV視訊,經測試相容IE、火狐、谷歌等瀏覽器
比較目前,所有的瀏覽器都支援FLASH。所以,這個方法大眾普遍都很接受,優酷、土豆等線上視訊就是使用的FLASH的。 本例播放器使用Flvplayer.swf。播放器在下文的demo檔案中。網頁中插入程式碼的如下: <object classid="clsid:
ckeditor自定義視訊外掛支援優酷、土豆、騰訊視訊
現最近專案使用的ckeditor作為編輯器,業務需要新增視訊內容,搜尋後發現一個video的外掛,但是隻支援MP4格式並且要做資源服務,不滿足現階段需求。現階段最好能直接嵌入第三方視訊服務商的內容。
CKEditor 新增自定義外掛
CKEditor是個強大的編輯器,在很多專案中都是用這個編輯器讓user編輯頁面。因為介面十分類似Word,所以一般人都能輕易上手。只是最好還是要有Html的底子,不然有時候要排版也是會有困難。 網路上已經有不少人實做出來,只是我這人很愛自己做輪子,想說趁這個機會學起來
Nginx搭建flv視訊點播伺服器
前一段時間使用Nginx搭建的多媒體伺服器只能在緩衝過的時間區域內拖放, 而不能拖放到未緩衝的地方. 這就帶來了一個問題: 如果視訊限速的速率很小, 那麼客戶端觀看視訊時肯定不流暢, 而且使用者不能向前拖放, 使用者體驗很不好. 如果視訊限速的速率很大或者不限速, 伺服器是承受不了的,
用什麼軟體能把flv視訊轉成GIF動畫
其實網上有一部分的GIF動畫來來自於視訊(電影、電視劇、綜藝、動漫),特別是一些炫酷的GIF特效。聊天軟體也偏愛GIF動畫,比方說QQ、微信都有很多GIF動畫為大家提供。並且大家與好友聊天鬥圖應該大部分使用的都是GIF動畫,因為GIF動畫生動形象能夠很好的表達我們的各種心情。那麼用什麼軟體能把視訊轉成GI
django-ckeditor新增程式碼功能(codesnippet)
最近做了一個部落格,使用python3+django2.1開發的,後臺編輯器和前端顯示用的Django-ckeditor富文字編輯器,由於發現沒有程式碼塊功能,寫上去的程式碼在前端展示有點亂,於是一頓問度娘查詢資料後,找到了解決辦法,現在就是將其記錄下來,方便自己以後檢視以及各位有需要的小夥伴借鑑。 首先我
Mac命令列新增自動提示功能外掛zsh-autosuggestions
安裝步驟 一、cd ~/.oh-my-zsh/custom/plugins/ 二.、git clone https://github.com/zsh-users/zsh-syntax-highlighting.git 三、vi ~/.zshrc 1.在檔案中查詢 :/plu
iOS 視訊剪下、旋轉,視訊新增音訊、新增水印,視訊匯出
概述 視訊處理主要是用到以下這幾個類 AVMutableComposition、 AVMutableVideoComposition、 AVMutableAudioMix、 AVMutableVideoCompositionInstruction、 AVMuta
yii2-dynamicform外掛動態新增yii2-widget-select2外掛時無法正常工作的解決方法
修改yii2-dynamic-form.js檔案,從第449行開始,將程式碼替換掉 // "kartik-v/yii2-widget-select2" var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find
PHP與視訊外掛功能實現
php與視訊播放器外掛的功能,說白了就是前端是播放器的外掛,直接呼叫後端傳遞過來的播放地址,還有其他的一些資訊,比如封面圖面,名稱,播放時間,地址等等。這些需要在後臺把這些封裝起來,可以儲存在資料庫裡,方便呼叫。以上就是思路。想起來是不是很簡單。做起來也差不多咯。 首先,前端
unity 播放伺服器視訊及本地視訊外掛
一、unity用於Android的視訊播放外掛: 嘗試了很多,最好用的是Easy Movie Texture Video Texture 支援絕對路徑、相對路徑、網路路徑。 下載地址: 下載 使用方法: 1、匯入 2、設定File -> BuildSettings
【IE瀏覽器】視訊外掛3GControl.msi的安裝
目錄 一、IE瀏覽器安全設定 (1)IE瀏覽器版本要求:IE9.0以上版本 (2)IE瀏覽器-設定-Internet選項-安全-自定義級別:將“下載未簽名的ActiveX ”設定為
uCast Global Video Highway™將XL Axiata新增到全球視訊分發平臺
使用者超5000萬的XL Axiata選擇uCast Global Video Highway為一流的流媒體視訊服務提供支援 洛杉磯--(美國商業資訊)--uCast Global今日宣佈,XL Axiata已簽署加入首個端到端全球視訊分發平臺uCast Global V
3D畫面合成AE視訊外掛Evil Twin Stereo 3D破解版(含視訊教程)
視訊3D畫面合成AE外掛Evil Twin Stereo 3D安裝教程 視訊3D畫面合成AE外掛Evil Twin Stereo 3D映象包下載完成後開啟,將左側的【EvilTwinStereo3D.jsxbin】拖到右側的【After Effects】(/Applic
一款Visual Studio新增背景圖片的外掛—ClaudiaIDE
ClaudiaIDE 在之前的部落格中,我們介紹瞭如何修改VS2015的主題,除此之外,我們還可以新增背景。這需要用到另一款外掛—ClaudiaIDE,它提供了單一背景顯示,幻燈片播放形式,背景透明度設定,背景顯示位置設定等等。 如何安裝 安裝過程非常簡單,但是為了結構
vscode新增快捷鍵與外掛
添加了個"move ts"外掛。 新增快捷鍵 { "key": "ctrl+alt+m", "command": "move-ts.move", "when": "editorTextFocus" } 用快捷鍵移動檔案,每次都彈出警告對話方塊。檢
cordova ionic 使用 videogular 視訊外掛播放視訊
cordova ionic 使用 videogular 視訊外掛播放視訊 外掛官網: 官方文件: github下載: 根據官方提供的文件,使用該外掛: (一)建立專案 ionic start 專案 ionic platform add android ionic
KM盒子插入音訊視訊操作教程
使用KM盒子軟體插入音視訊時,軟體預設會在編輯器中新增一段播放程式碼,例如插入mp3程式碼: 同時會將插入的音訊或視訊檔案按時間日期命令複製到專案資料夾下面。其中<source src="url" type="audio/mpeg">是指定播放源路徑,預設會新增多個source路徑以相容
Pycharm如何新增第三方庫和外掛
Pycharm是我比較喜歡的一款編輯器。 學習python有半年左右,安裝第三方庫都是通過 pip install 或者 easy_install。每次都要開啟命令列感覺太麻煩。還好Pycharm提供了安裝第三方庫和安裝外掛的功能。 首先開啟Pycharm,