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> ...