此篇為修正文章,只做簡單講解,在[Vue.js教學筆記]CKEditor套入Webpack模組整合工具中介紹的套用方法,需要在每個.vue中增加CKEditor配置,相同的配置一直重覆使用確實是不好的使用方法,此篇將配置統一在CKEditor套件中的config.js,在config.js可配置以下工具,
CKEDITOR.editorConfig = function( config ) {
/* ckeditor工具 */
config.toolbar = [
{items:[ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ]},
{items:[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]},
{items:[ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ]},
{items:[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ]},
{items:[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ]},
{items:[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ]},
{items:[ 'Link', 'Unlink', 'Anchor' ]},
{items:[ 'Image', 'Flash', 'Youtube', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ]},
{items:[ 'Styles', 'Format', 'Font', 'FontSize' ]},
{items:[ 'TextColor', 'BGColor' ]},
{items:[ 'Maximize', 'ShowBlocks' ]},
{items:[ 'About' ]}
];
/* ckeditor字體 */
config.font_names ='Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif;新細明體;標楷體;微軟正黑體';
/* ckeditor寬與高 */
config.width = '100%';
config.height = 500;
/* 允許所有標籤 */
config.allowedContent = true;
};
在Webpack中的index.html需增加ckeditor.js連結來進行套用,本人是用XAMPP來執行此連結,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ckeditor-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="http://localhost/ckeditor/ckeditor.js"></script>
</body>
</html>
在Webpack需要安裝vue-ckeditor2,在[Vue.js教學筆記]CKEditor套入Webpack模組整合工具有提到,輸入指令安裝"npm install vue-ckeditor2 --save",在路徑\src\components\HelloWorld.vue中程式修改如下,
<template>
<ckeditor v-model="content"></ckeditor>
</template>
<script>
import ckeditor from 'vue-ckeditor2'
export default {
components: {
ckeditor
},
data () {
return {
content: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
執行結果如下,
留言列表
