首先參考[Vue.js教學筆記]Webpack模組整合工具之安裝與[Vue.js教學筆記]CKEditor套入Webpack模組整合工具把環境建立起來,安裝方法主要以Location Map (Google)提供的方式來進行,進入網頁拉到最下方,點擊Downlod下載
一併把Widget與Line Utilities這兩個都下載下來
將這三個壓縮檔解壓縮後,
把檔案移植\ckeditor\plugins資料夾內,
打開\ckeditor\config.js,在裡面增加兩行程式,如下所示,
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'locationmap';
config.locationMapPath = '/ckeditor/plugins/locationmap/';
};
接下來打開\src\components\Hello.vue,在toolbar中增加'LocationMap',如下所示,
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' , 'LocationMap'] ,
[ 'About' ]
],
height: 300
}
執行指令
npm run build
產生發佈檔, 將dist資料夾底下檔案static與index.html複製到與CKEditor,CKFinder這兩個資料夾相同位置,
利用XAMMP來執行,在CKEditor工具列上會多出地圖的icon圖示,如下所示,
點擊此圖示會跳Location Map操作介面,如下所示,
上方介面標題為,
* Latitude *緯度
* Longitude *經度
* Zoom *縮放
Image 圖片
* Width *寬度
* Height *高度
操作方式先將"Click and then move the icon to your store location"對話框關閉,移動紅色標誌讀出緯度(Latitude),經度(Longitude)與縮放(Zoom),如下所示,
再來設定顯示寬度(Width)與高度(Height),例如Width為500*Height為500,在按下確定,此圖就會在CKEditor文字編輯視窗中,如下所示,
留言列表
