[Vue.js教學筆記]CKEditor套用Youtube功能(Youtube Plugin) @ Michael_Jheng的部落格

首先參考[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
}