首先參考[Vue.js教學筆記]Webpack模組整合工具之安裝與[Vue.js教學筆記]CKEditor套入Webpack模組整合工具把環境建立起來,安裝方法主要以Youtube Plugin提供的方式來進行,進入網頁拉到最下方,點擊Downlod下載
將壓縮檔解壓縮後,
把檔案移植\ckeditor\plugins資料夾內,
打開\ckeditor\config.js,在裡面增加一行程式,如下所示,
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'youtube';
};
接下來打開\src\components\Hello.vue,在toolbar中增加'Youtube',如下所示,
config: {
toolbar: [
[ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ],
[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ],
[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ],
[ 'Link', 'Unlink', 'Anchor' ],
[ 'Image', 'Flash', 'Youtube', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] ,
[ 'Styles', 'Format', 'Font', 'FontSize' ],
[ 'TextColor', 'BGColor' ] ,
[ 'Maximize', 'ShowBlocks' , 'Youtube'] ,
[ 'About' ]
],
height: 300
}
執行指令
npm run build
產生發佈檔, 將dist資料夾底下檔案static與index.html複製到與CKEditor,CKFinder這兩個資料夾相同位置,
利用XAMMP來執行,在CKEditor工具列上會多出地圖的icon圖示,如下所示,
點擊此圖示會跳Youtube操作介面,如下所示,
可以選擇貼上嵌入碼或貼上Youtube影片URL,上Youtube選擇任一影片,點擊右下方分享,如下所示,
以下網址是Youtube影片URL,如要選擇嵌入請點選,
下圖是選擇嵌入介面,把HTML標籤文字複製,
貼在"貼上嵌入碼"上,按下確定,
影片就會出現在CKEditor文字編輯器上,如下所示,
留言列表
