ADD scEdit

public/json/login.json

@@ -58,6 +58,15 @@
 							"type": "menu"
 						},
 						"component": "vab/upload"
+					},
+					{
+						"path": "/vab/edit",
+						"name": "edit",
+						"meta": {
+							"title": "富文本编辑器",
+							"type": "menu"
+						},
+						"component": "vab/edit"
 					}
 				]
 			},

src/components/scEdit/index.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="sceditor">
+		<div class="toolbar-container"></div>
+		<div class="content-container">
+			<ckeditor v-model="value" :editor="editor" :config="editorConfig" :disabled="disabled" @ready="onReady" @input="onEditorInput"></ckeditor>
+		</div>
+	</div>
+</template>
+
+<script>
+	import ClassicEditor from './build-classic/ckeditor.js';
+	import CKEditor from './ckeditor.js';
+
+	export default {
+		components: {
+			ckeditor: CKEditor.component
+		},
+		props: {
+			modelValue: { type: String, default: "" },
+			disabled: { type: Boolean, default: false }
+		},
+		data(){
+			return {
+				value: this.modelValue,
+				editor: ClassicEditor,
+				editorConfig: {
+					toolbar: [ 'heading', '|', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'imageUpload' ,'insertTable'],
+					placeholder: '请填写内容',
+					image: {
+						toolbar: [
+							'imageTextAlternative',
+							'imageStyle:full',
+							'imageStyle:side'
+						]
+					},
+					table: {
+						contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties' ]
+					},
+					ckfinder: {
+					            uploadUrl: 'https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api/upload'
+					        }
+				}
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			onReady(editor) {
+				const toolbarContainer = document.querySelector( '.toolbar-container' );
+				toolbarContainer.prepend( editor.ui.view.toolbar.element );
+			},
+			onEditorInput(val){
+				this.$emit('update:modelValue', val);
+			}
+		}
+	}
+</script>
+
+<style>
+
+	.sceditor {
+
+	}
+	.sceditor .ck-toolbar {background: #fff;border-color: #DCDFE6;box-shadow: 2px 2px 1px rgba(0,0,0,.05);    position: relative;z-index: 1;}
+	.content-container {
+		    background: #f6f8f9;
+		    overflow-y: scroll;
+			padding:30px;
+			max-height:300px;
+			border: 1px solid #DCDFE6;
+			border-top: 0;
+	}
+	.content-container .ck-content {
+			margin: 0 auto;
+			background: #fff;
+			border: 1px solid #DCDFE6!important;
+			box-shadow: 2px 2px 1px rgba(0,0,0,.05)!important;
+			padding:40px;
+			min-height: 300px;
+	}
+</style>

src/views/vab/edit.vue

@@ -0,0 +1,25 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<sc-edit v-model="html"></sc-edit>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import scEdit from '@/components/scEdit';
+	export default {
+		name: "edit",
+		components: {
+			scEdit
+		},
+		data(){
+			return {
+				html: '<h2 style="text-align:center;"><span style="font-family:Georgia, serif;">The Flavorful Tuscany Meetup</span></h2><h3 style="text-align:center;"><span style="font-family:Georgia, serif;">Welcome letter</span></h3><p><span class="text-big">Dear Guest,</span></p><p><span class="text-big">We are delighted to welcome you to the annual Flavorful Tuscany Meetup and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.</span></p><p><span class="text-big">Please find attached the full schedule of the event.</span></p><p>&nbsp;</p><figure class="table" style="width:100%;"><table><tbody><tr><td style="background-color:hsl(0, 0%, 60%);height:40px;text-align:center;" colspan="2"><span class="text-big">Saturday, July 14</span></td></tr><tr><td style="background-color:hsl(0, 0%, 90%);height:40px;padding:15px;width:180px;">9:30 AM - 11:30 AM</td><td style="padding:15px;"><p><span class="text-big">Americano vs. Brewed - “know your coffee” with:</span></p><p>&nbsp;</p><p>Giulia Bianchi<br>Stefano Garau<br>Giuseppe Russo</p></td></tr><tr><td style="background-color:hsl(0, 0%, 90%);padding:15px;">1:00 PM - 3:00 PM</td><td style="padding:15px;"><p><span class="text-big">Pappardelle al pomodoro - live cooking</span></p><p>&nbsp;</p><p>Incorporate the freshest ingredients&nbsp;<br>with Rita Fresco</p></td></tr></tbody></table></figure>'
+			}
+		}
+	}
+</script>
+
+<style>
+</style>