在上一章介紹[Vue.js教學筆記]CKEditor套入Webpack模組整合工具,此章是以"Customize"客製化的方式進行,進行步驟上會比較多,
官方有提供Basic Package,Standard Package,Full Package這三個標準化的模組,在下方有提供這三個模組之CKEditor CDN,如下所示,
這次也以Full Package這模組做示範,在左方下拉選單選擇Full Package,如下所示,
會這一個連結,接下來要來安裝Webpack模組整合工具專案,依照[Vue.js教學筆記]Webpack模組整合工具之安裝步驟,來創建名為ckeditor-project專案,
接著輸入指令安裝"npm install vue-ckeditor2 --save",如下所示,
打開/vuejsWorkSpace/ckeditor-project中的index.html,引入Full Package之CKEditor CDN
引入方式<script src="//cdn.ckeditor.com/4.7.3/full/ckeditor.js"></script>,如下所示,
接下來修改在/vuejsWorkSpace/ckeditor-project/src/components中的Hello.vue,把原來的程式刪除,再添加以下紅字程式
<template>
<div class="hello">
<ckeditor v-model="content" :config="config"></ckeditor>
</div>
</template>
<script>
import Ckeditor from 'vue-ckeditor2'
export default {
name: 'hello',
components: {
Ckeditor
},
data () {
return {
content: '',
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' ] ,
[ 'About' ]
],
height: 300
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
完成後執行npm run dev,等待一段時間就可以看到以下畫面,
留言列表
