diff --git a/docs/changelog.md b/docs/changelog.md
index 92097f86..c47f636b 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,15 @@
 # 更新记录
 通过访问 https://www.dedebiz.com/git 获取完整更新记录
+# V6.1.10
+- 增加“安全”、“开发”模式，安全模式用于生产使用，移除后台开发相关功能；
+- 后台界面样式调整，优化菜单项；
+- 修正外部链接https链接问题和数据优化；
+- 优化验证码功能；
+- 增加DedeAlert函数，提示更方便、美观；
+- 修正富文本选择图片错误；
+- 修正单页采集的错误；
+- 修正采集图片背景黑色问题；
+- 图集文件名格式调整；
 
 # v6.1.9
 - 文档标题扩容，支持更多内容；
diff --git a/src/admin/album_add.php b/src/admin/album_add.php
index 768760d9..a934cc42 100644
--- a/src/admin/album_add.php
+++ b/src/admin/album_add.php
@@ -31,6 +31,7 @@ if ($dopost != 'save') {
     $channelid = $cInfos['id'];
     //获取文章最大id+1以确定当前权重
     $maxWright = $dsql->GetOne("SELECT id+1 AS cc FROM `#@__archives` ORDER BY id DESC LIMIT 1");
+    $maxWright = empty($maxWright)? array('cc'=>1) : $maxWright;
     include DedeInclude("templets/album_add.htm");
     exit();
 }
diff --git a/src/admin/archives_add.php b/src/admin/archives_add.php
index b9949503..97ee320b 100644
--- a/src/admin/archives_add.php
+++ b/src/admin/archives_add.php
@@ -34,6 +34,7 @@ if ($dopost != 'save') {
     $channelid = $cInfos['id'];
     //获取文章最大id+1以确定当前权重
     $maxWright = $dsql->GetOne("SELECT id+1 AS cc FROM `#@__archives` ORDER BY id DESC LIMIT 1");
+    $maxWright = empty($maxWright)? array('cc'=>1) : $maxWright;
     include DedeInclude('templets/archives_add.htm');
     exit();
 }
diff --git a/src/admin/article_add.php b/src/admin/article_add.php
index 15cda0ae..b524e879 100644
--- a/src/admin/article_add.php
+++ b/src/admin/article_add.php
@@ -43,7 +43,7 @@ if ($dopost != 'save') {
     $cInfos = $dsql->GetOne(" Select * From  `#@__channeltype` where id='$channelid' ");
     //获取文章最大id+1以确定当前权重
     $maxWright = $dsql->GetOne("SELECT id+1 AS cc FROM `#@__archives` ORDER BY id DESC LIMIT 1");
-
+    $maxWright = empty($maxWright)? array('cc'=>1) : $maxWright;
     include DedeInclude("templets/article_add.htm");
     exit();
 }
diff --git a/src/admin/dialog/select_images.php b/src/admin/dialog/select_images.php
index 26d09eb6..a15577d7 100644
--- a/src/admin/dialog/select_images.php
+++ b/src/admin/dialog/select_images.php
@@ -2,7 +2,7 @@
 /**
  * 图片选择
  *
- * @version        $Id: select_images.php 1 9:43 2010年7月8日Z tianya $
+ * @version        $Id: select_images.php 2022-07-01 tianya $
  * @package        DedeBIZ.Dialog
  * @copyright      Copyright (c) 2022, DedeBIZ.COM
  * @license        https://www.dedebiz.com/license
@@ -60,7 +60,7 @@ if (!empty($iseditor)) {
     <link rel="stylesheet" href="../../static/web/font/css/font-awesome.min.css">
     <link rel="stylesheet" href="../../static/web/css/admin.css">
     <style>
-html{background:#f8f8f8}
+html{background:#f6f6f6}
 table{background:#fff}
 a{text-decoration:none!important}
 .bg{margin:10px;border-radius:.2rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
@@ -139,7 +139,7 @@ a{text-decoration:none!important}
     </script>
     <table width="100%" cellpadding="0" cellspacing="1" align="center" class="table table-borderless">
         <tr>
-            <td colspan="4">
+            <td colspan="4" height="26">
                 <form action="select_images_post.php" method="POST" enctype="multipart/form-data" name="myform">
                     <?php $noeditor = !empty($noeditor) ? "<input type='hidden' name='noeditor' value='yes'>" : ''; echo $noeditor; ?>
                     <input type="hidden" name="activepath" value="<?php echo $activepath ?>">
@@ -149,8 +149,8 @@ a{text-decoration:none!important}
                     <input type="hidden" name="CKEditorFuncNum" value="<?php echo isset($CKEditorFuncNum) ? $CKEditorFuncNum : 1; ?>">
                     <input type="hidden" name="job" value="upload">
                     上传：<input type="file" name="imgfile" style="width:50%;border:none">
-                    <label><input type="checkbox" name="needwatermark" value="1" <?php if ($photo_markup == '1') echo "checked"; ?> /> 水印 </label>
-                    <label><input type="checkbox" name="resize" value="1"> 缩小 </label>
+                    <label><input type="checkbox" name="needwatermark" value="1" class="np" <?php if ($photo_markup == '1') echo "checked"; ?> /> 水印 </label>
+                    <label><input type="checkbox" name="resize" value="1" class="np"> 缩小 </label>
                     宽：<input type="text" name="iwidth" value="<?php echo $cfg_ddimg_width ?>" style="width:46px">
                     高：<input type="text" name="iheight" value="<?php echo $cfg_ddimg_height ?>" style="width:46px">
                     <button type="submit" name="sb1" class="btn btn-success btn-sm">上传</button>
@@ -177,10 +177,10 @@ a{text-decoration:none!important}
                 $filesize = $filesize / 1024;
                 if ($filesize != "")
                     if ($filesize < 0.1) {
-                        @list($ty1, $ty2) = split("\.", $filesize);
+                        @list($ty1, $ty2) = explode("\.", $filesize);
                         $filesize = $ty1.".".substr($ty2, 0, 2);
                     } else {
-                        @list($ty1, $ty2) = split("\.", $filesize);
+                        @list($ty1, $ty2) = explode("\.", $filesize);
                         $filesize = $ty1.".".substr($ty2, 0, 1);
                     }
                 $filetime = filemtime("$inpath/$file");
diff --git a/src/admin/soft_add.php b/src/admin/soft_add.php
index ed65bcf9..c38269dc 100644
--- a/src/admin/soft_add.php
+++ b/src/admin/soft_add.php
@@ -32,6 +32,7 @@ if ($dopost != 'save') {
     $channelid = $cInfos['id'];
     //获取文章最大id+1以确定当前权重
     $maxWright = $dsql->GetOne("SELECT id+1 AS cc FROM `#@__archives` ORDER BY id DESC LIMIT 1");
+    $maxWright = empty($maxWright)? array('cc'=>1) : $maxWright;
     include DedeInclude("templets/soft_add.htm");
     exit();
 }
diff --git a/src/admin/templets/archives_edit.htm b/src/admin/templets/archives_edit.htm
index 7684fb73..1189fbe1 100644
--- a/src/admin/templets/archives_edit.htm
+++ b/src/admin/templets/archives_edit.htm
@@ -7,21 +7,17 @@
   <link rel="stylesheet" href="../static/web/css/bootstrap.min.css">
   <link rel="stylesheet" href="../static/web/font/css/font-awesome.min.css">
   <link rel="stylesheet" href="../static/web/css/admin.css">
-  <link rel="stylesheet" href="../static/web/css/daterangepicker.css">
-  <link rel="stylesheet" href="../static/web/css/jquery.fileupload.css">
-  <link rel="stylesheet" href="../static/web/css/cropper.min.css">
   <script>const cfg_uplitpic_cut = '<?php echo $cfg_uplitpic_cut; ?>';</script>
   <script src="../static/web/js/jquery.min.js"></script>
   <script src="../static/web/js/webajax.js"></script>
   <script src="../static/web/js/bootstrap.bundle.min.js"></script>
   <script src="js/main.js"></script>
+  <link rel="stylesheet" href="../static/web/css/daterangepicker.css">
   <script src="../static/web/js/moment.min.js"></script>
   <script src="../static/web/js/daterangepicker.js"></script>
+  <link rel="stylesheet" href="../static/web/css/jquery.fileupload.css">
+  <link rel="stylesheet" href="../static/web/css/cropper.min.css">
   <script src="../static/web/js/cropper.min.js"></script>
-  <style>
-  table{border-collapse:separate}
-  .form-control{display:inline-block;margin-right:10px;width:160px}
-  </style>
   <script>
   function checkSubmit() {
     if (document.form1.title.value == "") {
@@ -31,12 +27,18 @@
     }
   }
   </script>
+  <style>
+body{background:#fff}
+img{vertical-align:baseline}
+table{border-collapse:separate}
+.form-control{display:inline-block;margin-right:10px;width:160px}
+  </style>
 </head>
 <body>
   <table width="98%" align="center" cellpadding="0" cellspacing="0" class="mt-3">
     <tr>
-      <td width="70%"><i class="fa fa-book"></i> <a href="catalog_do.php?cid=<?php echo $arcRow['typeid']?>&channelid=<?php echo $channelid?>&dopost=listArchives">文档列表</a> &gt; 修改商品</td>
-      <td width="30%" align="right"><?php echo $backurl; ?><a href="catalog_main.php" class="btn btn-success btn-sm">栏目管理</a></td>
+      <td width="70%" height="26"><i class="fa fa-book"></i> <a href="catalog_do.php?cid=<?php echo $arcRow['typeid']?>&channelid=<?php echo $channelid?>&dopost=listArchives">文档列表</a> &gt; 修改商品</td>
+      <td width="30%" align='right'><?php echo $backurl; ?><a href="catalog_main.php" class="btn btn-success btn-sm">栏目管理</a></td>
     </tr>
   </table>
   <table width="98%" align="center" cellpadding="0" cellspacing="0" id="head1">
@@ -44,8 +46,8 @@
       <td colspan="2">
         <table cellpadding="0" cellspacing="0">
           <tr>
-            <td width="84" height="28" align="center" bgcolor="#FBFCE2">常规信息</td>
-            <td width="84" align="center" bgcolor="#f8f8f8"><a href="javascript:;" onClick="ShowItem2()">高级参数</a></td>
+            <td width="86" height="26" align="center" background="../static/web/img/itemnote1.gif">常规信息</td>
+            <td width="86" align="center" background="../static/web/img/itemnote2.gif"><a href="javascript:;" onClick="ShowItem2()">高级参数</a></td>
           </tr>
         </table>
       </td>
@@ -54,10 +56,10 @@
   <table width="98%" align="center" cellpadding="0" cellspacing="0" id="head2" style="display:none">
     <tr>
       <td colspan="2">
-        <table  cellpadding="0" cellspacing="0">
+        <table height="26" cellpadding="0" cellspacing="0">
           <tr>
-            <td width="84" align="center" bgcolor="#f8f8f8"><a href="javascript:;" onClick="ShowItem1()">常规信息</a></td>
-            <td width="84" height="28" align="center" bgcolor="#FBFCE2">高级参数</td>
+            <td width="86" align="center" background="../static/web/img/itemnote2.gif"><a href="javascript:;" onClick="ShowItem1()">常规信息</a></td>
+            <td width="86" align="center" background="../static/web/img/itemnote1.gif">高级参数</td>
           </tr>
         </table>
       </td>
@@ -69,22 +71,22 @@
     <input type="hidden" name="dopost" value="save">
     <table width="98%" align="center" cellpadding="2" cellspacing="2" id="needset" style="border:1px solid #dee2e6">
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> <?php echo $cInfos['titlename']; ?>：</td>
-              <td width="400"><input type="text" name="title" id="title" value="<?php echo $arcRow['title']; ?>" style="width:390px"></td>
-              <td width="90"> 简略标题：</td>
-              <td><input type="text" name="shorttitle" id="shorttitle" value="<?php echo $arcRow['shorttitle']; ?>" style="width:160px"></td>
+              <td width="90">&nbsp;<?php echo $cInfos['titlename']; ?>：</td>
+              <td width="400"><input name="title" type="text" id="title" value="<?php echo $arcRow['title']; ?>" style="width:380px"></td>
+              <td width="90">&nbsp;简略标题：</td>
+              <td><input name="shorttitle" type="text" id="shorttitle" value="<?php echo $arcRow['shorttitle']; ?>" style="width:160px"></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td width="100%" class="bline">
+        <td width="400%" height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 自定义属性：</td>
+              <td width="90">&nbsp;自定义属性：</td>
               <td>
                 <?php
                 $dsql->SetQuery("SELECT * FROM `#@__arcatt` ORDER BY sortid ASC");
@@ -94,9 +96,9 @@
                   if($trow->att=='j') $jumpclick = " onclick='ShowUrlTr()'";
                   else $jumpclick = '';
                   if(preg_match("#".$trow->att."#", $arcRow['flag']))
-                  echo "<label class='mr-1'><input type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}' {$jumpclick} checked='checked'> {$trow->attname}[{$trow->att}]</label>";
+                  echo "<label><input class='np' type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}' {$jumpclick} checked='checked'> {$trow->attname}[{$trow->att}]</label> ";
                   else
-                  echo "<label class='mr-1'><input type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}'{$jumpclick} /> {$trow->attname}[{$trow->att}]</label>";
+                  echo "<label><input class='np' type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}'{$jumpclick} /> {$trow->attname}[{$trow->att}]</label> ";
                 }
                 ?>
               </td>
@@ -105,38 +107,39 @@
         </td>
       </tr>
       <tr>
-        <td class="bline" id="redirecturltr" style="display:<?php echo (empty($addRow['redirecturl']) ? 'none' : 'block'); ?>">
+        <td height="26" class="bline" id="redirecturltr"
+          style="display:<?php echo (empty($addRow['redirecturl']) ? 'none' : 'block'); ?>">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 跳转网址：</td>
-              <td><input type="text" name="redirecturl" id="redirecturl" value="<?php echo $addRow['redirecturl']; ?>" style="width:300px"></td>
+              <td width="90">&nbsp;跳转网址：</td>
+              <td><input name="redirecturl" type="text" id="redirecturl" value="<?php echo $addRow['redirecturl']; ?>" style="width:300px"></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td width="100%" class="bline">
+        <td width="400%" height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> Tag标签：</td>
-              <td><input type="text" name="tags" id="tags" value="<?php echo $tags; ?>" style="width:300px">（','号分开，单个标签小于12字节）</td>
+              <td width="90">&nbsp;Tag标签：</td>
+              <td><input name="tags" type="text" id="tags" value="<?php echo $tags; ?>" style="width:300px">（','号分开，单个标签小于12字节）</td>
               <td width="60">权重：</td>
-              <td><input type="text" name="weight" id="weight" value="<?php echo $arcRow['weight']; ?>" style="width:60px">（越小越靠前）</td>
+              <td><input name="weight" type="text" id="weight" value="<?php echo $arcRow['weight']; ?>" style="width:60px">（越小越靠前）</td>
             </tr>
           </table>
         </td>
       </tr>
-      <tr id="pictable" style="<?php if($cInfos['needpic']==0) echo 'display:none'; ?>">
-        <td class="bline">
+      <tr id="pictable" style='<?php if($cInfos['needpic']==0) echo 'display:none'; ?>'>
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90" height="80"> 缩略图：</td>
+              <td width="90" height="80">&nbsp;缩略图：</td>
               <td>
-                <input type="text" name="picname" id="picname" value="<?php echo $arcRow['litpic']?>" style="width:300px">
-                <label><input type="checkbox" name="ddisremote" value="1" id="ddisremote"> 远程</label>
+                <input name="picname" type="text" id="picname" value="<?php echo $arcRow['litpic']?>" style="width:300px">
+                <label><input type="checkbox" name="ddisremote" value="1" id="ddisremote" class="np">&nbsp;远程</label>
                 <span class="btn btn-success btn-sm fileinput-button">上传图片<input type="file" name="files[]" id="iptAddImages"></span>
                 <button type="button" name="Submit" onClick="SelectImage('form1.picname','');" class="btn btn-success btn-sm">选择图片</button>
-                <button  type="button"id="btnClearAll" class="btn btn-success btn-sm delete">清空</button>
+                <button id="btnClearAll" type="button" class="btn btn-success btn-sm delete">清空</button>
               </td>
               <td align="center">
                 <img id="litPic" src="<?php if($arcRow['litpic']!='') echo $arcRow['litpic']; else echo '../static/web/img/defaultpic.jpg'; ?>" style="max-width:100px;max-height:80px">
@@ -146,18 +149,18 @@
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 来源：</td>
+              <td width="90">&nbsp;来源：</td>
               <td width="260">
-                <input type="text" name="source" id="source" value="<?php echo $arcRow['source']?>" style="width:160px">
-                <button type="button" name="selsource" id="selsource" class="btn btn-success btn-sm">选择</button>
+                <input name="source" type="text" id="source" value="<?php echo $arcRow['source']?>" style="width:160px">
+                <button name="selsource" type="button" id="selsource" class="btn btn-success btn-sm">选择</button>
               </td>
               <td width="60">作者：</td>
               <td>
-                <input type="text" name="writer" id="writer" value="<?php echo $arcRow['writer']?>" style="width:160px">
-                <button type="button" class="btn btn-success btn-sm" name="selwriter" id="selwriter">选择</button>
+                <input name="writer" type="text" id="writer" value="<?php echo $arcRow['writer']?>" style="width:160px">
+                <button class="btn btn-success btn-sm" name="selwriter" type="button" id="selwriter">选择</button>
               </td>
             </tr>
           </table>
@@ -171,10 +174,10 @@
       } else {
       ?>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 发布栏目：</td>
+              <td width="90">&nbsp;发布栏目：</td>
               <td width="360">
                 <?php
                 $typeOptions = GetOptionList($arcRow['typeid'],$cuserLogin->getUserChannel(),$channelid);
@@ -183,10 +186,10 @@
                 echo $typeOptions;
                 echo "</select>";
 			          ?>
-                <i class="btn btn-sm fa fa-search" onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid')" title="快捷选择" style="cursor:pointer"></i>
+                <i class='btn btn-sm fa fa-search'  onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid')" title='快捷选择' style='cursor:pointer'></i>
               </td>
               <td width="90">消费金币：</td>
-              <td><input type="text" name="money" id="money" value="<?php echo $arcRow['money']?>" style="width:160px"></td>
+              <td><input name="money" type="text" id="money" value="<?php echo $arcRow['money']?>" style="width:160px"></td>
             </tr>
           </table>
         </td>
@@ -195,34 +198,34 @@
       if($cfg_need_typeid2=='Y') {
       ?>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 副栏目：</td>
+              <td width="90">&nbsp;副栏目：</td>
               <td>
-                <span id="typeid2ct"></span>
-                <input type="text" name="typeid2" id="typeid2" value="<?php echo ($arcRow['typeid2']=='0' ? '' : $arcRow['typeid2']); ?>" style="width:260px">
-                <i class="btn btn-sm fa fa-search" onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid2','<?php echo $arcRow['typeid2']; ?>')" title="选择副栏目" style="cursor:pointer"></i>
+                <span id='typeid2ct'></span>
+                <input type='text' name='typeid2' id='typeid2' value='<?php echo ($arcRow['typeid2']=='0' ? '' : $arcRow['typeid2']); ?>' style='width:260px;'>
+                <i class='btn btn-sm fa fa-search'  onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid2','<?php echo $arcRow['typeid2']; ?>')" title='选择副栏目' style='cursor:pointer'></i>
               </td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 关键词：</td>
+              <td width="90">&nbsp;关键词：</td>
               <td><input type="text" name="keywords" id="keywords" value="<?php echo $arcRow['keywords']?>" style="width:360px"></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 描述：</td>
+              <td width="90">&nbsp;描述：</td>
               <td><textarea name="description" id="description" style="width:360px;height:50px"><?php echo $arcRow['description']?></textarea></td>
             </tr>
           </table>
@@ -233,47 +236,55 @@
       }
       ?>
       <tr>
-        <td width="900">
+        <td>
+        <?php
+        PrintAutoFieldsEdit(stripslashes($cInfos['fieldset']),$addRow);
+        ?>
+        </td>
+      </tr>
+      <tr>
+        <td width="400%" height="26">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 附加选项：</td>
+              <td width="90">&nbsp;附加选项：</td>
               <td>
-                <label><input type="checkbox" name="remote" id="remote" value="1" <?php if($cfg_rm_remote=='Y') echo 'checked="1"'; ?>> 下载远程图片和资源</label>
-                <label><input type="checkbox" name="autolitpic" id="autolitpic" value="1" <?php if($cfg_arc_autopic=='Y') echo 'checked="1"'; ?>> 提取第一个图片为缩略图</label>
+                <label><input name="remote" type="checkbox" class="np" id="remote" value="1" <?php if($cfg_rm_remote=='Y') echo ' checked="1" '; ?>>
+                下载远程图片和资源</label>
+                <label><input name="autolitpic" type="checkbox" class="np" id="autolitpic" value="1" <?php if($cfg_arc_autopic=='Y') echo ' checked="1" '; ?>>
+                提取第一个图片为缩略图</label>
               </td>
             </tr>
           </table>
         </td>
       </tr>
-      <tr>
-        <td><?php PrintAutoFieldsEdit(stripslashes($cInfos['fieldset']),$addRow); ?></td>
-      </tr>
     </table>
     <!--高级参数-->
     <table width="98%" align="center" cellpadding="2" cellspacing="2" id="adset" style="border:1px solid #dee2e6;display:none">
       <tr>
-        <td colspan="4" class="bline">
+        <td height="26" colspan="4" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"  width="260"> 评论选项：</td>
+              <td width="90" height="26" width="260">&nbsp;评论选项：</td>
               <td width="260">
-                <label><input type="radio" name="notpost" value="0" <?php if($arcRow['notpost']==0) echo "checked='1'"; ?>> 允许评论</label>
-                <label><input type="radio" name="notpost" value="1" <?php if($arcRow['notpost']==1) echo "checked='1'"; ?>> 禁止评论</label>
+                <label><input type='radio' name='notpost' class='np' value='0' <?php if($arcRow['notpost']==0) echo " checked='1' "; ?> /> 允许评论</label>
+                &nbsp;
+                <label><input type='radio' name='notpost' class='np' value='1' <?php if($arcRow['notpost']==1) echo " checked='1' "; ?> /> 禁止评论</label>
               </td>
               <td width="90">发布选项：</td>
-              <td>
-                <label><input type="radio" name="ishtml" value="1" <?php if($arcRow["ismake"]!=-1) echo "checked"; ?>> 生成网页</label>
-                <label><input type="radio" name="ishtml" value="0" <?php if($arcRow["ismake"]==-1) echo "checked"; ?>> 仅动态浏览</label>
+              <td><label><input name="ishtml" type="radio" class="np" value="1" <?php if($arcRow["ismake"]!=-1) echo " checked"; ?>>
+                生成HTML</label>
+                <label><input type="radio" name="ishtml" class="np" value="0" <?php if($arcRow["ismake"]==-1) echo " checked"; ?>>
+                仅动态浏览</label>
               </td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 文档排序：</td>
+              <td width="90">&nbsp;文档排序：</td>
               <td width="260"><select name="sortup" id="sortup" style="width:160px">
                 <?php
                 $subday = SubDay($arcRow["sortrank"],$arcRow["pubdate"]);
@@ -289,18 +300,18 @@
               </td>
               <td width="90">标题颜色：</td>
               <td>
-                <input type="text" name="color" id="color" value="<?php echo $arcRow['color']?>" style="width:160px">
-                <button type="button" name="modcolor" id="modcolor" class="btn btn-success btn-sm" onClick="ShowColor(event,this)">选取</button>
+                <input name="color" type="text" id="color" value="<?php echo $arcRow['color']?>" style="width:160px">
+                <button name="modcolor" type="button" id="modcolor" class="btn btn-success btn-sm" onClick="ShowColor(event,this)">选取</button>
               </td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 阅读权限：</td>
+              <td width="90">&nbsp;阅读权限：</td>
               <td width="260"><select name="arcrank" id="arcrank" style="width:160px">
                 <option value='<?php echo $arcRow["arcrank"]?>'><?php echo $arcRow["rankname"]?></option>
                 <?php
@@ -320,10 +331,10 @@
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="70" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 更新时间：</td>
+              <td width="90">&nbsp;更新时间：</td>
               <td width="260"><?php
 			        $nowtime = GetDateTimeMk(time());
 			        echo "<input name='pubdate' value='$nowtime' type='text' id='pubdate' class='datepicker' style='width:160px'>";
@@ -338,7 +349,7 @@
     </table>
     <table width="98%" cellspacing="0" cellpadding="0" align="center" bgcolor="#f8f8f8" style="border:1px solid #dee2e6;border-top:0" class="mb-3">
       <tr>
-        <td align="center" class="py-2">
+        <td align="center" class="py-3">
           <button type="submit" class="btn btn-success btn-sm">保存</button>
           <button type="button" onClick="location.reload();" class="btn btn-success btn-sm">重置</button>
         </td>
diff --git a/src/admin/templets/article_edit.htm b/src/admin/templets/article_edit.htm
index bfde4529..556e386b 100644
--- a/src/admin/templets/article_edit.htm
+++ b/src/admin/templets/article_edit.htm
@@ -19,12 +19,6 @@
   <script src="js/handlers.js"></script>
   <script src="../static/web/js/bootstrap.bundle.min.js"></script>
   <script src="../static/web/js/cropper.min.js"></script>
-  <style>
-  table{border-collapse:separate}
-  .albCt img{cursor:pointer}
-  .multipic{border:1px dashed #FC6}
-  .albCt{border-bottom:1px dashed #FC0;margin-bottom:10px;padding-bottom:10px}
-  </style>
   <script>
   var swfu = null;
   var arctype = 'article';
@@ -36,11 +30,19 @@
     }
   }
   </script>
+  <style>
+body{background:#fff}
+img{vertical-align:baseline}
+table{border-collapse:separate}
+.albCt img{cursor:pointer}
+.multipic{border:1px dashed #FC6}
+.albCt{border-bottom:1px dashed #FC0;margin-bottom:10px;padding-bottom:10px}
+  </style>
 </head>
 <body>
   <table width="98%" align="center" cellpadding="0" cellspacing="0" class="mt-3">
     <tr>
-      <td width="60%"><i class="fa fa-book"></i> <a href="catalog_do.php?cid=<?php echo $arcRow['typeid']?>&channelid=<?php echo $channelid?>&dopost=listArchives">文章列表</a> &gt; 修改文章</td>
+      <td width="60%" height="26"><i class="fa fa-book"></i> <a href="catalog_do.php?cid=<?php echo $arcRow['typeid']?>&channelid=<?php echo $channelid?>&dopost=listArchives">文章列表</a> &gt; 修改文章</td>
       <td width="30%" align="right"><?php echo $backurl; ?><a class="btn btn-success btn-sm" href="catalog_main.php">栏目管理</a></td>
     </tr>
   </table>
@@ -49,8 +51,8 @@
       <td colspan="2">
         <table cellpadding="0" cellspacing="0">
           <tr>
-            <td width="84" height="28" align="center" bgcolor="#FBFCE2">常规信息</td>
-            <td width="84" align="center" bgcolor="#f8f8f8"><a href="javascript:;" onClick="ShowItem2()">高级参数</a></td>
+            <td width="86" height="26" align="center" background="../static/web/img/itemnote1.gif">常规信息</td>
+            <td width="86" align="center" background="../static/web/img/itemnote2.gif"><a href="javascript:;" onClick="ShowItem2()">高级参数</a></td>
           </tr>
         </table>
       </td>
@@ -59,10 +61,10 @@
   <table width="98%" align="center" cellpadding="0" cellspacing="0" id="head2" style="display:none">
     <tr>
       <td colspan="2">
-        <table  cellpadding="0" cellspacing="0">
+        <table height="26" cellpadding="0" cellspacing="0">
           <tr>
-            <td width="84" align="center" bgcolor="#f8f8f8"><a href="javascript:;" onClick="ShowItem1()">常规信息</a></td>
-            <td width="84" height="28" align="center" bgcolor="#FBFCE2">高级参数</td>
+            <td width="86" align="center" background="../static/web/img/itemnote2.gif"><a href="javascript:;" onClick="ShowItem1()">常规信息</a></td>
+            <td width="86" align="center" background="../static/web/img/itemnote1.gif">高级参数</td>
           </tr>
         </table>
       </td>
@@ -74,22 +76,22 @@
     <input type="hidden" name="id" value="<?php echo $aid?>">
     <table width="98%" align="center" cellpadding="2" cellspacing="2" id="needset" style="border:1px solid #dee2e6">
       <tr>
-        <td colspan="2" class="bline">
+        <td height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 文章标题：</td>
-              <td width="400"><input type="text" name="title" id="title" value="<?php echo $arcRow['title']; ?>" style="width:390px"></td>
+              <td width="90">&nbsp;文章标题：</td>
+              <td width="400"><input name="title" type="text" id="title" value="<?php echo $arcRow['title']; ?>" style="width:380px"></td>
               <td width="90">简略标题：</td>
-              <td><input type="text" name="shorttitle" id="shorttitle" value="<?php echo $arcRow['shorttitle']; ?>" style="width:160px"></td>
+              <td><input name="shorttitle" type="text" id="shorttitle" value="<?php echo $arcRow['shorttitle']; ?>" style="width:160px"></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td width="100%" colspan="2" class="bline">
+        <td width="400%" height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 自定义属性：</td>
+              <td width="90">&nbsp;自定义属性：</td>
               <td>
                 <?php
                 $dsql->SetQuery("SELECT * FROM `#@__arcatt` ORDER BY sortid ASC");
@@ -104,9 +106,9 @@
                   }
                   if(preg_match("#".$trow->att."#", $arcRow['flag']))
                   {
-                    echo "<label class='mr-1'><input type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}' {$jumpclick} checked='checked'> {$trow->attname}[{$trow->att}]</label>";
+                    echo "<label><input class='np' type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}' {$jumpclick} checked='checked'>&nbsp;{$trow->attname}[{$trow->att}]</label>&nbsp;";
                   } else {
-                    echo "<label class='mr-1'><input type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}' {$jumpclick}> {$trow->attname}[{$trow->att}]</label>";
+                    echo "<label><input class='np' type='checkbox' name='flags[]' id='flags{$trow->att}' value='{$trow->att}' {$jumpclick}>&nbsp;{$trow->attname}[{$trow->att}]</label>&nbsp;";
                   }
                 }
                 ?>
@@ -116,38 +118,38 @@
         </td>
       </tr>
       <tr>
-        <td colspan="2" class="bline" id="redirecturltr" style="display:<?php echo (empty($addRow['redirecturl']) ? 'none' : 'block'); ?>">
+        <td height="26" colspan="2" class="bline" id="redirecturltr" style="display:<?php echo (empty($addRow['redirecturl']) ? 'none' : 'block'); ?>">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 跳转网址：</td>
-              <td><input type="text" name="redirecturl" id="redirecturl" value="<?php echo $addRow['redirecturl']?>" style="width:300px"></td>
+              <td width="90">&nbsp;跳转网址：</td>
+              <td><input name="redirecturl" type="text" id="redirecturl" value="<?php echo $addRow['redirecturl']?>" style="width:300px"></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td width="100%" colspan="2" class="bline">
+        <td width="400%" height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> Tag标签：</td>
-              <td><input type="text" name="tags" id="tags" value="<?php echo $tags; ?>" style="width:300px">（','号分开，单个标签小于12字节）</td>
+              <td width="90">&nbsp;Tag标签：</td>
+              <td><input name="tags" type="text" id="tags" value="<?php echo $tags; ?>" style="width:300px">（','号分开，单个标签小于12字节）</td>
               <td width="60">权重：</td>
-              <td><input type="text" name="weight" id="weight" value="<?php echo $arcRow['weight']; ?>" style="width:60px">（越小越靠前）</td>
+              <td><input name="weight" type="text" id="weight" value="<?php echo $arcRow['weight']; ?>" style="width:60px">（越小越靠前）</td>
             </tr>
           </table>
         </td>
       </tr>
       <tr id="pictable">
-        <td colspan="2" class="bline">
+        <td height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 缩略图：</td>
+              <td width="90">&nbsp;缩略图：</td>
               <td>
-                <input type="text" name="picname" id="picname" value="<?php echo $arcRow['litpic']?>" style="width:300px">
-                <label><input type="checkbox" name="ddisremote" value="1" id="ddisremote"> 远程</label>
+                <input name="picname" type="text" id="picname" value="<?php echo $arcRow['litpic']?>" style="width:300px">
+                <label><input type="checkbox" name="ddisremote" value="1" id="ddisremote" class="np">&nbsp;远程</label>
                 <span class="btn btn-success btn-sm fileinput-button">上传图片<input type="file" name="files[]" id="iptAddImages"></span>
                 <button type="button" name="Submit" onClick="SelectImage('form1.picname','');" class="btn btn-success btn-sm">选择图片</button>
-                <button type="button" id="btnClearAll" class="btn btn-success btn-sm delete">清空</button>
+                <button id="btnClearAll" type="button" class="btn btn-success btn-sm delete">清空</button>
               </td>
               <td align="center">
                 <img id="litPic" src="<?php if($arcRow['litpic']!='') echo $arcRow['litpic']; else echo '../static/web/img/defaultpic.jpg'; ?>" style="max-width:100px;max-height:80px">
@@ -157,28 +159,28 @@
         </td>
       </tr>
       <tr>
-        <td colspan="2" class="bline">
+        <td height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 来源：</td>
+              <td width="90">&nbsp;来源：</td>
               <td width="260">
-                <input type="text" name="source" id="source" value="<?php echo $arcRow['source']?>" style="width:160px">
-                <button type="button" name="selsource" id="selsource" class="btn btn-success btn-sm">选择</button>
+                <input name="source" type="text" id="source" value="<?php echo $arcRow['source']?>" style="width:160px">
+                <button name="selsource" type="button" id="selsource" class="btn btn-success btn-sm">选择</button>
               </td>
               <td width="60">作者：</td>
               <td>
-                <input type="text" name="writer" id="writer" value="<?php echo $arcRow['writer']?>" style="width:160px">
-                <button type="button" name="selwriter" id="selwriter" class="btn btn-success btn-sm">选择</button>
+                <input name="writer" type="text" id="writer" value="<?php echo $arcRow['writer']?>" style="width:160px">
+                <button name="selwriter" type="button" id="selwriter" class="btn btn-success btn-sm">选择</button>
               </td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td colspan="2" class="bline">
+        <td height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 发布栏目：</td>
+              <td width="90">&nbsp;发布栏目：</td>
               <td width="360">
                 <?php
                 $typeOptions = GetOptionList($arcRow['typeid'],$cuserLogin->getUserChannel(),$channelid);
@@ -187,10 +189,10 @@
                 echo $typeOptions;
                 echo "</select>";
                 ?>
-                <i class="btn btn-sm fa fa-search" onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid','<?php echo $arcRow['typeid']; ?>')" title="快捷选择" style="cursor:pointer"></i>
+                <i class='btn btn-sm fa fa-search' onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid','<?php echo $arcRow['typeid']; ?>')" title="快捷选择" style="cursor:pointer"></i>
               </td>
               <td width="90">消费金币：</td>
-              <td><input type="text" name="money" id="money" value="<?php echo $arcRow['money']?>" style="width:160px"></td>
+              <td><input name="money" type="text" id="money" value="<?php echo $arcRow['money']?>" style="width:160px"></td>
             </tr>
           </table>
         </td>
@@ -199,14 +201,14 @@
       if($cfg_need_typeid2=='Y') {
       ?>
       <tr>
-        <td colspan="2" class="bline">
+        <td height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 副栏目：</td>
+              <td width="90">&nbsp;副栏目：</td>
               <td>
                 <span id="typeid2ct"></span>
                 <input type="text" name="typeid2" id="typeid2" value="<?php echo ($arcRow['typeid2']=='0'?'':$arcRow['typeid2']); ?>" style="width:160px">
-                <i class="btn btn-sm fa fa-search" style="cursor:pointer" onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid2','<?php echo $arcRow['typeid2']; ?>')" title="选择副栏目"></i>
+                <i class='btn btn-sm fa fa-search' style="cursor:pointer" onClick="ShowCatMap(event,this,<?php echo $channelid; ?>,'typeid2','<?php echo $arcRow['typeid2']; ?>')" title="选择副栏目"></i>
               </td>
             </tr>
           </table>
@@ -216,71 +218,75 @@
       }
       ?>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 关键词：</td>
+              <td width="90">&nbsp;关键词：</td>
               <td><input type="text" name="keywords" id="keywords" value="<?php echo $arcRow['keywords']?>" style="width:360px"></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 描述：</td>
+              <td width="90">&nbsp;描述：</td>
               <td><textarea name="description" id="description" style="width:360px;height:50px"><?php echo $arcRow['description']?></textarea></td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td width="100%" colspan="2" class="bline">
+        <td colspan="2">
+          <?php
+          PrintAutoFieldsEdit(stripslashes($cInfos['fieldset']),$addRow,'autofield');
+          ?>
+        </td>
+      </tr>
+      <tr>
+        <td width="400%" height="26" colspan="2" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 附加选项：</td>
+              <td width="90">&nbsp;附加选项：</td>
               <td>
-                <label><input type="checkbox" name="remote" id="remote" value="1" <?php if($cfg_rm_remote=='Y') echo 'checked="1"'; ?>> 下载远程图片和资源</label>
-                <label><input type="checkbox" name="autolitpic" id="autolitpic" value="1" <?php if($cfg_arc_autopic=='Y') echo 'checked="1"'; ?>> 提取第一个图片为缩略图</label>
+                <label><input name="remote" type="checkbox" class="np" id="remote" value="1" <?php if($cfg_rm_remote=='Y') echo ' checked="1" '; ?>>&nbsp;下载远程图片和资源&nbsp;</label>
+                <label><input name="autolitpic" type="checkbox" class="np" id="autolitpic" value="1" <?php if($cfg_arc_autopic=='Y') echo ' checked="1" '; ?>>&nbsp;提取第一个图片为缩略图</label>
               </td>
             </tr>
           </table>
         </td>
       </tr>
-      <tr>
-        <td colspan="2"><?php PrintAutoFieldsEdit(stripslashes($cInfos['fieldset']),$addRow,'autofield'); ?></td>
-      </tr>
       <tr>
         <td width="100%"><?php GetEditor("body",stripcslashes($addRow['body']),450); ?></td>
-        <td width="260" align="center" id="mPic" style="display:none"></td>
+        <td width="260" align="center" bgcolor="#FFFFCC" id="mPic" style="display:none"></td>
       </tr>
     </table>
     <!--高级参数-->
     <table width="98%" align="center" cellpadding="2" cellspacing="2" id="adset" style="border:1px solid #dee2e6;display:none">
       <tr>
-        <td colspan="4" class="bline">
+        <td height="26" colspan="4" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 评论选项：</td>
+              <td width="90" height="26">&nbsp;评论选项：</td>
               <td width="260">
-                <label><input type="radio" name="notpost" value="0" <?php if($arcRow['notpost']==0) echo "checked='1'"; ?>> 允许评论</label>
-                <label><input type="radio" name="notpost" value="1" <?php if($arcRow['notpost']==1) echo "checked='1'"; ?>> 禁止评论</label>
+                <label><input type="radio" name="notpost" class="np" value="0" <?php if($arcRow['notpost']==0) echo " checked='1' "; ?>>&nbsp;允许评论&nbsp;</label>
+                <label><input type="radio" name="notpost" class="np" value="1" <?php if($arcRow['notpost']==1) echo " checked='1' "; ?>>&nbsp;禁止评论</label>
               </td>
               <td width="90">发布选项：</td>
               <td>
-                <label><input type="radio" name="ishtml" value="1" <?php if($arcRow["ismake"]!=-1) echo "checked"; ?>> 生成网页</label>
-                <label><input type="radio" name="ishtml" value="0" <?php if($arcRow["ismake"]==-1) echo "checked"; ?>> 仅动态浏览</label>
+                <label><input name="ishtml" type="radio" class="np" value="1" <?php if($arcRow["ismake"]!=-1) echo " checked"; ?>>&nbsp;生成HTML&nbsp;</label>
+                <label><input type="radio" name="ishtml" class="np" value="0" <?php if($arcRow["ismake"]==-1) echo " checked"; ?>>&nbsp;仅动态浏览</label>
               </td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 文章排序：</td>
+              <td width="90">&nbsp;文章排序：</td>
               <td width="260">
                 <select name="sortup" id="sortup" style="width:160px">
                   <?php
@@ -297,21 +303,21 @@
               </td>
               <td width="90">标题颜色：</td>
               <td>
-                <input type="text" name="color" id="color" value="<?php echo $arcRow['color']?>" style="width:160px">
-                <button type="button" name="modcolor" id="modcolor" onClick="ShowColor(event,this)" class="btn btn-success btn-sm">选取</button>
+                <input name="color" type="text" id="color" value="<?php echo $arcRow['color']?>" style="width:160px">
+                <button name="modcolor" type="button" id="modcolor" onClick="ShowColor(event,this)" class="btn btn-success btn-sm">选取</button>
               </td>
             </tr>
           </table>
         </td>
       </tr>
       <tr>
-        <td class="bline">
+        <td height="26" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 阅读权限：</td>
+              <td width="90">&nbsp;阅读权限：</td>
               <td width="260">
                 <select name="arcrank" id="arcrank" style="width:160px">
-                  <option value="<?php echo $arcRow['arcrank']?>"><?php echo $arcRow["rankname"]?></option>
+                  <option value='<?php echo $arcRow["arcrank"]?>'> <?php echo $arcRow["rankname"]?> </option>
                   <?php
                   $urank = $cuserLogin->getUserRank();
                   $dsql->SetQuery("Select * from `#@__arcrank` where adminrank<='$urank'");
@@ -353,7 +359,7 @@
         <td height="70" class="bline">
           <table width="900" cellspacing="0" cellpadding="0">
             <tr>
-              <td width="90"> 更新时间：</td>
+              <td width="90">&nbsp;更新时间：</td>
               <td width="260"><?php
               $nowtime = GetDateTimeMk(time());
               echo "<input type='text' name='pubdate' value='$nowtime' id='pubdate' class='datepicker' style='width:160px'>";
@@ -368,7 +374,7 @@
     </table>
     <table width="98%" cellspacing="0" cellpadding="0" align="center" bgcolor="#f8f8f8" style="border:1px solid #dee2e6;border-top:0" class="mb-3">
       <tr>
-        <td align="center" class="py-2">
+        <td align="center" class="py-3">
           <button type="submit" class="btn btn-success btn-sm">保存</button>
           <button type="button" onClick="location.reload();" class="btn btn-success btn-sm">重置</button>
         </td>
diff --git a/src/admin/templets/index.htm b/src/admin/templets/index.htm
index 87e73497..5b6d5ad1 100644
--- a/src/admin/templets/index.htm
+++ b/src/admin/templets/index.htm
@@ -30,7 +30,7 @@
 					<?php if(DEDEBIZ_SAFE_MODE){ ?>
 					<a href="index_body.php?dopost=safe_mode" target="main" class="btn btn-primary btn-sm">安全</a>
 					<?php } else { ?>
-					<a href="index_body.php?dopost=safe_mode" target="main" class="btn btn-warning btn-sm">非安全</a>
+					<a href="index_body.php?dopost=safe_mode" target="main" class="btn btn-warning btn-sm">开发</a>
 					<?php }?>
 				</div>
 				<div class="top-item">
diff --git a/src/static/ckeditor/plugins/image/dialogs/image.js b/src/static/ckeditor/plugins/image/dialogs/image.js
old mode 100755
new mode 100644
index da5710c8..151c2844
--- a/src/static/ckeditor/plugins/image/dialogs/image.js
+++ b/src/static/ckeditor/plugins/image/dialogs/image.js
@@ -1,1294 +1,1294 @@
-/**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-( function() {
-	var imageDialog = function( editor, dialogType ) {
-			// Load image preview.
-			var IMAGE = 1,
-				LINK = 2,
-				PREVIEW = 4,
-				CLEANUP = 8,
-				regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
-				regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
-				pxLengthRegex = /^\d+px$/;
-
-			var onSizeChange = function() {
-					var value = this.getValue(),
-						// This = input element.
-						dialog = this.getDialog(),
-						aMatch = value.match( regexGetSize ); // Check value
-					if ( aMatch ) {
-						if ( aMatch[ 2 ] == '%' ) // % is allowed - > unlock ratio.
-						switchLockRatio( dialog, false ); // Unlock.
-						value = aMatch[ 1 ];
-					}
-
-					// Only if ratio is locked
-					if ( dialog.lockRatio ) {
-						var oImageOriginal = dialog.originalElement;
-						if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
-							if ( this.id == 'txtHeight' ) {
-								if ( value && value != '0' )
-									value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
-								if ( !isNaN( value ) )
-									dialog.setValueOf( 'info', 'txtWidth', value );
-							}
-							// this.id = txtWidth.
-							else {
-								if ( value && value != '0' )
-									value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
-								if ( !isNaN( value ) )
-									dialog.setValueOf( 'info', 'txtHeight', value );
-							}
-						}
-					}
-					updatePreview( dialog );
-				};
-
-			var updatePreview = function( dialog ) {
-					//Don't load before onShow.
-					if ( !dialog.originalElement || !dialog.preview )
-						return 1;
-
-					// Read attributes and update imagePreview;
-					dialog.commitContent( PREVIEW, dialog.preview );
-					return 0;
-				};
-
-			// Custom commit dialog logic, where we're intended to give inline style
-			// field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
-			// by other fields.
-			function commitContent() {
-				var args = arguments;
-				var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
-				inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
-
-				this.foreach( function( widget ) {
-					if ( widget.commit && widget.id != 'txtdlgGenStyle' )
-						widget.commit.apply( widget, args );
-				} );
-			}
-
-			// Avoid recursions.
-			var incommit;
-
-			// Synchronous field values to other impacted fields is required, e.g. border
-			// size change should alter inline-style text as well.
-			function commitInternally( targetFields ) {
-				if ( incommit )
-					return;
-
-				incommit = 1;
-
-				var dialog = this.getDialog(),
-					element = dialog.imageElement;
-				if ( element ) {
-					// Commit this field and broadcast to target fields.
-					this.commit( IMAGE, element );
-
-					targetFields = [].concat( targetFields );
-					var length = targetFields.length,
-						field;
-					for ( var i = 0; i < length; i++ ) {
-						field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
-						// May cause recursion.
-						field && field.setup( IMAGE, element );
-					}
-				}
-
-				incommit = 0;
-			}
-
-			var switchLockRatio = function( dialog, value ) {
-					if ( !dialog.getContentElement( 'info', 'ratioLock' ) )
-						return null;
-
-					var oImageOriginal = dialog.originalElement;
-
-					// Dialog may already closed. (https://dev.ckeditor.com/ticket/5505)
-					if ( !oImageOriginal )
-						return null;
-
-					// Check image ratio and original image ratio, but respecting user's preference.
-					if ( value == 'check' ) {
-						if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
-							var width = dialog.getValueOf( 'info', 'txtWidth' ),
-								height = dialog.getValueOf( 'info', 'txtHeight' ),
-								originalRatio = oImageOriginal.$.width / oImageOriginal.$.height,
-								thisRatio = width / height;
-
-							dialog.lockRatio = false; // Default: unlock ratio
-
-							if ( !width && !height ) {
-								dialog.lockRatio = true;
-							} else {
-								// Round ratio to two decimal places so ratio locking will be less precise (#2254).
-								var ratioComparison = Math.round( ( originalRatio / thisRatio ) * 100 ) / 100;
-
-								if ( ratioComparison == 1 ) {
-									dialog.lockRatio = true;
-								}
-							}
-						}
-					} else if ( value !== undefined ) {
-						dialog.lockRatio = value;
-					} else {
-						dialog.userlockRatio = 1;
-						dialog.lockRatio = !dialog.lockRatio;
-					}
-
-					var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
-					if ( dialog.lockRatio )
-						ratioButton.removeClass( 'cke_btn_unlocked' );
-					else
-						ratioButton.addClass( 'cke_btn_unlocked' );
-
-					ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );
-
-					// Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
-					if ( CKEDITOR.env.hc ) {
-						var icon = ratioButton.getChild( 0 );
-						icon.setHtml( dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
-					}
-
-					return dialog.lockRatio;
-				};
-
-			var resetSize = function( dialog, emptyValues ) {
-					var oImageOriginal = dialog.originalElement,
-						ready = oImageOriginal.getCustomData( 'isReady' ) == 'true';
-
-					if ( ready ) {
-						var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
-							heightField = dialog.getContentElement( 'info', 'txtHeight' ),
-							widthValue, heightValue;
-
-						if ( emptyValues ) {
-							widthValue = 0;
-							heightValue = 0;
-						} else {
-							widthValue = oImageOriginal.$.width;
-							heightValue = oImageOriginal.$.height;
-						}
-
-						widthField && widthField.setValue( widthValue );
-						heightField && heightField.setValue( heightValue );
-					}
-					updatePreview( dialog );
-				};
-
-			var setupDimension = function( type, element ) {
-					if ( type != IMAGE )
-						return;
-
-					function checkDimension( size, defaultValue ) {
-						var aMatch = size.match( regexGetSize );
-						if ( aMatch ) {
-							// % is allowed.
-							if ( aMatch[ 2 ] == '%' ) {
-								aMatch[ 1 ] += '%';
-								switchLockRatio( dialog, false ); // Unlock ratio
-							}
-							return aMatch[ 1 ];
-						}
-						return defaultValue;
-					}
-
-					var dialog = this.getDialog(),
-						value = '',
-						dimension = this.id == 'txtWidth' ? 'width' : 'height',
-						size = element.getAttribute( dimension );
-
-					if ( size )
-						value = checkDimension( size, value );
-					value = checkDimension( element.getStyle( dimension ), value );
-
-					this.setValue( value );
-				};
-
-			var previewPreloader;
-
-			var onImgLoadEvent = function() {
-					// Image is ready.
-					var original = this.originalElement,
-						loader = CKEDITOR.document.getById( imagePreviewLoaderId );
-
-					original.setCustomData( 'isReady', 'true' );
-					original.removeListener( 'load', onImgLoadEvent );
-					original.removeListener( 'error', onImgLoadErrorEvent );
-					original.removeListener( 'abort', onImgLoadErrorEvent );
-
-					// Hide loader.
-					if ( loader )
-						loader.setStyle( 'display', 'none' );
-
-					// New image -> new dimensions
-					if ( !this.dontResetSize ) {
-						resetSize( this, editor.config.image_prefillDimensions === false );
-					}
-
-					if ( this.firstLoad ) {
-						CKEDITOR.tools.setTimeout( function() {
-							switchLockRatio( this, 'check' );
-						}, 0, this );
-					}
-
-					this.firstLoad = false;
-					this.dontResetSize = false;
-
-					// Possible fix for https://dev.ckeditor.com/ticket/12818.
-					updatePreview( this );
-				};
-
-			var onImgLoadErrorEvent = function() {
-					// Error. Image is not loaded.
-					var original = this.originalElement,
-						loader = CKEDITOR.document.getById( imagePreviewLoaderId );
-
-					original.removeListener( 'load', onImgLoadEvent );
-					original.removeListener( 'error', onImgLoadErrorEvent );
-					original.removeListener( 'abort', onImgLoadErrorEvent );
-
-					// Set Error image.
-					var noimage = CKEDITOR.getUrl( CKEDITOR.plugins.get( 'image' ).path + 'images/noimage.png' );
-
-					if ( this.preview )
-						this.preview.setAttribute( 'src', noimage );
-
-					// Hide loader.
-					if ( loader )
-						loader.setStyle( 'display', 'none' );
-
-					switchLockRatio( this, false ); // Unlock.
-				};
-
-			var numbering = function( id ) {
-					return CKEDITOR.tools.getNextId() + '_' + id;
-				},
-				btnLockSizesId = numbering( 'btnLockSizes' ),
-				btnResetSizeId = numbering( 'btnResetSize' ),
-				imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),
-				previewLinkId = numbering( 'previewLink' ),
-				previewImageId = numbering( 'previewImage' );
-
-			return {
-				title: editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
-				minWidth: ( CKEDITOR.skinName || editor.config.skin ) == 'moono-lisa' ? 500 : 420,
-				minHeight: 360,
-				getModel: function( editor ) {
-					var element = editor.getSelection().getSelectedElement(),
-						isImage = element && element.getName() === 'img',
-						isImageInput = element && element.getName() === 'input' &&
-							element.getAttribute( 'type' ) === 'image';
-
-					if ( isImage ||isImageInput ) {
-						return element;
-					}
-
-					return null;
-				},
-				onShow: function() {
-					this.imageElement = false;
-					this.linkElement = false;
-
-					// Default: create a new element.
-					this.imageEditMode = false;
-					this.linkEditMode = false;
-
-					this.lockRatio = true;
-					this.userlockRatio = 0;
-					this.dontResetSize = false;
-					this.firstLoad = true;
-					this.addLink = false;
-
-					var editor = this.getParentEditor(),
-						sel = editor.getSelection(),
-						element = sel && sel.getSelectedElement(),
-						link = element && editor.elementPath( element ).contains( 'a', 1 ),
-						loader = CKEDITOR.document.getById( imagePreviewLoaderId );
-
-					// Hide loader.
-					if ( loader )
-						loader.setStyle( 'display', 'none' );
-
-					// Create the preview before setup the dialog contents.
-					previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
-					this.preview = CKEDITOR.document.getById( previewImageId );
-
-					// Copy of the image
-					this.originalElement = editor.document.createElement( 'img' );
-					this.originalElement.setAttribute( 'alt', '' );
-					this.originalElement.setCustomData( 'isReady', 'false' );
-
-					if ( link ) {
-						this.linkElement = link;
-						this.linkEditMode = true;
-
-						// If there is an existing link, by default keep it (true).
-						// It will be removed if certain conditions are met and Link tab is enabled. (https://dev.ckeditor.com/ticket/13351)
-						this.addLink = true;
-
-						// Look for Image element.
-						var linkChildren = link.getChildren();
-						if ( linkChildren.count() == 1 ) {
-							var childTag = linkChildren.getItem( 0 );
-
-							if ( childTag.type == CKEDITOR.NODE_ELEMENT ) {
-								if ( childTag.is( 'img' ) || childTag.is( 'input' ) ) {
-									this.imageElement = linkChildren.getItem( 0 );
-									if ( this.imageElement.is( 'img' ) )
-										this.imageEditMode = 'img';
-									else if ( this.imageElement.is( 'input' ) )
-										this.imageEditMode = 'input';
-								}
-							}
-						}
-						// Fill out all fields.
-						if ( dialogType == 'image' )
-							this.setupContent( LINK, link );
-					}
-
-					// Edit given image element instead the one from selection.
-					if ( this.customImageElement ) {
-						this.imageEditMode = 'img';
-						this.imageElement = this.customImageElement;
-						delete this.customImageElement;
-					}
-					else if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' ) ||
-						element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) {
-						this.imageEditMode = element.getName();
-						this.imageElement = element;
-					}
-
-					if ( this.imageEditMode ) {
-						// Use the original element as a buffer from  since we don't want
-						// temporary changes to be committed, e.g. if the dialog is canceled.
-						this.cleanImageElement = this.imageElement;
-						this.imageElement = this.cleanImageElement.clone( true, true );
-
-						// Fill out all fields.
-						this.setupContent( IMAGE, this.imageElement );
-					}
-
-					// Refresh LockRatio button
-					switchLockRatio( this, true );
-
-					// Dont show preview if no URL given.
-					if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) {
-						this.preview.removeAttribute( 'src' );
-						this.preview.setStyle( 'display', 'none' );
-					}
-				},
-				onOk: function() {
-					// Edit existing Image.
-					if ( this.imageEditMode ) {
-						var imgTagName = this.imageEditMode;
-
-						// Image dialog and Input element.
-						if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) ) { // jshint ignore:line
-							// Replace INPUT-> IMG
-							imgTagName = 'img';
-							this.imageElement = editor.document.createElement( 'img' );
-							this.imageElement.setAttribute( 'alt', '' );
-							editor.insertElement( this.imageElement );
-						}
-						// ImageButton dialog and Image element.
-						else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ) ) { // jshint ignore:line
-							// Replace IMG -> INPUT
-							imgTagName = 'input';
-							this.imageElement = editor.document.createElement( 'input' );
-							this.imageElement.setAttributes( {
-								type: 'image',
-								alt: ''
-							} );
-							editor.insertElement( this.imageElement );
-						} else {
-							// Restore the original element before all commits.
-							this.imageElement = this.cleanImageElement;
-							delete this.cleanImageElement;
-						}
-					}
-					// Create a new image.
-					else {
-						// Image dialog -> create IMG element.
-						if ( dialogType == 'image' )
-							this.imageElement = editor.document.createElement( 'img' );
-						else {
-							this.imageElement = editor.document.createElement( 'input' );
-							this.imageElement.setAttribute( 'type', 'image' );
-						}
-						this.imageElement.setAttribute( 'alt', '' );
-					}
-
-					// Create a new link.
-					if ( !this.linkEditMode )
-						this.linkElement = editor.document.createElement( 'a' );
-
-					// Set attributes.
-					this.commitContent( IMAGE, this.imageElement );
-					this.commitContent( LINK, this.linkElement );
-
-					// Remove empty style attribute.
-					if ( !this.imageElement.getAttribute( 'style' ) )
-						this.imageElement.removeAttribute( 'style' );
-
-					// Insert a new Image.
-					if ( !this.imageEditMode ) {
-						if ( this.addLink ) {
-							if ( !this.linkEditMode ) {
-								// Insert a new link.
-								editor.insertElement( this.linkElement );
-								this.linkElement.append( this.imageElement, false );
-							} else {
-								// We already have a link in editor.
-								if ( this.linkElement.equals( editor.getSelection().getSelectedElement() ) ) {
-									// If the link is selected outside, replace it's content rather than the link itself. ([<a>foo</a>])
-									this.linkElement.setHtml( '' );
-									this.linkElement.append( this.imageElement, false );
-								} else {
-									// Only inside of the link is selected, so replace it with image. (<a>[foo]</a>, <a>[f]oo</a>)
-									editor.insertElement( this.imageElement );
-								}
-							}
-						} else {
-							editor.insertElement( this.imageElement );
-						}
-					}
-					// Image already exists.
-					else {
-						// Add a new link element.
-						if ( !this.linkEditMode && this.addLink ) {
-							editor.insertElement( this.linkElement );
-							this.imageElement.appendTo( this.linkElement );
-						}
-						// Remove Link, Image exists.
-						else if ( this.linkEditMode && !this.addLink ) {
-							editor.getSelection().selectElement( this.linkElement );
-							editor.insertElement( this.imageElement );
-						}
-					}
-				},
-				onLoad: function() {
-					if ( dialogType != 'image' )
-						this.hidePage( 'Link' ); //Hide Link tab.
-					var doc = this._.element.getDocument();
-
-					if ( this.getContentElement( 'info', 'ratioLock' ) ) {
-						this.addFocusable( doc.getById( btnResetSizeId ), 5 );
-						this.addFocusable( doc.getById( btnLockSizesId ), 5 );
-					}
-
-					this.commitContent = commitContent;
-				},
-				onHide: function() {
-					if ( this.preview )
-						this.commitContent( CLEANUP, this.preview );
-
-					if ( this.originalElement ) {
-						this.originalElement.removeListener( 'load', onImgLoadEvent );
-						this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
-						this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
-						this.originalElement.remove();
-						this.originalElement = false; // Dialog is closed.
-					}
-
-					delete this.imageElement;
-				},
-				contents: [ {
-					id: 'info',
-					label: editor.lang.image.infoTab,
-					accessKey: 'I',
-					elements: [ {
-						type: 'vbox',
-						padding: 0,
-						children: [ {
-							type: 'hbox',
-							widths: [ '280px', '110px' ],
-							align: 'right',
-							className: 'cke_dialog_image_url',
-							children: [ {
-								id: 'txtUrl',
-								type: 'text',
-								label: editor.lang.common.url,
-								required: true,
-								onChange: function() {
-									var dialog = this.getDialog(),
-										newUrl = this.getValue();
-
-									// Update original image.
-									// Prevent from load before onShow.
-									if ( newUrl.length > 0 ) {
-										dialog = this.getDialog();
-										var original = dialog.originalElement;
-
-										if ( dialog.preview ) {
-											dialog.preview.removeStyle( 'display' );
-										}
-
-										original.setCustomData( 'isReady', 'false' );
-										// Show loader.
-										var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
-										if ( loader )
-											loader.setStyle( 'display', '' );
-
-										original.on( 'load', onImgLoadEvent, dialog );
-										original.on( 'error', onImgLoadErrorEvent, dialog );
-										original.on( 'abort', onImgLoadErrorEvent, dialog );
-										original.setAttribute( 'src', newUrl );
-
-										if ( dialog.preview ) {
-											// Query the preloader to figure out the url impacted by based href.
-											previewPreloader.setAttribute( 'src', newUrl );
-											dialog.preview.setAttribute( 'src', previewPreloader.$.src );
-											updatePreview( dialog );
-										}
-									}
-									// Dont show preview if no URL given.
-									else if ( dialog.preview ) {
-										dialog.preview.removeAttribute( 'src' );
-										dialog.preview.setStyle( 'display', 'none' );
-									}
-								},
-								setup: function( type, element ) {
-									if ( type == IMAGE ) {
-										var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );
-										var field = this;
-
-										this.getDialog().dontResetSize = true;
-
-										field.setValue( url ); // And call this.onChange()
-										// Manually set the initial value.(https://dev.ckeditor.com/ticket/4191)
-										field.setInitValue();
-									}
-								},
-								commit: function( type, element ) {
-									if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) {
-										element.data( 'cke-saved-src', this.getValue() );
-										element.setAttribute( 'src', this.getValue() );
-									} else if ( type == CLEANUP ) {
-										element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
-										element.removeAttribute( 'src' );
-									}
-								},
-								validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
-							},
-							{
-								type: 'button',
-								id: 'browse',
-								// v-align with the 'txtUrl' field.
-								// TODO: We need something better than a fixed size here.
-								style: 'display:inline-block;margin-top:14px;',
-								align: 'center',
-								label: editor.lang.common.browseServer,
-								hidden: true,
-								filebrowser: 'info:txtUrl'
-							} ]
-						} ]
-					},
-					{
-						id: 'txtAlt',
-						type: 'text',
-						label: editor.lang.image.alt,
-						accessKey: 'T',
-						'default': '',
-						onChange: function() {
-							updatePreview( this.getDialog() );
-						},
-						setup: function( type, element ) {
-							if ( type == IMAGE )
-								this.setValue( element.getAttribute( 'alt' ) );
-						},
-						commit: function( type, element ) {
-							if ( type == IMAGE ) {
-								if ( this.getValue() || this.isChanged() )
-									element.setAttribute( 'alt', this.getValue() );
-							} else if ( type == PREVIEW )
-								element.setAttribute( 'alt', this.getValue() );
-							else if ( type == CLEANUP ) {
-								element.removeAttribute( 'alt' );
-							}
-
-						}
-					},
-					{
-						type: 'hbox',
-						children: [ {
-							id: 'basic',
-							type: 'vbox',
-							children: [ {
-								type: 'hbox',
-								requiredContent: 'img{width,height}',
-								widths: [ '50%', '50%' ],
-								children: [ {
-									type: 'vbox',
-									padding: 1,
-									children: [ {
-										type: 'text',
-										width: '45px',
-										id: 'txtWidth',
-										label: editor.lang.common.width,
-										onKeyUp: onSizeChange,
-										onChange: function() {
-											commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-										},
-										validate: function() {
-											var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
-												isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );
-											if ( !isValid )
-												alert( editor.lang.common.invalidLength.replace( '%1', editor.lang.common.width ).replace( '%2', 'px, %' ) ); // jshint ignore:line
-											return isValid;
-										},
-										setup: setupDimension,
-										commit: function( type, element ) {
-											var value = this.getValue();
-											if ( type == IMAGE ) {
-												if ( value && editor.activeFilter.check( 'img{width,height}' ) )
-													element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
-												else
-													element.removeStyle( 'width' );
-
-												element.removeAttribute( 'width' );
-											} else if ( type == PREVIEW ) {
-												var aMatch = value.match( regexGetSize );
-												if ( !aMatch ) {
-													var oImageOriginal = this.getDialog().originalElement;
-													if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
-														element.setStyle( 'width', oImageOriginal.$.width + 'px' );
-												} else {
-													element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
-												}
-											} else if ( type == CLEANUP ) {
-												element.removeAttribute( 'width' );
-												element.removeStyle( 'width' );
-											}
-										}
-									},
-									{
-										type: 'text',
-										id: 'txtHeight',
-										width: '45px',
-										label: editor.lang.common.height,
-										onKeyUp: onSizeChange,
-										onChange: function() {
-											commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-										},
-										validate: function() {
-											var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
-												isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );
-											if ( !isValid )
-												alert( editor.lang.common.invalidLength.replace( '%1', editor.lang.common.height ).replace( '%2', 'px, %' ) ); // jshint ignore:line
-											return isValid;
-										},
-										setup: setupDimension,
-										commit: function( type, element ) {
-											var value = this.getValue();
-											if ( type == IMAGE ) {
-												if ( value && editor.activeFilter.check( 'img{width,height}' ) )
-													element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
-												else
-													element.removeStyle( 'height' );
-
-												element.removeAttribute( 'height' );
-											} else if ( type == PREVIEW ) {
-												var aMatch = value.match( regexGetSize );
-												if ( !aMatch ) {
-													var oImageOriginal = this.getDialog().originalElement;
-													if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
-														element.setStyle( 'height', oImageOriginal.$.height + 'px' );
-												} else {
-													element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
-												}
-											} else if ( type == CLEANUP ) {
-												element.removeAttribute( 'height' );
-												element.removeStyle( 'height' );
-											}
-										}
-									} ]
-								},
-								{
-									id: 'ratioLock',
-									type: 'html',
-									className: 'cke_dialog_image_ratiolock',
-									style: 'margin-top:30px;width:40px;height:40px;',
-									onLoad: function() {
-										// Activate Reset button
-										var resetButton = CKEDITOR.document.getById( btnResetSizeId ),
-											ratioButton = CKEDITOR.document.getById( btnLockSizesId );
-										if ( resetButton ) {
-											resetButton.on( 'click', function( evt ) {
-												resetSize( this );
-												evt.data && evt.data.preventDefault();
-											}, this.getDialog() );
-											resetButton.on( 'mouseover', function() {
-												this.addClass( 'cke_btn_over' );
-											}, resetButton );
-											resetButton.on( 'mouseout', function() {
-												this.removeClass( 'cke_btn_over' );
-											}, resetButton );
-										}
-										// Activate (Un)LockRatio button
-										if ( ratioButton ) {
-											ratioButton.on( 'click', function( evt ) {
-												switchLockRatio( this );
-
-												var oImageOriginal = this.originalElement,
-													width = this.getValueOf( 'info', 'txtWidth' );
-
-												if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width ) {
-													var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
-													if ( !isNaN( height ) ) {
-														this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
-														updatePreview( this );
-													}
-												}
-												evt.data && evt.data.preventDefault();
-											}, this.getDialog() );
-											ratioButton.on( 'mouseover', function() {
-												this.addClass( 'cke_btn_over' );
-											}, ratioButton );
-											ratioButton.on( 'mouseout', function() {
-												this.removeClass( 'cke_btn_over' );
-											}, ratioButton );
-										}
-									},
-									html: '<div>' +
-										'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
-										'" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +
-										'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
-										'" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>' +
-										'</div>'
-								} ]
-							},
-							{
-								type: 'vbox',
-								padding: 1,
-								children: [ {
-									type: 'text',
-									id: 'txtBorder',
-									requiredContent: 'img{border-width}',
-									width: '60px',
-									label: editor.lang.image.border,
-									'default': '',
-									onKeyUp: function() {
-										updatePreview( this.getDialog() );
-									},
-									onChange: function() {
-										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-									},
-									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
-									setup: function( type, element ) {
-										if ( type == IMAGE ) {
-											var value,
-												borderStyle = element.getStyle( 'border-width' );
-											borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
-											value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
-											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
-											this.setValue( value );
-										}
-									},
-									commit: function( type, element ) {
-										var value = parseInt( this.getValue(), 10 );
-										if ( type == IMAGE || type == PREVIEW ) {
-											if ( !isNaN( value ) ) {
-												element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
-												element.setStyle( 'border-style', 'solid' );
-											} else if ( !value && this.isChanged() ) {
-												element.removeStyle( 'border' );
-											}
-
-											if ( type == IMAGE )
-												element.removeAttribute( 'border' );
-										} else if ( type == CLEANUP ) {
-											element.removeAttribute( 'border' );
-											element.removeStyle( 'border-width' );
-											element.removeStyle( 'border-style' );
-											element.removeStyle( 'border-color' );
-										}
-									}
-								},
-								{
-									type: 'text',
-									id: 'txtHSpace',
-									requiredContent: 'img{margin-left,margin-right}',
-									width: '60px',
-									label: editor.lang.image.hSpace,
-									'default': '',
-									onKeyUp: function() {
-										updatePreview( this.getDialog() );
-									},
-									onChange: function() {
-										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-									},
-									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
-									setup: function( type, element ) {
-										if ( type == IMAGE ) {
-											var value, marginLeftPx, marginRightPx,
-												marginLeftStyle = element.getStyle( 'margin-left' ),
-												marginRightStyle = element.getStyle( 'margin-right' );
-
-											marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
-											marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
-											marginLeftPx = parseInt( marginLeftStyle, 10 );
-											marginRightPx = parseInt( marginRightStyle, 10 );
-
-											value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
-											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
-
-											this.setValue( value );
-										}
-									},
-									commit: function( type, element ) {
-										var value = parseInt( this.getValue(), 10 );
-										if ( type == IMAGE || type == PREVIEW ) {
-											if ( !isNaN( value ) ) {
-												element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
-												element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
-											} else if ( !value && this.isChanged() ) {
-												element.removeStyle( 'margin-left' );
-												element.removeStyle( 'margin-right' );
-											}
-
-											if ( type == IMAGE )
-												element.removeAttribute( 'hspace' );
-										} else if ( type == CLEANUP ) {
-											element.removeAttribute( 'hspace' );
-											element.removeStyle( 'margin-left' );
-											element.removeStyle( 'margin-right' );
-										}
-									}
-								},
-								{
-									type: 'text',
-									id: 'txtVSpace',
-									requiredContent: 'img{margin-top,margin-bottom}',
-									width: '60px',
-									label: editor.lang.image.vSpace,
-									'default': '',
-									onKeyUp: function() {
-										updatePreview( this.getDialog() );
-									},
-									onChange: function() {
-										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-									},
-									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
-									setup: function( type, element ) {
-										if ( type == IMAGE ) {
-											var value, marginTopPx, marginBottomPx,
-												marginTopStyle = element.getStyle( 'margin-top' ),
-												marginBottomStyle = element.getStyle( 'margin-bottom' );
-
-											marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
-											marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
-											marginTopPx = parseInt( marginTopStyle, 10 );
-											marginBottomPx = parseInt( marginBottomStyle, 10 );
-
-											value = ( marginTopPx == marginBottomPx ) && marginTopPx;
-											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
-											this.setValue( value );
-										}
-									},
-									commit: function( type, element ) {
-										var value = parseInt( this.getValue(), 10 );
-										if ( type == IMAGE || type == PREVIEW ) {
-											if ( !isNaN( value ) ) {
-												element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
-												element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
-											} else if ( !value && this.isChanged() ) {
-												element.removeStyle( 'margin-top' );
-												element.removeStyle( 'margin-bottom' );
-											}
-
-											if ( type == IMAGE )
-												element.removeAttribute( 'vspace' );
-										} else if ( type == CLEANUP ) {
-											element.removeAttribute( 'vspace' );
-											element.removeStyle( 'margin-top' );
-											element.removeStyle( 'margin-bottom' );
-										}
-									}
-								},
-								{
-									id: 'cmbAlign',
-									requiredContent: 'img{float}',
-									type: 'select',
-									widths: [ '35%', '65%' ],
-									style: 'width:90px',
-									label: editor.lang.common.align,
-									'default': '',
-									items: [
-										[ editor.lang.common.notSet, '' ],
-										[ editor.lang.common.left, 'left' ],
-										[ editor.lang.common.right, 'right' ]
-										// Backward compatible with v2 on setup when specified as attribute value,
-										// while these values are no more available as select options.
-										//	[ editor.lang.image.alignAbsBottom , 'absBottom'],
-										//	[ editor.lang.image.alignAbsMiddle , 'absMiddle'],
-										//  [ editor.lang.image.alignBaseline , 'baseline'],
-										//  [ editor.lang.image.alignTextTop , 'text-top'],
-										//  [ editor.lang.image.alignBottom , 'bottom'],
-										//  [ editor.lang.image.alignMiddle , 'middle'],
-										//  [ editor.lang.image.alignTop , 'top']
-									],
-									onChange: function() {
-										updatePreview( this.getDialog() );
-										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-									},
-									setup: function( type, element ) {
-										if ( type == IMAGE ) {
-											var value = element.getStyle( 'float' );
-											switch ( value ) {
-												// Ignore those unrelated values.
-												case 'inherit':
-												case 'none':
-													value = '';
-											}
-
-											!value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );
-											this.setValue( value );
-										}
-									},
-									commit: function( type, element ) {
-										var value = this.getValue();
-										if ( type == IMAGE || type == PREVIEW ) {
-											if ( value )
-												element.setStyle( 'float', value );
-											else
-												element.removeStyle( 'float' );
-
-											if ( type == IMAGE ) {
-												value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
-												switch ( value ) {
-													// we should remove it only if it matches "left" or "right",
-													// otherwise leave it intact.
-													case 'left':
-													case 'right':
-														element.removeAttribute( 'align' );
-												}
-											}
-										} else if ( type == CLEANUP ) {
-											element.removeStyle( 'float' );
-										}
-									}
-								} ]
-							} ]
-						},
-						{
-							type: 'vbox',
-							height: '250px',
-							children: [ {
-								type: 'html',
-								id: 'htmlPreview',
-								style: 'width:95%;',
-								html: '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) + '<br>' +
-									'<div id="' + imagePreviewLoaderId + '" class="ImagePreviewLoader" style="display:none"><div class="loading"></div></div>' +
-									'<div class="ImagePreviewBox"><table><tr><td>' +
-										'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="' + previewLinkId + '">' +
-										'<img id="' + previewImageId + '" alt="" /></a>' +
-									// jscs:disable maximumLineLength
-										( editor.config.image_previewText || 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ' +
-											'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, ' +
-											'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) +
-									// jscs:enable maximumLineLength
-									'</td></tr></table></div></div>'
-							} ]
-						} ]
-					} ]
-				},
-				{
-					id: 'Link',
-					requiredContent: 'a[href]',
-					label: editor.lang.image.linkTab,
-					padding: 0,
-					elements: [ {
-						id: 'txtUrl',
-						type: 'text',
-						label: editor.lang.common.url,
-						style: 'width: 100%',
-						'default': '',
-						setup: function( type, element ) {
-							if ( type == LINK ) {
-								var href = element.data( 'cke-saved-href' );
-								if ( !href )
-									href = element.getAttribute( 'href' );
-								this.setValue( href );
-							}
-						},
-						commit: function( type, element ) {
-							if ( type == LINK ) {
-								if ( this.getValue() || this.isChanged() ) {
-									var url = this.getValue();
-									element.data( 'cke-saved-href', url );
-									element.setAttribute( 'href', url );
-
-									if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
-										this.getDialog().addLink = true;
-									else
-										this.getDialog().addLink = false;
-								}
-							}
-						}
-					},
-					{
-						type: 'button',
-						id: 'browse',
-						className: 'cke_dialog_image_browse',
-						filebrowser: {
-							action: 'Browse',
-							target: 'Link:txtUrl',
-							url: editor.config.filebrowserImageBrowseLinkUrl
-						},
-						style: 'float:right',
-						hidden: true,
-						label: editor.lang.common.browseServer
-					},
-					{
-						id: 'cmbTarget',
-						type: 'select',
-						requiredContent: 'a[target]',
-						label: editor.lang.common.target,
-						'default': '',
-						items: [
-							[ editor.lang.common.notSet, '' ],
-							[ editor.lang.common.targetNew, '_blank' ],
-							[ editor.lang.common.targetTop, '_top' ],
-							[ editor.lang.common.targetSelf, '_self' ],
-							[ editor.lang.common.targetParent, '_parent' ]
-						],
-						setup: function( type, element ) {
-							if ( type == LINK )
-								this.setValue( element.getAttribute( 'target' ) || '' );
-						},
-						commit: function( type, element ) {
-							if ( type == LINK ) {
-								if ( this.getValue() || this.isChanged() )
-									element.setAttribute( 'target', this.getValue() );
-							}
-						}
-					} ]
-				},
-				{
-					id: 'Upload',
-					hidden: true,
-					filebrowser: 'uploadButton',
-					label: editor.lang.image.upload,
-					elements: [ 
-                    {
-						type: 'file',
-						id: 'upload',
-						label: editor.lang.image.btnUpload,
-						style: 'height:40px',
-						size: 38
-					},
-					{
-						type: 'fileButton',
-						id: 'uploadButton',
-						filebrowser: 'info:txtUrl',
-						label: editor.lang.image.btnUpload,
-						'for': [ 'Upload', 'upload' ]
-					},
-                    {
-						type: 'button',
-						id: 'selectfile',
-						label: '选择服务器文件',
-						size: 38,
-                        onClick: function () {
-							var w = 800;
-							var h = 600;
-							var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
-							var dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
-						
-							var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
-							var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
-						
-							var systemZoom = width / window.screen.availWidth;
-							var posLeft = (width - w) / 2 / systemZoom + dualScreenLeft;
-							var posTop = (height - h) / 2 / systemZoom + dualScreenTop;
-                            window.open("./dialog/select_images.php?iseditor=1&f="+editor.name, "popUpImagesWin", "scrollbars=yes,resizable=yes,statebar=no,width=800,height=600,left=" + posLeft + ", top=" + posTop);
-                            CKEDITOR.dialog.getCurrent().hide();
-                        }
-					},
-                ]
-				},
-				{
-					id: 'advanced',
-					label: editor.lang.common.advancedTab,
-					elements: [ {
-						type: 'hbox',
-						widths: [ '50%', '25%', '25%' ],
-						children: [ {
-							type: 'text',
-							id: 'linkId',
-							requiredContent: 'img[id]',
-							label: editor.lang.common.id,
-							setup: function( type, element ) {
-								if ( type == IMAGE )
-									this.setValue( element.getAttribute( 'id' ) );
-							},
-							commit: function( type, element ) {
-								if ( type == IMAGE ) {
-									if ( this.getValue() || this.isChanged() )
-										element.setAttribute( 'id', this.getValue() );
-								}
-							}
-						},
-						{
-							id: 'cmbLangDir',
-							type: 'select',
-							requiredContent: 'img[dir]',
-							style: 'width : 100px;',
-							label: editor.lang.common.langDir,
-							'default': '',
-							items: [
-								[ editor.lang.common.notSet, '' ],
-								[ editor.lang.common.langDirLtr, 'ltr' ],
-								[ editor.lang.common.langDirRtl, 'rtl' ]
-							],
-							setup: function( type, element ) {
-								if ( type == IMAGE )
-									this.setValue( element.getAttribute( 'dir' ) );
-							},
-							commit: function( type, element ) {
-								if ( type == IMAGE ) {
-									if ( this.getValue() || this.isChanged() )
-										element.setAttribute( 'dir', this.getValue() );
-								}
-							}
-						},
-						{
-							type: 'text',
-							id: 'txtLangCode',
-							requiredContent: 'img[lang]',
-							label: editor.lang.common.langCode,
-							'default': '',
-							setup: function( type, element ) {
-								if ( type == IMAGE )
-									this.setValue( element.getAttribute( 'lang' ) );
-							},
-							commit: function( type, element ) {
-								if ( type == IMAGE ) {
-									if ( this.getValue() || this.isChanged() )
-										element.setAttribute( 'lang', this.getValue() );
-								}
-							}
-						} ]
-					},
-					{
-						type: 'text',
-						id: 'txtGenLongDescr',
-						requiredContent: 'img[longdesc]',
-						label: editor.lang.common.longDescr,
-						setup: function( type, element ) {
-							if ( type == IMAGE )
-								this.setValue( element.getAttribute( 'longDesc' ) );
-						},
-						commit: function( type, element ) {
-							if ( type == IMAGE ) {
-								if ( this.getValue() || this.isChanged() )
-									element.setAttribute( 'longDesc', this.getValue() );
-							}
-						}
-					},
-					{
-						type: 'hbox',
-						widths: [ '50%', '50%' ],
-						children: [ {
-							type: 'text',
-							id: 'txtGenClass',
-							requiredContent: 'img(cke-xyz)', // Random text like 'xyz' will check if all are allowed.
-							label: editor.lang.common.cssClass,
-							'default': '',
-							setup: function( type, element ) {
-								if ( type == IMAGE )
-									this.setValue( element.getAttribute( 'class' ) );
-							},
-							commit: function( type, element ) {
-								if ( type == IMAGE ) {
-									if ( this.getValue() || this.isChanged() )
-										element.setAttribute( 'class', this.getValue() );
-								}
-							}
-						},
-						{
-							type: 'text',
-							id: 'txtGenTitle',
-							requiredContent: 'img[title]',
-							label: editor.lang.common.advisoryTitle,
-							'default': '',
-							onChange: function() {
-								updatePreview( this.getDialog() );
-							},
-							setup: function( type, element ) {
-								if ( type == IMAGE )
-									this.setValue( element.getAttribute( 'title' ) );
-							},
-							commit: function( type, element ) {
-								if ( type == IMAGE ) {
-									if ( this.getValue() || this.isChanged() )
-										element.setAttribute( 'title', this.getValue() );
-								} else if ( type == PREVIEW )
-									element.setAttribute( 'title', this.getValue() );
-								else if ( type == CLEANUP ) {
-									element.removeAttribute( 'title' );
-								}
-							}
-						} ]
-					},
-					{
-						type: 'text',
-						id: 'txtdlgGenStyle',
-						requiredContent: 'img{cke-xyz}', // Random text like 'xyz' will check if all are allowed.
-						label: editor.lang.common.cssStyle,
-						validate: CKEDITOR.dialog.validate.inlineStyle( editor.lang.common.invalidInlineStyle ),
-						'default': '',
-						setup: function( type, element ) {
-							if ( type == IMAGE ) {
-								var genStyle = element.getAttribute( 'style' );
-								if ( !genStyle && element.$.style.cssText )
-									genStyle = element.$.style.cssText;
-								this.setValue( genStyle );
-
-								var height = element.$.style.height,
-									width = element.$.style.width,
-									aMatchH = ( height ? height : '' ).match( regexGetSize ),
-									aMatchW = ( width ? width : '' ).match( regexGetSize );
-
-								this.attributesInStyle = {
-									height: !!aMatchH,
-									width: !!aMatchW
-								};
-							}
-						},
-						onChange: function() {
-							commitInternally.call(
-								this, [
-									'info:cmbFloat',
-									'info:cmbAlign',
-									'info:txtVSpace',
-									'info:txtHSpace',
-									'info:txtBorder',
-									'info:txtWidth',
-									'info:txtHeight'
-								]
-							);
-							updatePreview( this );
-						},
-						commit: function( type, element ) {
-							if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
-								element.setAttribute( 'style', this.getValue() );
-
-						}
-					} ]
-				} ]
-			};
-		};
-
-	CKEDITOR.dialog.add( 'image', function( editor ) {
-		return imageDialog( editor, 'image' );
-	} );
-
-	CKEDITOR.dialog.add( 'imagebutton', function( editor ) {
-		return imageDialog( editor, 'imagebutton' );
-	} );
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+( function() {
+	var imageDialog = function( editor, dialogType ) {
+			// Load image preview.
+			var IMAGE = 1,
+				LINK = 2,
+				PREVIEW = 4,
+				CLEANUP = 8,
+				regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
+				regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
+				pxLengthRegex = /^\d+px$/;
+
+			var onSizeChange = function() {
+					var value = this.getValue(),
+						// This = input element.
+						dialog = this.getDialog(),
+						aMatch = value.match( regexGetSize ); // Check value
+					if ( aMatch ) {
+						if ( aMatch[ 2 ] == '%' ) // % is allowed - > unlock ratio.
+						switchLockRatio( dialog, false ); // Unlock.
+						value = aMatch[ 1 ];
+					}
+
+					// Only if ratio is locked
+					if ( dialog.lockRatio ) {
+						var oImageOriginal = dialog.originalElement;
+						if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
+							if ( this.id == 'txtHeight' ) {
+								if ( value && value != '0' )
+									value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
+								if ( !isNaN( value ) )
+									dialog.setValueOf( 'info', 'txtWidth', value );
+							}
+							// this.id = txtWidth.
+							else {
+								if ( value && value != '0' )
+									value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
+								if ( !isNaN( value ) )
+									dialog.setValueOf( 'info', 'txtHeight', value );
+							}
+						}
+					}
+					updatePreview( dialog );
+				};
+
+			var updatePreview = function( dialog ) {
+					//Don't load before onShow.
+					if ( !dialog.originalElement || !dialog.preview )
+						return 1;
+
+					// Read attributes and update imagePreview;
+					dialog.commitContent( PREVIEW, dialog.preview );
+					return 0;
+				};
+
+			// Custom commit dialog logic, where we're intended to give inline style
+			// field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
+			// by other fields.
+			function commitContent() {
+				var args = arguments;
+				var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
+				inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
+
+				this.foreach( function( widget ) {
+					if ( widget.commit && widget.id != 'txtdlgGenStyle' )
+						widget.commit.apply( widget, args );
+				} );
+			}
+
+			// Avoid recursions.
+			var incommit;
+
+			// Synchronous field values to other impacted fields is required, e.g. border
+			// size change should alter inline-style text as well.
+			function commitInternally( targetFields ) {
+				if ( incommit )
+					return;
+
+				incommit = 1;
+
+				var dialog = this.getDialog(),
+					element = dialog.imageElement;
+				if ( element ) {
+					// Commit this field and broadcast to target fields.
+					this.commit( IMAGE, element );
+
+					targetFields = [].concat( targetFields );
+					var length = targetFields.length,
+						field;
+					for ( var i = 0; i < length; i++ ) {
+						field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
+						// May cause recursion.
+						field && field.setup( IMAGE, element );
+					}
+				}
+
+				incommit = 0;
+			}
+
+			var switchLockRatio = function( dialog, value ) {
+					if ( !dialog.getContentElement( 'info', 'ratioLock' ) )
+						return null;
+
+					var oImageOriginal = dialog.originalElement;
+
+					// Dialog may already closed. (https://dev.ckeditor.com/ticket/5505)
+					if ( !oImageOriginal )
+						return null;
+
+					// Check image ratio and original image ratio, but respecting user's preference.
+					if ( value == 'check' ) {
+						if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
+							var width = dialog.getValueOf( 'info', 'txtWidth' ),
+								height = dialog.getValueOf( 'info', 'txtHeight' ),
+								originalRatio = oImageOriginal.$.width / oImageOriginal.$.height,
+								thisRatio = width / height;
+
+							dialog.lockRatio = false; // Default: unlock ratio
+
+							if ( !width && !height ) {
+								dialog.lockRatio = true;
+							} else {
+								// Round ratio to two decimal places so ratio locking will be less precise (#2254).
+								var ratioComparison = Math.round( ( originalRatio / thisRatio ) * 100 ) / 100;
+
+								if ( ratioComparison == 1 ) {
+									dialog.lockRatio = true;
+								}
+							}
+						}
+					} else if ( value !== undefined ) {
+						dialog.lockRatio = value;
+					} else {
+						dialog.userlockRatio = 1;
+						dialog.lockRatio = !dialog.lockRatio;
+					}
+
+					var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
+					if ( dialog.lockRatio )
+						ratioButton.removeClass( 'cke_btn_unlocked' );
+					else
+						ratioButton.addClass( 'cke_btn_unlocked' );
+
+					ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );
+
+					// Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
+					if ( CKEDITOR.env.hc ) {
+						var icon = ratioButton.getChild( 0 );
+						icon.setHtml( dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
+					}
+
+					return dialog.lockRatio;
+				};
+
+			var resetSize = function( dialog, emptyValues ) {
+					var oImageOriginal = dialog.originalElement,
+						ready = oImageOriginal.getCustomData( 'isReady' ) == 'true';
+
+					if ( ready ) {
+						var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
+							heightField = dialog.getContentElement( 'info', 'txtHeight' ),
+							widthValue, heightValue;
+
+						if ( emptyValues ) {
+							widthValue = 0;
+							heightValue = 0;
+						} else {
+							widthValue = oImageOriginal.$.width;
+							heightValue = oImageOriginal.$.height;
+						}
+
+						widthField && widthField.setValue( widthValue );
+						heightField && heightField.setValue( heightValue );
+					}
+					updatePreview( dialog );
+				};
+
+			var setupDimension = function( type, element ) {
+					if ( type != IMAGE )
+						return;
+
+					function checkDimension( size, defaultValue ) {
+						var aMatch = size.match( regexGetSize );
+						if ( aMatch ) {
+							// % is allowed.
+							if ( aMatch[ 2 ] == '%' ) {
+								aMatch[ 1 ] += '%';
+								switchLockRatio( dialog, false ); // Unlock ratio
+							}
+							return aMatch[ 1 ];
+						}
+						return defaultValue;
+					}
+
+					var dialog = this.getDialog(),
+						value = '',
+						dimension = this.id == 'txtWidth' ? 'width' : 'height',
+						size = element.getAttribute( dimension );
+
+					if ( size )
+						value = checkDimension( size, value );
+					value = checkDimension( element.getStyle( dimension ), value );
+
+					this.setValue( value );
+				};
+
+			var previewPreloader;
+
+			var onImgLoadEvent = function() {
+					// Image is ready.
+					var original = this.originalElement,
+						loader = CKEDITOR.document.getById( imagePreviewLoaderId );
+
+					original.setCustomData( 'isReady', 'true' );
+					original.removeListener( 'load', onImgLoadEvent );
+					original.removeListener( 'error', onImgLoadErrorEvent );
+					original.removeListener( 'abort', onImgLoadErrorEvent );
+
+					// Hide loader.
+					if ( loader )
+						loader.setStyle( 'display', 'none' );
+
+					// New image -> new dimensions
+					if ( !this.dontResetSize ) {
+						resetSize( this, editor.config.image_prefillDimensions === false );
+					}
+
+					if ( this.firstLoad ) {
+						CKEDITOR.tools.setTimeout( function() {
+							switchLockRatio( this, 'check' );
+						}, 0, this );
+					}
+
+					this.firstLoad = false;
+					this.dontResetSize = false;
+
+					// Possible fix for https://dev.ckeditor.com/ticket/12818.
+					updatePreview( this );
+				};
+
+			var onImgLoadErrorEvent = function() {
+					// Error. Image is not loaded.
+					var original = this.originalElement,
+						loader = CKEDITOR.document.getById( imagePreviewLoaderId );
+
+					original.removeListener( 'load', onImgLoadEvent );
+					original.removeListener( 'error', onImgLoadErrorEvent );
+					original.removeListener( 'abort', onImgLoadErrorEvent );
+
+					// Set Error image.
+					var noimage = CKEDITOR.getUrl( CKEDITOR.plugins.get( 'image' ).path + 'images/noimage.png' );
+
+					if ( this.preview )
+						this.preview.setAttribute( 'src', noimage );
+
+					// Hide loader.
+					if ( loader )
+						loader.setStyle( 'display', 'none' );
+
+					switchLockRatio( this, false ); // Unlock.
+				};
+
+			var numbering = function( id ) {
+					return CKEDITOR.tools.getNextId() + '_' + id;
+				},
+				btnLockSizesId = numbering( 'btnLockSizes' ),
+				btnResetSizeId = numbering( 'btnResetSize' ),
+				imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),
+				previewLinkId = numbering( 'previewLink' ),
+				previewImageId = numbering( 'previewImage' );
+
+			return {
+				title: editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
+				minWidth: ( CKEDITOR.skinName || editor.config.skin ) == 'moono-lisa' ? 500 : 420,
+				minHeight: 360,
+				getModel: function( editor ) {
+					var element = editor.getSelection().getSelectedElement(),
+						isImage = element && element.getName() === 'img',
+						isImageInput = element && element.getName() === 'input' &&
+							element.getAttribute( 'type' ) === 'image';
+
+					if ( isImage ||isImageInput ) {
+						return element;
+					}
+
+					return null;
+				},
+				onShow: function() {
+					this.imageElement = false;
+					this.linkElement = false;
+
+					// Default: create a new element.
+					this.imageEditMode = false;
+					this.linkEditMode = false;
+
+					this.lockRatio = true;
+					this.userlockRatio = 0;
+					this.dontResetSize = false;
+					this.firstLoad = true;
+					this.addLink = false;
+
+					var editor = this.getParentEditor(),
+						sel = editor.getSelection(),
+						element = sel && sel.getSelectedElement(),
+						link = element && editor.elementPath( element ).contains( 'a', 1 ),
+						loader = CKEDITOR.document.getById( imagePreviewLoaderId );
+
+					// Hide loader.
+					if ( loader )
+						loader.setStyle( 'display', 'none' );
+
+					// Create the preview before setup the dialog contents.
+					previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
+					this.preview = CKEDITOR.document.getById( previewImageId );
+
+					// Copy of the image
+					this.originalElement = editor.document.createElement( 'img' );
+					this.originalElement.setAttribute( 'alt', '' );
+					this.originalElement.setCustomData( 'isReady', 'false' );
+
+					if ( link ) {
+						this.linkElement = link;
+						this.linkEditMode = true;
+
+						// If there is an existing link, by default keep it (true).
+						// It will be removed if certain conditions are met and Link tab is enabled. (https://dev.ckeditor.com/ticket/13351)
+						this.addLink = true;
+
+						// Look for Image element.
+						var linkChildren = link.getChildren();
+						if ( linkChildren.count() == 1 ) {
+							var childTag = linkChildren.getItem( 0 );
+
+							if ( childTag.type == CKEDITOR.NODE_ELEMENT ) {
+								if ( childTag.is( 'img' ) || childTag.is( 'input' ) ) {
+									this.imageElement = linkChildren.getItem( 0 );
+									if ( this.imageElement.is( 'img' ) )
+										this.imageEditMode = 'img';
+									else if ( this.imageElement.is( 'input' ) )
+										this.imageEditMode = 'input';
+								}
+							}
+						}
+						// Fill out all fields.
+						if ( dialogType == 'image' )
+							this.setupContent( LINK, link );
+					}
+
+					// Edit given image element instead the one from selection.
+					if ( this.customImageElement ) {
+						this.imageEditMode = 'img';
+						this.imageElement = this.customImageElement;
+						delete this.customImageElement;
+					}
+					else if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' ) ||
+						element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) {
+						this.imageEditMode = element.getName();
+						this.imageElement = element;
+					}
+
+					if ( this.imageEditMode ) {
+						// Use the original element as a buffer from  since we don't want
+						// temporary changes to be committed, e.g. if the dialog is canceled.
+						this.cleanImageElement = this.imageElement;
+						this.imageElement = this.cleanImageElement.clone( true, true );
+
+						// Fill out all fields.
+						this.setupContent( IMAGE, this.imageElement );
+					}
+
+					// Refresh LockRatio button
+					switchLockRatio( this, true );
+
+					// Dont show preview if no URL given.
+					if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) {
+						this.preview.removeAttribute( 'src' );
+						this.preview.setStyle( 'display', 'none' );
+					}
+				},
+				onOk: function() {
+					// Edit existing Image.
+					if ( this.imageEditMode ) {
+						var imgTagName = this.imageEditMode;
+
+						// Image dialog and Input element.
+						if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) ) { // jshint ignore:line
+							// Replace INPUT-> IMG
+							imgTagName = 'img';
+							this.imageElement = editor.document.createElement( 'img' );
+							this.imageElement.setAttribute( 'alt', '' );
+							editor.insertElement( this.imageElement );
+						}
+						// ImageButton dialog and Image element.
+						else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ) ) { // jshint ignore:line
+							// Replace IMG -> INPUT
+							imgTagName = 'input';
+							this.imageElement = editor.document.createElement( 'input' );
+							this.imageElement.setAttributes( {
+								type: 'image',
+								alt: ''
+							} );
+							editor.insertElement( this.imageElement );
+						} else {
+							// Restore the original element before all commits.
+							this.imageElement = this.cleanImageElement;
+							delete this.cleanImageElement;
+						}
+					}
+					// Create a new image.
+					else {
+						// Image dialog -> create IMG element.
+						if ( dialogType == 'image' )
+							this.imageElement = editor.document.createElement( 'img' );
+						else {
+							this.imageElement = editor.document.createElement( 'input' );
+							this.imageElement.setAttribute( 'type', 'image' );
+						}
+						this.imageElement.setAttribute( 'alt', '' );
+					}
+
+					// Create a new link.
+					if ( !this.linkEditMode )
+						this.linkElement = editor.document.createElement( 'a' );
+
+					// Set attributes.
+					this.commitContent( IMAGE, this.imageElement );
+					this.commitContent( LINK, this.linkElement );
+
+					// Remove empty style attribute.
+					if ( !this.imageElement.getAttribute( 'style' ) )
+						this.imageElement.removeAttribute( 'style' );
+
+					// Insert a new Image.
+					if ( !this.imageEditMode ) {
+						if ( this.addLink ) {
+							if ( !this.linkEditMode ) {
+								// Insert a new link.
+								editor.insertElement( this.linkElement );
+								this.linkElement.append( this.imageElement, false );
+							} else {
+								// We already have a link in editor.
+								if ( this.linkElement.equals( editor.getSelection().getSelectedElement() ) ) {
+									// If the link is selected outside, replace it's content rather than the link itself. ([<a>foo</a>])
+									this.linkElement.setHtml( '' );
+									this.linkElement.append( this.imageElement, false );
+								} else {
+									// Only inside of the link is selected, so replace it with image. (<a>[foo]</a>, <a>[f]oo</a>)
+									editor.insertElement( this.imageElement );
+								}
+							}
+						} else {
+							editor.insertElement( this.imageElement );
+						}
+					}
+					// Image already exists.
+					else {
+						// Add a new link element.
+						if ( !this.linkEditMode && this.addLink ) {
+							editor.insertElement( this.linkElement );
+							this.imageElement.appendTo( this.linkElement );
+						}
+						// Remove Link, Image exists.
+						else if ( this.linkEditMode && !this.addLink ) {
+							editor.getSelection().selectElement( this.linkElement );
+							editor.insertElement( this.imageElement );
+						}
+					}
+				},
+				onLoad: function() {
+					if ( dialogType != 'image' )
+						this.hidePage( 'Link' ); //Hide Link tab.
+					var doc = this._.element.getDocument();
+
+					if ( this.getContentElement( 'info', 'ratioLock' ) ) {
+						this.addFocusable( doc.getById( btnResetSizeId ), 5 );
+						this.addFocusable( doc.getById( btnLockSizesId ), 5 );
+					}
+
+					this.commitContent = commitContent;
+				},
+				onHide: function() {
+					if ( this.preview )
+						this.commitContent( CLEANUP, this.preview );
+
+					if ( this.originalElement ) {
+						this.originalElement.removeListener( 'load', onImgLoadEvent );
+						this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
+						this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
+						this.originalElement.remove();
+						this.originalElement = false; // Dialog is closed.
+					}
+
+					delete this.imageElement;
+				},
+				contents: [ {
+					id: 'info',
+					label: editor.lang.image.infoTab,
+					accessKey: 'I',
+					elements: [ {
+						type: 'vbox',
+						padding: 0,
+						children: [ {
+							type: 'hbox',
+							widths: [ '280px', '110px' ],
+							align: 'right',
+							className: 'cke_dialog_image_url',
+							children: [ {
+								id: 'txtUrl',
+								type: 'text',
+								label: editor.lang.common.url,
+								required: true,
+								onChange: function() {
+									var dialog = this.getDialog(),
+										newUrl = this.getValue();
+
+									// Update original image.
+									// Prevent from load before onShow.
+									if ( newUrl.length > 0 ) {
+										dialog = this.getDialog();
+										var original = dialog.originalElement;
+
+										if ( dialog.preview ) {
+											dialog.preview.removeStyle( 'display' );
+										}
+
+										original.setCustomData( 'isReady', 'false' );
+										// Show loader.
+										var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
+										if ( loader )
+											loader.setStyle( 'display', '' );
+
+										original.on( 'load', onImgLoadEvent, dialog );
+										original.on( 'error', onImgLoadErrorEvent, dialog );
+										original.on( 'abort', onImgLoadErrorEvent, dialog );
+										original.setAttribute( 'src', newUrl );
+
+										if ( dialog.preview ) {
+											// Query the preloader to figure out the url impacted by based href.
+											previewPreloader.setAttribute( 'src', newUrl );
+											dialog.preview.setAttribute( 'src', previewPreloader.$.src );
+											updatePreview( dialog );
+										}
+									}
+									// Dont show preview if no URL given.
+									else if ( dialog.preview ) {
+										dialog.preview.removeAttribute( 'src' );
+										dialog.preview.setStyle( 'display', 'none' );
+									}
+								},
+								setup: function( type, element ) {
+									if ( type == IMAGE ) {
+										var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );
+										var field = this;
+
+										this.getDialog().dontResetSize = true;
+
+										field.setValue( url ); // And call this.onChange()
+										// Manually set the initial value.(https://dev.ckeditor.com/ticket/4191)
+										field.setInitValue();
+									}
+								},
+								commit: function( type, element ) {
+									if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) {
+										element.data( 'cke-saved-src', this.getValue() );
+										element.setAttribute( 'src', this.getValue() );
+									} else if ( type == CLEANUP ) {
+										element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
+										element.removeAttribute( 'src' );
+									}
+								},
+								validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
+							},
+							{
+								type: 'button',
+								id: 'browse',
+								// v-align with the 'txtUrl' field.
+								// TODO: We need something better than a fixed size here.
+								style: 'display:inline-block;margin-top:14px;',
+								align: 'center',
+								label: editor.lang.common.browseServer,
+								hidden: true,
+								filebrowser: 'info:txtUrl'
+							} ]
+						} ]
+					},
+					{
+						id: 'txtAlt',
+						type: 'text',
+						label: editor.lang.image.alt,
+						accessKey: 'T',
+						'default': '',
+						onChange: function() {
+							updatePreview( this.getDialog() );
+						},
+						setup: function( type, element ) {
+							if ( type == IMAGE )
+								this.setValue( element.getAttribute( 'alt' ) );
+						},
+						commit: function( type, element ) {
+							if ( type == IMAGE ) {
+								if ( this.getValue() || this.isChanged() )
+									element.setAttribute( 'alt', this.getValue() );
+							} else if ( type == PREVIEW )
+								element.setAttribute( 'alt', this.getValue() );
+							else if ( type == CLEANUP ) {
+								element.removeAttribute( 'alt' );
+							}
+
+						}
+					},
+					{
+						type: 'hbox',
+						children: [ {
+							id: 'basic',
+							type: 'vbox',
+							children: [ {
+								type: 'hbox',
+								requiredContent: 'img{width,height}',
+								widths: [ '50%', '50%' ],
+								children: [ {
+									type: 'vbox',
+									padding: 1,
+									children: [ {
+										type: 'text',
+										width: '45px',
+										id: 'txtWidth',
+										label: editor.lang.common.width,
+										onKeyUp: onSizeChange,
+										onChange: function() {
+											commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+										},
+										validate: function() {
+											var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
+												isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );
+											if ( !isValid )
+												alert( editor.lang.common.invalidLength.replace( '%1', editor.lang.common.width ).replace( '%2', 'px, %' ) ); // jshint ignore:line
+											return isValid;
+										},
+										setup: setupDimension,
+										commit: function( type, element ) {
+											var value = this.getValue();
+											if ( type == IMAGE ) {
+												if ( value && editor.activeFilter.check( 'img{width,height}' ) )
+													element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
+												else
+													element.removeStyle( 'width' );
+
+												element.removeAttribute( 'width' );
+											} else if ( type == PREVIEW ) {
+												var aMatch = value.match( regexGetSize );
+												if ( !aMatch ) {
+													var oImageOriginal = this.getDialog().originalElement;
+													if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+														element.setStyle( 'width', oImageOriginal.$.width + 'px' );
+												} else {
+													element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
+												}
+											} else if ( type == CLEANUP ) {
+												element.removeAttribute( 'width' );
+												element.removeStyle( 'width' );
+											}
+										}
+									},
+									{
+										type: 'text',
+										id: 'txtHeight',
+										width: '45px',
+										label: editor.lang.common.height,
+										onKeyUp: onSizeChange,
+										onChange: function() {
+											commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+										},
+										validate: function() {
+											var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
+												isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );
+											if ( !isValid )
+												alert( editor.lang.common.invalidLength.replace( '%1', editor.lang.common.height ).replace( '%2', 'px, %' ) ); // jshint ignore:line
+											return isValid;
+										},
+										setup: setupDimension,
+										commit: function( type, element ) {
+											var value = this.getValue();
+											if ( type == IMAGE ) {
+												if ( value && editor.activeFilter.check( 'img{width,height}' ) )
+													element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
+												else
+													element.removeStyle( 'height' );
+
+												element.removeAttribute( 'height' );
+											} else if ( type == PREVIEW ) {
+												var aMatch = value.match( regexGetSize );
+												if ( !aMatch ) {
+													var oImageOriginal = this.getDialog().originalElement;
+													if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+														element.setStyle( 'height', oImageOriginal.$.height + 'px' );
+												} else {
+													element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
+												}
+											} else if ( type == CLEANUP ) {
+												element.removeAttribute( 'height' );
+												element.removeStyle( 'height' );
+											}
+										}
+									} ]
+								},
+								{
+									id: 'ratioLock',
+									type: 'html',
+									className: 'cke_dialog_image_ratiolock',
+									style: 'margin-top:30px;width:40px;height:40px;',
+									onLoad: function() {
+										// Activate Reset button
+										var resetButton = CKEDITOR.document.getById( btnResetSizeId ),
+											ratioButton = CKEDITOR.document.getById( btnLockSizesId );
+										if ( resetButton ) {
+											resetButton.on( 'click', function( evt ) {
+												resetSize( this );
+												evt.data && evt.data.preventDefault();
+											}, this.getDialog() );
+											resetButton.on( 'mouseover', function() {
+												this.addClass( 'cke_btn_over' );
+											}, resetButton );
+											resetButton.on( 'mouseout', function() {
+												this.removeClass( 'cke_btn_over' );
+											}, resetButton );
+										}
+										// Activate (Un)LockRatio button
+										if ( ratioButton ) {
+											ratioButton.on( 'click', function( evt ) {
+												switchLockRatio( this );
+
+												var oImageOriginal = this.originalElement,
+													width = this.getValueOf( 'info', 'txtWidth' );
+
+												if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width ) {
+													var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
+													if ( !isNaN( height ) ) {
+														this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
+														updatePreview( this );
+													}
+												}
+												evt.data && evt.data.preventDefault();
+											}, this.getDialog() );
+											ratioButton.on( 'mouseover', function() {
+												this.addClass( 'cke_btn_over' );
+											}, ratioButton );
+											ratioButton.on( 'mouseout', function() {
+												this.removeClass( 'cke_btn_over' );
+											}, ratioButton );
+										}
+									},
+									html: '<div>' +
+										'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
+										'" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +
+										'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
+										'" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>' +
+										'</div>'
+								} ]
+							},
+							{
+								type: 'vbox',
+								padding: 1,
+								children: [ {
+									type: 'text',
+									id: 'txtBorder',
+									requiredContent: 'img{border-width}',
+									width: '60px',
+									label: editor.lang.image.border,
+									'default': '',
+									onKeyUp: function() {
+										updatePreview( this.getDialog() );
+									},
+									onChange: function() {
+										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+									},
+									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
+									setup: function( type, element ) {
+										if ( type == IMAGE ) {
+											var value,
+												borderStyle = element.getStyle( 'border-width' );
+											borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
+											value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
+											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
+											this.setValue( value );
+										}
+									},
+									commit: function( type, element ) {
+										var value = parseInt( this.getValue(), 10 );
+										if ( type == IMAGE || type == PREVIEW ) {
+											if ( !isNaN( value ) ) {
+												element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
+												element.setStyle( 'border-style', 'solid' );
+											} else if ( !value && this.isChanged() ) {
+												element.removeStyle( 'border' );
+											}
+
+											if ( type == IMAGE )
+												element.removeAttribute( 'border' );
+										} else if ( type == CLEANUP ) {
+											element.removeAttribute( 'border' );
+											element.removeStyle( 'border-width' );
+											element.removeStyle( 'border-style' );
+											element.removeStyle( 'border-color' );
+										}
+									}
+								},
+								{
+									type: 'text',
+									id: 'txtHSpace',
+									requiredContent: 'img{margin-left,margin-right}',
+									width: '60px',
+									label: editor.lang.image.hSpace,
+									'default': '',
+									onKeyUp: function() {
+										updatePreview( this.getDialog() );
+									},
+									onChange: function() {
+										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+									},
+									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
+									setup: function( type, element ) {
+										if ( type == IMAGE ) {
+											var value, marginLeftPx, marginRightPx,
+												marginLeftStyle = element.getStyle( 'margin-left' ),
+												marginRightStyle = element.getStyle( 'margin-right' );
+
+											marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
+											marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
+											marginLeftPx = parseInt( marginLeftStyle, 10 );
+											marginRightPx = parseInt( marginRightStyle, 10 );
+
+											value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
+											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
+
+											this.setValue( value );
+										}
+									},
+									commit: function( type, element ) {
+										var value = parseInt( this.getValue(), 10 );
+										if ( type == IMAGE || type == PREVIEW ) {
+											if ( !isNaN( value ) ) {
+												element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
+												element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
+											} else if ( !value && this.isChanged() ) {
+												element.removeStyle( 'margin-left' );
+												element.removeStyle( 'margin-right' );
+											}
+
+											if ( type == IMAGE )
+												element.removeAttribute( 'hspace' );
+										} else if ( type == CLEANUP ) {
+											element.removeAttribute( 'hspace' );
+											element.removeStyle( 'margin-left' );
+											element.removeStyle( 'margin-right' );
+										}
+									}
+								},
+								{
+									type: 'text',
+									id: 'txtVSpace',
+									requiredContent: 'img{margin-top,margin-bottom}',
+									width: '60px',
+									label: editor.lang.image.vSpace,
+									'default': '',
+									onKeyUp: function() {
+										updatePreview( this.getDialog() );
+									},
+									onChange: function() {
+										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+									},
+									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
+									setup: function( type, element ) {
+										if ( type == IMAGE ) {
+											var value, marginTopPx, marginBottomPx,
+												marginTopStyle = element.getStyle( 'margin-top' ),
+												marginBottomStyle = element.getStyle( 'margin-bottom' );
+
+											marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
+											marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
+											marginTopPx = parseInt( marginTopStyle, 10 );
+											marginBottomPx = parseInt( marginBottomStyle, 10 );
+
+											value = ( marginTopPx == marginBottomPx ) && marginTopPx;
+											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
+											this.setValue( value );
+										}
+									},
+									commit: function( type, element ) {
+										var value = parseInt( this.getValue(), 10 );
+										if ( type == IMAGE || type == PREVIEW ) {
+											if ( !isNaN( value ) ) {
+												element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
+												element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
+											} else if ( !value && this.isChanged() ) {
+												element.removeStyle( 'margin-top' );
+												element.removeStyle( 'margin-bottom' );
+											}
+
+											if ( type == IMAGE )
+												element.removeAttribute( 'vspace' );
+										} else if ( type == CLEANUP ) {
+											element.removeAttribute( 'vspace' );
+											element.removeStyle( 'margin-top' );
+											element.removeStyle( 'margin-bottom' );
+										}
+									}
+								},
+								{
+									id: 'cmbAlign',
+									requiredContent: 'img{float}',
+									type: 'select',
+									widths: [ '35%', '65%' ],
+									style: 'width:90px',
+									label: editor.lang.common.align,
+									'default': '',
+									items: [
+										[ editor.lang.common.notSet, '' ],
+										[ editor.lang.common.left, 'left' ],
+										[ editor.lang.common.right, 'right' ]
+										// Backward compatible with v2 on setup when specified as attribute value,
+										// while these values are no more available as select options.
+										//	[ editor.lang.image.alignAbsBottom , 'absBottom'],
+										//	[ editor.lang.image.alignAbsMiddle , 'absMiddle'],
+										//  [ editor.lang.image.alignBaseline , 'baseline'],
+										//  [ editor.lang.image.alignTextTop , 'text-top'],
+										//  [ editor.lang.image.alignBottom , 'bottom'],
+										//  [ editor.lang.image.alignMiddle , 'middle'],
+										//  [ editor.lang.image.alignTop , 'top']
+									],
+									onChange: function() {
+										updatePreview( this.getDialog() );
+										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+									},
+									setup: function( type, element ) {
+										if ( type == IMAGE ) {
+											var value = element.getStyle( 'float' );
+											switch ( value ) {
+												// Ignore those unrelated values.
+												case 'inherit':
+												case 'none':
+													value = '';
+											}
+
+											!value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );
+											this.setValue( value );
+										}
+									},
+									commit: function( type, element ) {
+										var value = this.getValue();
+										if ( type == IMAGE || type == PREVIEW ) {
+											if ( value )
+												element.setStyle( 'float', value );
+											else
+												element.removeStyle( 'float' );
+
+											if ( type == IMAGE ) {
+												value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
+												switch ( value ) {
+													// we should remove it only if it matches "left" or "right",
+													// otherwise leave it intact.
+													case 'left':
+													case 'right':
+														element.removeAttribute( 'align' );
+												}
+											}
+										} else if ( type == CLEANUP ) {
+											element.removeStyle( 'float' );
+										}
+									}
+								} ]
+							} ]
+						},
+						{
+							type: 'vbox',
+							height: '250px',
+							children: [ {
+								type: 'html',
+								id: 'htmlPreview',
+								style: 'width:95%;',
+								html: '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) + '<br>' +
+									'<div id="' + imagePreviewLoaderId + '" class="ImagePreviewLoader" style="display:none"><div class="loading"></div></div>' +
+									'<div class="ImagePreviewBox"><table><tr><td>' +
+										'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="' + previewLinkId + '">' +
+										'<img id="' + previewImageId + '" alt="" /></a>' +
+									// jscs:disable maximumLineLength
+										( editor.config.image_previewText || 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ' +
+											'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, ' +
+											'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) +
+									// jscs:enable maximumLineLength
+									'</td></tr></table></div></div>'
+							} ]
+						} ]
+					} ]
+				},
+				{
+					id: 'Link',
+					requiredContent: 'a[href]',
+					label: editor.lang.image.linkTab,
+					padding: 0,
+					elements: [ {
+						id: 'txtUrl',
+						type: 'text',
+						label: editor.lang.common.url,
+						style: 'width: 100%',
+						'default': '',
+						setup: function( type, element ) {
+							if ( type == LINK ) {
+								var href = element.data( 'cke-saved-href' );
+								if ( !href )
+									href = element.getAttribute( 'href' );
+								this.setValue( href );
+							}
+						},
+						commit: function( type, element ) {
+							if ( type == LINK ) {
+								if ( this.getValue() || this.isChanged() ) {
+									var url = this.getValue();
+									element.data( 'cke-saved-href', url );
+									element.setAttribute( 'href', url );
+
+									if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
+										this.getDialog().addLink = true;
+									else
+										this.getDialog().addLink = false;
+								}
+							}
+						}
+					},
+					{
+						type: 'button',
+						id: 'browse',
+						className: 'cke_dialog_image_browse',
+						filebrowser: {
+							action: 'Browse',
+							target: 'Link:txtUrl',
+							url: editor.config.filebrowserImageBrowseLinkUrl
+						},
+						style: 'float:right',
+						hidden: true,
+						label: editor.lang.common.browseServer
+					},
+					{
+						id: 'cmbTarget',
+						type: 'select',
+						requiredContent: 'a[target]',
+						label: editor.lang.common.target,
+						'default': '',
+						items: [
+							[ editor.lang.common.notSet, '' ],
+							[ editor.lang.common.targetNew, '_blank' ],
+							[ editor.lang.common.targetTop, '_top' ],
+							[ editor.lang.common.targetSelf, '_self' ],
+							[ editor.lang.common.targetParent, '_parent' ]
+						],
+						setup: function( type, element ) {
+							if ( type == LINK )
+								this.setValue( element.getAttribute( 'target' ) || '' );
+						},
+						commit: function( type, element ) {
+							if ( type == LINK ) {
+								if ( this.getValue() || this.isChanged() )
+									element.setAttribute( 'target', this.getValue() );
+							}
+						}
+					} ]
+				},
+				{
+					id: 'Upload',
+					hidden: true,
+					filebrowser: 'uploadButton',
+					label: editor.lang.image.upload,
+					elements: [ 
+                    {
+						type: 'file',
+						id: 'upload',
+						label: editor.lang.image.btnUpload,
+						style: 'height:40px',
+						size: 38
+					},
+					{
+						type: 'fileButton',
+						id: 'uploadButton',
+						filebrowser: 'info:txtUrl',
+						label: editor.lang.image.btnUpload,
+						'for': [ 'Upload', 'upload' ]
+					},
+                    {
+						type: 'button',
+						id: 'selectfile',
+						label: '选择服务器文件',
+						size: 38,
+                        onClick: function () {
+							var w = 800;
+							var h = 600;
+							var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
+							var dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
+						
+							var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
+							var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
+						
+							var systemZoom = width / window.screen.availWidth;
+							var posLeft = (width - w) / 2 / systemZoom + dualScreenLeft;
+							var posTop = (height - h) / 2 / systemZoom + dualScreenTop;
+                            window.open("./dialog/select_images.php?iseditor=1&f="+editor.name, "popUpImagesWin", "scrollbars=yes,resizable=yes,statebar=no,width=800,height=600,left=" + posLeft + ", top=" + posTop);
+                            CKEDITOR.dialog.getCurrent().hide();
+                        }
+					},
+                ]
+				},
+				{
+					id: 'advanced',
+					label: editor.lang.common.advancedTab,
+					elements: [ {
+						type: 'hbox',
+						widths: [ '50%', '25%', '25%' ],
+						children: [ {
+							type: 'text',
+							id: 'linkId',
+							requiredContent: 'img[id]',
+							label: editor.lang.common.id,
+							setup: function( type, element ) {
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'id' ) );
+							},
+							commit: function( type, element ) {
+								if ( type == IMAGE ) {
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'id', this.getValue() );
+								}
+							}
+						},
+						{
+							id: 'cmbLangDir',
+							type: 'select',
+							requiredContent: 'img[dir]',
+							style: 'width : 100px;',
+							label: editor.lang.common.langDir,
+							'default': '',
+							items: [
+								[ editor.lang.common.notSet, '' ],
+								[ editor.lang.common.langDirLtr, 'ltr' ],
+								[ editor.lang.common.langDirRtl, 'rtl' ]
+							],
+							setup: function( type, element ) {
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'dir' ) );
+							},
+							commit: function( type, element ) {
+								if ( type == IMAGE ) {
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'dir', this.getValue() );
+								}
+							}
+						},
+						{
+							type: 'text',
+							id: 'txtLangCode',
+							requiredContent: 'img[lang]',
+							label: editor.lang.common.langCode,
+							'default': '',
+							setup: function( type, element ) {
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'lang' ) );
+							},
+							commit: function( type, element ) {
+								if ( type == IMAGE ) {
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'lang', this.getValue() );
+								}
+							}
+						} ]
+					},
+					{
+						type: 'text',
+						id: 'txtGenLongDescr',
+						requiredContent: 'img[longdesc]',
+						label: editor.lang.common.longDescr,
+						setup: function( type, element ) {
+							if ( type == IMAGE )
+								this.setValue( element.getAttribute( 'longDesc' ) );
+						},
+						commit: function( type, element ) {
+							if ( type == IMAGE ) {
+								if ( this.getValue() || this.isChanged() )
+									element.setAttribute( 'longDesc', this.getValue() );
+							}
+						}
+					},
+					{
+						type: 'hbox',
+						widths: [ '50%', '50%' ],
+						children: [ {
+							type: 'text',
+							id: 'txtGenClass',
+							requiredContent: 'img(cke-xyz)', // Random text like 'xyz' will check if all are allowed.
+							label: editor.lang.common.cssClass,
+							'default': '',
+							setup: function( type, element ) {
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'class' ) );
+							},
+							commit: function( type, element ) {
+								if ( type == IMAGE ) {
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'class', this.getValue() );
+								}
+							}
+						},
+						{
+							type: 'text',
+							id: 'txtGenTitle',
+							requiredContent: 'img[title]',
+							label: editor.lang.common.advisoryTitle,
+							'default': '',
+							onChange: function() {
+								updatePreview( this.getDialog() );
+							},
+							setup: function( type, element ) {
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'title' ) );
+							},
+							commit: function( type, element ) {
+								if ( type == IMAGE ) {
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'title', this.getValue() );
+								} else if ( type == PREVIEW )
+									element.setAttribute( 'title', this.getValue() );
+								else if ( type == CLEANUP ) {
+									element.removeAttribute( 'title' );
+								}
+							}
+						} ]
+					},
+					{
+						type: 'text',
+						id: 'txtdlgGenStyle',
+						requiredContent: 'img{cke-xyz}', // Random text like 'xyz' will check if all are allowed.
+						label: editor.lang.common.cssStyle,
+						validate: CKEDITOR.dialog.validate.inlineStyle( editor.lang.common.invalidInlineStyle ),
+						'default': '',
+						setup: function( type, element ) {
+							if ( type == IMAGE ) {
+								var genStyle = element.getAttribute( 'style' );
+								if ( !genStyle && element.$.style.cssText )
+									genStyle = element.$.style.cssText;
+								this.setValue( genStyle );
+
+								var height = element.$.style.height,
+									width = element.$.style.width,
+									aMatchH = ( height ? height : '' ).match( regexGetSize ),
+									aMatchW = ( width ? width : '' ).match( regexGetSize );
+
+								this.attributesInStyle = {
+									height: !!aMatchH,
+									width: !!aMatchW
+								};
+							}
+						},
+						onChange: function() {
+							commitInternally.call(
+								this, [
+									'info:cmbFloat',
+									'info:cmbAlign',
+									'info:txtVSpace',
+									'info:txtHSpace',
+									'info:txtBorder',
+									'info:txtWidth',
+									'info:txtHeight'
+								]
+							);
+							updatePreview( this );
+						},
+						commit: function( type, element ) {
+							if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
+								element.setAttribute( 'style', this.getValue() );
+
+						}
+					} ]
+				} ]
+			};
+		};
+
+	CKEDITOR.dialog.add( 'image', function( editor ) {
+		return imageDialog( editor, 'image' );
+	} );
+
+	CKEDITOR.dialog.add( 'imagebutton', function( editor ) {
+		return imageDialog( editor, 'imagebutton' );
+	} );
 } )();
\ No newline at end of file