共计 6235 个字符，预计需要花费 16 分钟才能阅读完成。
上篇文章记录了 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>
