CKEditor是一個專門在網頁上使用的開放原始碼之文字編輯器,不需要太複雜的安裝步驟即可使用可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的程式語言相結合
點擊下方CKEditor官方網站連結進入
點擊網頁上方"Download"即可進入下方所示畫面,
下載時建議點擊"Customize"客製化,這樣就能挑選出想要的文字編輯器樣式,操作方式如下,
第一步選擇"Full",這樣就有足夠的功能使用與調整
第二步是插件的選擇,如果要增加額外插件,可將畫面右手邊的插件引入到左邊,在這裡就不增加插件,往後有需要也可以再增加插件
在下面可以選擇文字編輯器外觀樣式,這裡選擇"Moono Color"
第三步文字編輯器支援語言設定,這裡建議全部加入,點擊"Add all"
上述設定完成後,在"I agree with the Terms of use and confirm that I added the selected plugins and skins to this CKEditor version at my own risk."打勾,點擊"Download CKEditor 4.7.3"即可
下載完成後,將解壓所檔可以得到以下文件,
將此ckeditor資料夾放置Apache上,這裡是放置在XAMPP所建置之Apache上,此軟體的載點與相關操作可參閱[筆記]安裝XAMPP之PHP7.1.4,放置完成後啟動XAMPP之Apache,去取得位置,如下所示,
從上圖網址位置可知為http://localhost/ckeditor/ckeditor.js
接下來要來安裝Webpack模組整合工具專案,依照[Vue.js教學筆記]Webpack模組整合工具之安裝步驟,來創建名為ckeditor-project專案
接著輸入指令安裝"npm install vue-ckeditor2 --save",如下所示
打開/vuejsWorkSpace/ckeditor-project中的index.html,將ckeditor在Apache上的網址引入,如下所示,
引入方式<script src="http://localhost/ckeditor/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,等待一段時間就可以看到以下畫面,
最後愉快的來襙作CKEditor文字編輯器
留言列表
