###### tags: `Vue` `CKeditor5`
{%hackmd BJrTq20hE %}
# Vue店商網頁-CKeditor5套件使用

## 1.安裝CKeditor套件
在終端機輸入"npm install --save @ckeditor/ckeditor5-build-classic"

## 2.在想要使用的component載入CKeditor

以下範例在component的script

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

<script>
export default {
  data () {
      return {
          artical : {
              content:''
          }
      }
  }
// CKeditor的套件
  editor: ClassicEditor,
      editorConfig: {
        toolbar: ['heading', 'bold', 'italic', '|', 'link']
      },
}
</script>    

以下範例在component的template

<template>
    <div class="from-group">
              <label class="form-label" for="articleContent">文章內容</label>
              // 在 template使用 ckeditor標籤，並使用v-bind綁定editor與config
              <ckeditor placeholder= "請輸入文章內容" id="articleContent"
              :editor="editor"
              :config="editorConfig"
              v-model="article.content">
              </ckeditor>
            </div>
</template>    

以下範例在style
載入ckeditor編輯bar樣式

<style lang="scss">
  .ck-editor__editable_inline {
  min-height: 200px;
}
</style>

參考資料
---
[CKEditor 5 classic editor build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic)