Vue 2.x 使用CKEditor 的入坑（後續）

上篇文章記錄了vue如何引入ckeditor4，這篇主要記錄下ckeditor數據獲取等，
1.實現了編輯器初始化完成後賦值，可用於編輯新的文章
2.監聽編輯器內容改變，實時獲取最新數據，用於保存
附上老夫的demo

<template>
          <div class="editor">
            <textarea name="editor" id="editor" rows="10" cols="80"></textarea>
          </div>
        </template>
        <script>
        import CKEDITOR from 'CKEDITOR'
        export default {
          props: {
            content: {
              type: String,
              default: '請輸入您的內容'
            }
          },
          data () {
            return {}
          },
          mounted () {
            this.initCKEditor()
          },
          methods: {
            initCKEditor: function () {
              CKEDITOR.addCss(
                'figure[class*=easyimage-gradient]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }' +
                  'figure[class*=easyimage-gradient] figcaption { position: relative; z-index: 2; }' +
                  '.easyimage-gradient-1::before { background-image: linear-gradient( 135deg, rgba( 115, 110, 254, 0 ) 0%, rgba( 66, 174, 234, .72 ) 100% ); }' +
                  '.easyimage-gradient-2::before { background-image: linear-gradient( 135deg, rgba( 115, 110, 254, 0 ) 0%, rgba( 228, 66, 234, .72 ) 100% ); }'
              )
              // CKEditor 配置項
              CKEDITOR.replace('editor', {
                toolbar: [
                  {
                    name: 'clipboard',
                    items: ['PasteFromWord', '-', 'Undo', 'Redo']
                  },
                  {
                    name: 'basicstyles',
                    items: [
                      'Bold',
                      'Italic',
                      'Underline',
                      'Strike',
                      'RemoveFormat',
                      'Subscript',
                      'Superscript'
                    ]
                  },
                  {
                    name: 'links',
                    items: ['Link', 'Unlink']
                  },
                  {
                    name: 'paragraph',
                    items: [
                      'NumberedList',
                      'BulletedList',
                      '-',
                      'Outdent',
                      'Indent',
                      '-',
                      'Blockquote'
                    ]
                  },
                  {
                    name: 'insert',
                    items: ['Image', 'Table']
                  },
                  '/',
        
                  {
                    name: 'styles',
                    items: ['Format', 'Font', 'FontSize']
                  },
                  {
                    name: 'colors',
                    items: ['TextColor', 'BGColor', 'CopyFormatting']
                  },
                  {
                    name: 'align',
                    items: [
                      'JustifyLeft',
                      'JustifyCenter',
                      'JustifyRight',
                      'JustifyBlock'
                    ]
                  },
                  {
                    name: 'tools',
                    items: ['Maximize']
                  },
                  {
                    name: 'document',
                    items: ['Print', 'Source']
                  }
                ],
        
                // Configure your file manager integration. This example uses CKFinder 3 for PHP.
                // filebrowserBrowseUrl: '/apps/ckfinder/3.4.4/ckfinder.html',
                // filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.4/ckfinder.html?type=Images',
                // filebrowserUploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Files',
                filebrowserImageUploadUrl: '/upload/image.json',
                image_previewText: '',
                // Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.
                // For more information check:
                //  - About Advanced Content Filter: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter
                //  - About Disallowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content
                //  - About Allowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules
                disallowedContent: 'img{width,height,float}',
                extraAllowedContent: 'img[width,height,align];span{background}',
        
                // Enabling extra plugins, available in the full-all preset: https://ckeditor.com/cke4/presets
                extraPlugins:
                  'colorbutton,font,justify,print,tableresize,uploadimage,pastefromword,liststyle',
        
                /** ********************* File management support ***********************/
                // In order to turn on support for file uploads, CKEditor has to be configured to use some server side
                // solution with file upload/management capabilities, like for example CKFinder.
                // For more information see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_ckfinder_integration
        
                // Uncomment and correct these lines after you setup your local CKFinder instance.
                // filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
                // filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
                /** *********************  File management support ***********************/
        
                // Make the editing area bigger than default.
                height: 400,
                width: '100%',
                // An array of stylesheets to style the WYSIWYG area.
                // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
                contentsCss: [
                  'http://cdn.ckeditor.com/4.11.2/full-all/contents.css',
                  'assets/css/pastefromword.css'
                ],
                easyimage_styles: {
                  gradient1: {
                    group: 'easyimage-gradients',
                    attributes: {
                      class: 'easyimage-gradient-1'
                    },
                    label: 'Blue Gradient',
                    icon:
                      'https://ckeditor.com/docs/ckeditor4/4.11.2/examples/assets/easyimage/icons/gradient1.png',
                    iconHiDpi:
                      'https://ckeditor.com/docs/ckeditor4/4.11.2/examples/assets/easyimage/icons/hidpi/gradient1.png'
                  },
                  gradient2: {
                    group: 'easyimage-gradients',
                    attributes: {
                      class: 'easyimage-gradient-2'
                    },
                    label: 'Pink Gradient',
                    icon:
                      'https://ckeditor.com/docs/ckeditor4/4.11.2/examples/assets/easyimage/icons/gradient2.png',
                    iconHiDpi:
                      'https://ckeditor.com/docs/ckeditor4/4.11.2/examples/assets/easyimage/icons/hidpi/gradient2.png'
                  },
                  noGradient: {
                    group: 'easyimage-gradients',
                    attributes: {
                      class: 'easyimage-no-gradient'
                    },
                    label: 'No Gradient',
                    icon:
                      'https://ckeditor.com/docs/ckeditor4/4.11.2/examples/assets/easyimage/icons/nogradient.png',
                    iconHiDpi:
                      'https://ckeditor.com/docs/ckeditor4/4.11.2/examples/assets/easyimage/icons/hidpi/nogradient.png'
                  }
                },
                language: 'zh-cn',
                // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
                bodyClass: 'document-editor',
        
                // Reduce the list of block elements listed in the Format dropdown to the most commonly used.
                format_tags: 'p;h1;h2;h3;pre',
        
                // Simplify the Image and Link dialog windows. The 'Advanced' tab is not needed in most cases.
                removeDialogTabs: 'image:advanced;link:advanced',
        
                // Define the list of styles which should be available in the Styles dropdown list.
                // If the 'class' attribute is used to style an element, make sure to define the style for the class in 'mystyles.css'
                // (and on your website so that it rendered in the same way).
                // Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
                // that file, which means one HTTP request less (and a faster startup).
                // For more information see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_styles
                stylesSet: [
                  /* Inline Styles */
                  {
                    name: 'Marker',
                    element: 'span',
                    attributes: {
                      class: 'marker'
                    }
                  },
                  {
                    name: 'Cited Work',
                    element: 'cite'
                  },
                  {
                    name: 'Inline Quotation',
                    element: 'q'
                  },
        
                  /* Object Styles */
                  {
                    name: 'Special Container',
                    element: 'div',
                    styles: {
                      padding: '5px 10px',
                      background: '#eee',
                      border: '1px solid #ccc'
                    }
                  },
                  {
                    name: 'Compact table',
                    element: 'table',
                    attributes: {
                      cellpadding: '5',
                      cellspacing: '0',
                      border: '1',
                      bordercolor: '#ccc'
                    },
                    styles: {
                      'border-collapse': 'collapse'
                    }
                  },
                  {
                    name: 'Borderless Table',
                    element: 'table',
                    styles: {
                      'border-style': 'hidden',
                      'background-color': '#E6E6FA'
                    }
                  },
                  {
                    name: 'Square Bulleted List',
                    element: 'ul',
                    styles: {
                      'list-style-type': 'square'
                    }
                  }
                ]
              })
              //  CKEditor 初始化完成加載數據
              CKEDITOR.on('instanceReady', e => {
                this.setContent()
              })
        
              //  CKEditor 數據改變-監聽
              CKEDITOR.instances.editor.on('change', e => {
                this.getContent()
              })
            },
            setContent () {
              CKEDITOR.instances.editor.setData(this.content)
            },
            getContent () {
               // 參照vue子組件傳值給
              this.$emit('catchData', CKEDITOR.instances.editor.getData())
            }
          }
        }
        </script>