<template>
  <ckeditor
    :value="value"
    @input="$event => $emit('input', $event)"
    :readOnly="readonly"
    :style="{ width: width == null ? null : width + 'px' }"
    :editorUrl="editorUrl"
    :config="config"
  ></ckeditor>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import util from '../../libs/util';

  export default {
    mixins: [mixinPage],
    props: {
      value: {
        type: String
      },
      // 只读
      readonly: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number
      },
      height: {
        type: Number
      },
      editorUrl: {
        type: String,
        default: 'https://cdn.ckeditor.com/4.13.0/full/ckeditor.js'
      }
    },
    computed: {
      config() {
        const token = util.cookies.get('token');
        return {
          height: this.height == null ? 500 : this.height,
          fileTools_requestHeaders: {
            Authorization: 'Bearer ' + token
          },
          toolbar: [
            { name: 'document', items: ['Preview', 'Print'] },
            { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
            { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
            {
              name: 'basicstyles',
              items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat']
            },
            {
              name: 'paragraph',
              items: [
                'NumberedList',
                'BulletedList',
                '-',
                'Outdent',
                'Indent',
                '-',
                'Blockquote',
                'CreateDiv',
                '-',
                'JustifyLeft',
                'JustifyCenter',
                'JustifyRight',
                'JustifyBlock',
                '-',
                'BidiLtr',
                'BidiRtl'
              ]
            },
            { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
            { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
            { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
            { name: 'colors', items: ['TextColor', 'BGColor'] },
            { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
          ],
          filebrowserUploadUrl: this.apiBaseURL + 'api/CKEditor?r=1'
        };
      }
    },
    methods: {}
  };
</script>
