添加编辑器功能

src/components/ckeditor.vue

@@ -15,7 +15,7 @@
         default: '100%'
       },
       color: {
-        default: '#f8f8f8'
+        default: '#ffffff'
       },
       uploadUrl: {
         require: true,
@@ -41,23 +41,27 @@
     beforeDestroy() {
     },
     computed: {},
+    watch: {
+      value:function (value) {
+         this.editor.setData()
+      }
+    },
     methods: {
       init () {
         CKEDITOR.replace('editor', {
           height: this.height, 
           width: this.width, 
           uiColor: this.color,
+          lang: 'zh-cn',
           filebrowserImageUploadUrl: this.uploadUrl,
-          // extraPlugins: 'easyimage',
-          cloudServices_tokenUrl: 'https://example.com/cs-token-endpoint',
-          cloudServices_uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
+          filebrowserUploadMethod: 'form'
           });
         this.editor = CKEDITOR.instances.editor;
         this.editor.on( 'change', ( evt ) =>{
             // getData() returns CKEditor's HTML content.
           this.$emit('getValue', evt.editor.getData())
         });
-      }
+      },
     },
     watch:{
       value: function(value) {

src/components/editor.vue

   <template>
     <div>
     <!-- bidirectional data binding（双向数据绑定） -->
-      <Modal v-model='modal' fullscreen>
-         <editor @getValue='getInfo' :uploadUrl='uploadUrl' :value='value'></editor>
+      <Modal v-model='modal' :fullscreen='fullscreen'>
+        <Input v-model='value'></Input>
+         <editor @getValue='getInfo' :uploadUrl='uploadUrl' :value='value' height='400px'></editor>
          <div slot='footer'>
         <Button @click='getInfo'>获取内容</Button>
            
          </div>      
       </Modal>
+      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
+        <FormItem prop="user">
+            <Input type="text" v-model="formInline.user" placeholder="Username">
+                <Icon type="ios-person-outline" slot="prepend"></Icon>
+            </Input>
+        </FormItem>
+        <FormItem prop="password">
+            <Input type="password" v-model="formInline.password" placeholder="Password">
+                <Icon type="ios-lock-outline" slot="prepend"></Icon>
+            </Input>
+        </FormItem>
+        <FormItem>
+            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
+        </FormItem>
+    </Form>
     </div>
   </template>
    
   <script>
     import editor from './ckeditor.vue'
+    import {sapi} from '../config/index.js'
+    import localStorage from '../service/localstorage.service.js'
     export default {
       data () {
         return {
           modal: true,
+          fullscreen: true,
           content: '<h2>I am Example</h2>',
           content1: '<h2>I am Example</h2>',
-          uploadUrl: '',
+          uploadUrl: `${sapi}/api/ckeditor/uploadImage?token=${localStorage.get('token')}&&backUrl=/getimage`,
           value: '22',
           editorOption: {
             // some quill options
+          },
+          formInline: {
+              user: '',
+              password: ''
+          },
+          ruleInline: {
+              user: [
+                  { required: false, message: 'Please fill in the user name', trigger: 'blur', pattern:/^1[3456789]\d{9}$/, validator: function(rule, value, call){
+                    console.log(rule, value) 
+                    return call(new Error()) } }
+              ],
+              password: [
+                  { required: true, message: 'Please fill in the password.', trigger: 'blur' },
+                  { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
+              ]
           }
         }
       },
@@ -36,6 +70,19 @@
         getInfo(value) {
         console.log(value)
         },
+        handleSubmit(name) {
+          // this.$refs[name].validate((valid) => {
+          //   if (valid) {
+          //     this.$Message.success('Success!');
+          //   } else {
+          //     this.$Message.error('Fail!');
+          //   }
+          // })
+          this.$refs[name].validateField('user', (error) => {
+            console.log('------', error)
+          })
+        }
+
       },
       computed: {
       },

src/components/getimage.vue

+<template>
+	<div></div>
+</template>
+<script>
+	
+    function GetQueryString(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
+        var context = "";
+        if (r != null)
+            context = r[2];
+        reg = null;
+        r = null;
+        return context == null || context == "" || context == "undefined" ? "" : decodeURIComponent(context);
+    }
+    export default{
+    	data () {
+    		return {}
+    	},
+    	mounted() {
+    		console.log(777)
+          window.parent.CKEDITOR.tools.callFunction(GetQueryString("CKEditorFuncNum"),GetQueryString("ImageUrl"),GetQueryString("Message"))
+    	}
+    }
+
+</script>
\ No newline at end of file

src/components/home.vue

@@ -203,7 +203,7 @@ import localstorage from '../service/localstorage.service.js'
       getChannelMenu(){
         this.menuList[0].child[1].child = []
         getChannelMassage().then(res=>{
-          if (res.data.status==false) {
+          if (res.data.status == false || !res.data.success) {
             return
           }
           this.channelARR=res.data.body || []

src/page/interview/interview.vue

@@ -444,7 +444,7 @@ export default {
         // 面试官查询
         Serchlistinterview(){
             Serchinterviewor().then(res=>{
-            if (!res.data.status) {
+            if (!res.data.succes) {
                 return
             }
             this.Interviewer=res.data.body
@@ -454,10 +454,10 @@ export default {
         // 邀约人查询
         SerchInvitation(){
             SerchInvitationOwer().then(res=>{
-              if (!res.data.status) {
+              if (!res.data.success) {
                 return
               }
-              this.Inviter=res.data.body
+              this.Inviter= res.data.body
               this.Inviter.unshift('不限')
             })
 

src/router/index.js

@@ -15,7 +15,7 @@ const QRcode = r => require.ensure([], () => r(require('@/page/system/QRcode.vue
 const upload = r => require.ensure([], () => r(require('@/page/upload/upload.vue')), 'upload');
 const sweepCode = r => require.ensure([], () => r(require('@/page/sweepCode/sweepCode.vue')), 'sweepCode');
 const editor = r => require.ensure([], () => r(require('@/components/editor.vue')), 'editor');
-const ckeditor = r => require.ensure([], () => r(require('@/components/ckeditor.vue')), 'ckeditor');
+const getimage = r => require.ensure([], () => r(require('@/components/getimage.vue')), 'getimage');
 
 //z注释
 
@@ -46,9 +46,14 @@ export default new Router({
       component:update
     },
     {
-      path: '/resumeDetail',
-      name: 'resumeDetail',
-      component: resumeDetail
+      path:'/getimage',
+      name:'getimage',
+      component:getimage
+    },
+    {
+      path: '/sweepCode',
+      name: 'sweepCode',
+      component: sweepCode
     },
     {
       path: '/resumeDetail',
@@ -60,11 +65,6 @@ export default new Router({
       name: 'editor',
       component: editor
     },
-    {
-      path: '/ckeditor',
-      name: 'ckeditor',
-      component: ckeditor
-    },
     {
       path: '/home',
       name: 'home',

static/ckeditor/build-config.js

@@ -13,10 +13,10 @@
  * (1) https://ckeditor.com/cke4/builder
  *     Visit online builder to build CKEditor from scratch.
  *
- * (2) https://ckeditor.com/cke4/builder/c3fc0dcaa9c80d707aab3e60fdcddbfb
+ * (2) https://ckeditor.com/cke4/builder/91545e821fab9a03bda9f0229204b493
  *     Visit online builder to build CKEditor, starting with the same setup as before.
  *
- * (3) https://ckeditor.com/cke4/builder/download/c3fc0dcaa9c80d707aab3e60fdcddbfb
+ * (3) https://ckeditor.com/cke4/builder/download/91545e821fab9a03bda9f0229204b493
  *     Straight download link to the latest version of CKEditor (Optimized) with the same setup as before.
  *
  * NOTE:
@@ -54,6 +54,7 @@ var CKBUILDER_CONFIG = {
 	plugins : {
 		'a11yhelp' : 1,
 		'about' : 1,
+		'balloontoolbar' : 1,
 		'basicstyles' : 1,
 		'bidi' : 1,
 		'blockquote' : 1,
@@ -78,6 +79,8 @@ var CKBUILDER_CONFIG = {
 		'htmlwriter' : 1,
 		'iframe' : 1,
 		'image' : 1,
+		'image2' : 1,
+		'imageresize' : 1,
 		'indentblock' : 1,
 		'indentlist' : 1,
 		'justify' : 1,

static/ckeditor/config.js

@@ -22,9 +22,13 @@ CKEDITOR.editorConfig = function( config ) {
 		{ name: 'others', groups: [ 'others' ] },
 		{ name: 'about', groups: [ 'about' ] }
 	];
+
+	config.removeButtons = 'Cut,Copy,Paste,PasteText,PasteFromWord,Source,Save,Templates,NewPage,Preview,Print,About,ShowBlocks,Flash,PageBreak,Iframe,Anchor,SelectAll,BidiLtr,BidiRtl,Language,CreateDiv,Superscript,Subscript,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Find,Replace;Smiley,Smiley,Replace';
     config.removeDialogTabs = 'image:advanced;link:advanced';
     config.removePlugins = 'elementspath,resize'; // 移除编辑器底部状态栏显示的元素路径和调整编辑器大小的按钮
     config.image_previewText = ' '; // 图片信息面板预览区内容的文字内容，默认显示CKEditor自带的内容
     config.removeDialogTabs = 'image:advanced;image:Link'; // 移除图片上传页面的'高级','链接'页签
-    config.removeButtons = 'Cut,Copy,Paste,PasteText,PasteFromWord,Source,Save,Templates,NewPage,Preview,Print,About,ShowBlocks,Flash,PageBreak,Iframe,Anchor,SelectAll,BidiLtr,BidiRtl,Language,CreateDiv,Superscript,Subscript,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Find,Replace';
+    config.resize_enabled = false; //禁止调整编辑器大小
+    config.removePlugins = 'image,elementspath,resize';// 移除编辑器底部状态栏显示的元素路径和调整编辑器大小的按钮,基础图片插件
+
 };

static/ckeditor/plugins/balloonpanel/skins/kama/balloonpanel.css

+/*
+Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+*/
+
+.cke_balloon
+{
+	position: absolute;
+	z-index: 10000;
+
+	background: #fff;
+	border: 1px solid #b2b2b2;
+	border-bottom-color: #999;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+	box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+
+	outline: none;
+}
+
+.cke_balloon_title
+{
+	font-weight: bold;
+	font-size: 14px;
+	cursor: default;
+
+	color: #474747;
+	text-shadow: 0 1px 0 rgba(255,255,255,.75);
+
+	padding: 3px 3px 8px;
+	border-bottom: 1px solid #eee;
+
+	-moz-border-radius: 2px 2px 0 0;
+	-webkit-border-radius: 2px 2px 0 0;
+	border-radius: 2px 2px 0 0;
+
+	-moz-box-shadow: 0 1px 0 #fff inset;
+	-webkit-box-shadow: 0 1px 0 #fff inset;
+	box-shadow: 0 1px 0 #fff inset;
+}
+
+/* The close button at the top of the panel. */
+a.cke_balloon_close_button
+{
+	background-image: url(../../../../skins/kama/images/sprites.png);
+	background-repeat: no-repeat;
+	background-position: 0 -1022px;
+	position: absolute;
+	cursor: pointer;
+	text-align: center;
+	height: 20px;
+	width: 20px;
+	top: 5px;
+}
+
+a.cke_balloon_close_button:hover {
+	background-position: 0 -1045px;
+}
+
+.cke_balloon_content
+{
+	overflow: hidden;
+	min-height: 68px;
+}
+
+.cke_balloon_close_button:hover
+{
+	opacity: 1;
+	filter: alpha(opacity = 100);
+}
+
+.cke_balloon_close_button span
+{
+	display: none;
+}
+
+.cke_ltr .cke_balloon_close_button
+{
+	right: 5px;
+}
+
+.cke_rtl .cke_balloon_close_button
+{
+	left: 6px;
+}
+
+.cke_balloon_triangle
+{
+	position: absolute;
+	border-style: solid;
+	display: block;
+	width: 0;
+	height: 0;
+}
+
+.cke_balloon_triangle_inner
+{
+	z-index: 0;
+}
+
+.cke_balloon_triangle_outer
+{
+	z-index: 0;
+}
+
+/* side: [ bottom, top ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_bottom,
+	.cke_balloon_triangle_outer.cke_balloon_triangle_top
+	{
+		border-color: #6B6B6B transparent;
+	}
+
+	.cke_balloon_triangle_inner.cke_balloon_triangle_bottom,
+	.cke_balloon_triangle_inner.cke_balloon_triangle_top
+	{
+		left: -20px;
+	}
+
+/* side: [ bottom ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_bottom
+	{
+		border-width: 20px 20px 0;
+		bottom: -20px;
+	}
+
+	.cke_balloon_triangle_inner.cke_balloon_triangle_bottom
+	{
+		border-color: #fff transparent;
+		border-width: 20px 20px 0;
+		top: -21px;
+	}
+
+/* side: [ top ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_top
+	{
+		border-width: 0 20px 20px;
+		top: -20px;
+	}
+
+	.cke_balloon_triangle_inner.cke_balloon_triangle_top
+	{
+		border-color: #fff transparent;
+		border-width: 0 20px 20px;
+		top: 1px;
+	}
+
+/* side: [ left, right ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_left,
+	.cke_balloon_triangle_outer.cke_balloon_triangle_right
+	{
+		border-color: transparent #6B6B6B;
+	}
+
+	.cke_balloon_triangle_inner.cke_balloon_triangle_left,
+	.cke_balloon_triangle_inner.cke_balloon_triangle_right
+	{
+		border-color: transparent #fff;
+		top: -20px;
+	}
+
+/* side: [ left ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_left
+	{
+		border-width: 20px 20px 20px 0;
+		left: -20px;
+	}
+
+	.cke_balloon_triangle_inner.cke_balloon_triangle_left
+	{
+		border-color: transparent #fff;
+		border-width: 20px 20px 20px 0;
+		left: 1px;
+	}
+
+/* side: [ right ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_right
+	{
+		border-width: 20px 0 20px 20px;
+		right: -20px;
+	}
+
+	.cke_balloon_triangle_inner.cke_balloon_triangle_right
+	{
+		border-width: 20px 0 20px 20px;
+		right: 1px;
+	}
+
+
+/* align: [ hcenter ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_align_hcenter
+	{
+		left: 50%;
+		margin-left: -20px;
+	}
+
+/* align: [ left ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_align_left
+	{
+		left: 20px;
+		margin-left: 0;
+	}
+
+/* align: [ right ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_align_right
+	{
+		right: 20px;
+		margin-left: 0;
+	}
+
+/* align: [ vcenter ] */
+	.cke_balloon_triangle_outer.cke_balloon_triangle_align_vcenter
+	{
+		top: 50%;
+		margin-top: -20px;
+	}

static/ckeditor/plugins/balloonpanel/skins/moono-lisa/balloonpanel.css

+/*
+Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+*/
+
+.cke_balloon
+{
+	position: absolute;
+	z-index: 10000;
+
+	background: #fff;
+	border: 2px solid #aaa;
+	outline: none;
+}
+
+.cke_balloon_title
+{
+	font-weight: bold;
+	font-size: 12px;
+	cursor: default;
+
+	color: #484848;
+
+	padding: 12px 30px 12px 12px; /* Let's the title and close don't overlap each other - padding-right. */
+	background: #f8f8f8;
+}
+
+/* The close button at the top of the panel. */
+a.cke_balloon_close_button
+{
+	background-image: url(images/close.png);
+	background-repeat: no-repeat;
+	background-position: 50% -1px;
+	position: absolute;
+	cursor: pointer;
+	text-align: center;
+	height: 16px;
+	width: 16px;
+	top: 8px;
+	z-index: 5;
+	opacity: 0.7;
+	filter: alpha(opacity = 70);
+	border: 2px solid transparent;
+	border-radius: 2px;
+}
+
+a.cke_balloon_close_button:focus,
+a.cke_balloon_close_button:active
+{
+	outline: none;
+	border: 2px solid #0079f7;
+}
+
+.cke_balloon_content
+{
+	overflow: hidden;
+	min-height: 68px;
+	padding: 0 6px 6px 6px;
+}
+
+.cke_balloon_close_button:hover
+{
+	opacity: 1;
+	filter: alpha(opacity = 100);
+}
+
+.cke_balloon_close_button:focus:hover
+{
+	opacity: 1;
+	filter: alpha(opacity = 100);
+	border: 2px solid #139FF7;
+}
+
+.cke_hidpi .cke_balloon_close_button
+{
+	background-image: url(images/hidpi/close.png);
+	background-size: 16px;
+}
+
+.cke_balloon_close_button span
+{
+	display: none;
+}
+
+.cke_ltr .cke_balloon_close_button
+{
+	right: 10px;
+}
+
+.cke_rtl .cke_balloon_close_button
+{
+	left: 10px;
+}
+
+.cke_balloon_triangle
+{
+	position: absolute;
+	border-style: solid;
+	display: block;
+	width: 0;
+	height: 0;
+}
+
+.cke_balloon_triangle_inner
+{
+	z-index: 0;
+}
+
+.cke_balloon_triangle_outer
+{
+	z-index: 0;
+}
+
+/* side: [ bottom, top ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_bottom,
+.cke_balloon_triangle_outer.cke_balloon_triangle_top
+{
+	border-color: #999 transparent;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_bottom,
+.cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	left: -20px;
+}
+
+/* side: [ bottom ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_bottom
+{
+	border-width: 20px 20px 0;
+	bottom: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_bottom
+{
+	border-color: #fff transparent;
+	border-width: 20px 20px 0;
+	top: -22px;
+}
+
+/* side: [ top ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_top
+{
+	border-width: 0 20px 20px;
+	top: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	border-color: #f8f8f8 transparent;
+	border-width: 0 20px 20px;
+	top: 2px;
+}
+
+/* side: [ left, right ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_left,
+.cke_balloon_triangle_outer.cke_balloon_triangle_right
+{
+	border-color: transparent #999;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_left,
+.cke_balloon_triangle_inner.cke_balloon_triangle_right
+{
+	border-color: transparent #fff;
+	top: -20px;
+}
+
+/* side: [ left ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_left
+{
+	border-width: 20px 20px 20px 0;
+	left: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_left
+{
+	border-color: transparent #fff;
+	border-width: 20px 20px 20px 0;
+	left: 2px;
+}
+
+/* side: [ right ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_right
+{
+	border-width: 20px 0 20px 20px;
+	right: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_right
+{
+	border-width: 20px 0 20px 20px;
+	right: 2px;
+}
+
+
+/* align: [ hcenter ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_hcenter
+{
+	left: 50%;
+	margin-left: -20px;
+}
+
+/* align: [ left ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_left
+{
+	left: 20px;
+	margin-left: 0;
+}
+
+/* align: [ right ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_right
+{
+	right: 20px;
+	margin-left: 0;
+}
+
+/* align: [ vcenter ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_vcenter
+{
+	top: 50%;
+	margin-top: -20px;
+}

static/ckeditor/plugins/balloontoolbar/skins/default.css

+/*
+Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+*/
+
+.cke_balloon.cke_balloontoolbar
+{
+	position: absolute;
+	z-index: 10000;
+	outline: none;
+	background: #f8f8f8;
+	border: 1px solid #d1d1d1;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle
+{
+	position: absolute;
+	border-style: solid;
+	display: block;
+	width: 0;
+	height: 0;
+}
+
+/* The .cke_balloon_content container height will be stretched to children height, so padding is properly applied. */
+.cke_balloon.cke_balloontoolbar .cke_balloon_content
+{
+	float: left;
+	min-height: 10px;
+	padding: 3px;
+}
+
+/* Removes bottom margins from buttons/combos so only '.cke_balloon_content' padding decides about balloon toolbar padding. */
+.cke_balloon.cke_balloontoolbar .cke_toolgroup,
+.cke_balloon.cke_balloontoolbar .cke_combo_button
+{
+	margin-bottom: 0;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_content > span:last-child > a.cke_combo_button,
+.cke_balloon.cke_balloontoolbar .cke_balloon_content > span:last-child.cke_toolgroup {
+	margin-right: 0;
+	padding-right: 0;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner,
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer
+{
+	z-index: 0;
+}
+
+/* align: [ hcenter ] */
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_align_hcenter
+{
+	left: 50%;
+	margin-left: -7px;
+}
+
+/* side: [ bottom, top ] */
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_bottom,
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_top
+{
+	border-color: #d1d1d1 transparent;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner.cke_balloon_triangle_bottom,
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	border-color: #f8f8f8 transparent;
+	left: -7px;
+}
+
+/* side: [ bottom ] */
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_bottom
+{
+	border-width: 7px 7px 0;
+	bottom: -7px;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner.cke_balloon_triangle_bottom
+{
+	border-width: 7px 7px 0;
+	top: -8px;
+}
+
+/* side: [ top ] */
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_top
+{
+	border-width: 0 7px 7px;
+	top: -7px;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	border-width: 0 7px 7px;
+}

static/ckeditor/plugins/balloontoolbar/skins/kama/balloontoolbar.css

+/*
+Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+*/
+
+.cke_balloon.cke_balloontoolbar
+{
+	border: 1px solid #D3D3D3;
+	background: #fff url(../../../../skins/kama/images/sprites.png) repeat-x 0 -150px;
+	background: linear-gradient(to bottom, #fff, #d3d3d3 20px);
+	padding: 0;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_content
+{
+	padding: 4px;
+}
+
+/* side: [ bottom, top ] */
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_bottom,
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_outer.cke_balloon_triangle_top,
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner.cke_balloon_triangle_bottom
+{
+	border-color: #D3D3D3 transparent;
+}
+
+.cke_balloon.cke_balloontoolbar .cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	border-color: #fff transparent;
+}

static/ckeditor/samples/old/index.html

@@ -46,6 +46,9 @@ For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 
 			<h2 class="samples">Plugins</h2>
 <dl class="samples">
+<dt><a class="samples" href="image2/image2.html">New Image plugin</a><span class="new">New!</span></dt>
+<dd>Using the new Image plugin to insert captioned images and adjust their dimensions.</dd>
+
 <dt><a class="samples" href="magicline/magicline.html">Magicline plugin</a></dt>
 <dd>Using the Magicline plugin to access difficult focus spaces.</dd>