<template>
<div>
  <textarea name="editor1" id="editor1" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor.
  </textarea>
  <el-button @click ="show">show Editor</el-button>
  <div v-html ="document"></div>
</div>
</template>

<script>
export default {
  data () {
    return {
      editor: {},
      document: ''
    }
  },
  methods: {
    show  () {
      this.document = this.editor.getData()
    }
  },
  mounted () {

    this.$load('https://cdn.bootcss.com/ckeditor/4.7.3/ckeditor.js', () => {
      window.CKEDITOR.plugins.add('qiniuUpload', {
        requires: ['dialog'],
        init: function (a) {
          a.addCommand('qiniuUpload', new window.CKEDITOR.dialogCommand('qiniuUpload'))
          a.ui.addButton('picUpload', {
            label: 'qiniuUpload', //调用dialog时显示的名称
            command: 'qiniuUpload',
            icon: 'hello.ico'
          })
          window.CKEDITOR.dialog.add('qiniuUpload', {
            title: 'picUpload',
            minWidth: '500px',
            resizable: true,
            minHeight: '500px',
            contents: [{
              id: 'tab1',
              label: '',
              title: '',
              expand: true,
              width: '500px',
              background: '#fff',
              height: '500px',
              padding: 0,
              elements: [{
                type: 'text',
                label: '请输入日期控件名称',
                id: 'lang',
                required: true
              }, {
                type: 'html',
                html: '<span>说明：日历控件选择的日期、时间将回填到该输入框中。</span>'
              }]
            }, {
              id: 'tab1',
              label: '',
              title: '',
              expand: true,
              width: '500px',
              background: '#fff',
              height: '500px',
              padding: 0,
              elements: [{
                type: 'text',
                label: '请输入日期控件名称',
                id: 'lang',
                required: true
              }, {
                type: 'html',
                html: '<span>说明：日历控件选择的日期、时间将回填到该输入框中。</span>'
              }]
            }],
            onOk: function () {
            },
            onLoad: function () {
              console.log('next')
            }
          })
        }
      })
      this.editor = window.CKEDITOR.replace('editor1', {
        extraPlugins: 'qiniuUpload',
        filebrowserImageUploadUrl: 'https://api.medmeeting.com/v1/files',
        image_previewText: ' ',
        colorButton_normalizeBackground: true,
        colorButton_foreStyle: {
          element: 'span',
          styles: {color: '#(color)'}
        },
        colorButton_enableMore: false,
        colorButton_colors: '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF',
        toolbarGroups: [
          { name: 'qiniuUpload', groups: ['qiniuUpload']},
          { name: 'styles', groups: [ 'styles' ] },
          { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
          { name: 'colors', groups: [ 'colors' ] },
          { name: 'links', groups: [ 'links' ] },
          { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
          { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
          { name: 'forms', groups: [ 'forms' ] },
          { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
          { name: 'tools', groups: [ 'tools' ] },
          { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
          { name: 'insert', groups: [ 'insert' ] },
          { name: 'others', groups: [ 'others' ] },
          { name: 'about', groups: [ 'about' ] }
        ]
      })

      this.editor.on('fileUploadRequest', function ( evt ) {
        var xhr = evt.data.fileLoader.xhr

        console.log('Hello world')
        console.log('读取Request')
        console.log('url' + evt.data.url)
        console.log('message' + evt.data.message)
        console.log('filename' + evt.data.filename)
        xhr.withCredentials = true
      })
    })
  }
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
