From c990e0894518c48978d293423348fcd9428e72a7 Mon Sep 17 00:00:00 2001
From: TS-QD1 <tskj_pc1@163.com>
Date: Fri, 16 Jun 2023 18:05:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=96=87=E7=AB=A0=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E6=8F=92=E4=BB=B6=E5=92=8C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/content/save-category.html      | 264 ++++++++++------
 .../resources/templates/content/save.html     | 269 ++++++++++++-----
 .../templates/content/update-category.html    | 274 +++++++++++------
 .../resources/templates/content/update.html   | 282 ++++++++++++------
 4 files changed, 742 insertions(+), 347 deletions(-)
diff --git a/module-article/src/main/resources/templates/content/save-category.html b/module-article/src/main/resources/templates/content/save-category.html
index 9f69acd5..74ef948e 100644
--- a/module-article/src/main/resources/templates/content/save-category.html
+++ b/module-article/src/main/resources/templates/content/save-category.html
@@ -10,8 +10,70 @@
     <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
     <link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css" media="all">
+    <style>
+        ul, ol {list-style: unset;}
+        ul li, ol li {list-style-type: unset;}
+        :root {
+            --ck-sample-base-spacing: 2em;
+            --ck-sample-color-white: #fff;
+            --ck-sample-color-green: #279863;
+        }
+        .document-editor #editor {
+            background: var(--ck-sample-color-white);
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+        }
+        .document-editor .ck.ck-editor {
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .ck.ck-content {
+            font-size: 1em;
+            line-height: 1.6em;
+            margin-bottom: 0.8em;
+            min-height: 200px;
+            padding: 1.5em 2em;
+        }
+        /* --------- MAIN / DOCUMENT EDITOR --------------------------------------------------------------- */
+        .document-editor {
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+            border-radius: 2px;
+            max-height: 700px;
+            display: flex;
+            flex-flow: column nowrap;
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .toolbar-container {
+            z-index: 1;
+            position: relative;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+        .document-editor .toolbar-container .ck.ck-toolbar {
+            border-top-width: 0;
+            border-left-width: 0;
+            border-right-width: 0;
+            border-radius: 0;
+        }
+        .document-editor .content-container {
+            padding: var(--ck-sample-base-spacing);
+            background: #eee;
+            overflow-y: scroll;
+        }
+        .document-editor .content-container #editor {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            width: 15.8cm;
+            min-height: 21cm;
+            padding: 1cm 1cm 2cm;
+            margin: 0 auto;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+    </style>
 </head>
-<body>
+<body style="overflow: hidden;">
 <div class="layui-fluid layui-anim layui-anim-fadein">
     <div class="layui-card">
         <div class="layui-card-header">
@@ -22,108 +84,100 @@
         </div>
         <div class="layui-card-body" style="padding: 15px;">
             <form class="layui-form layui-form-pane" lay-filter="dataForm">
-                <div class="layui-form-item">
-                    <input type="hidden" id="categoryId" name="categoryId" th:value="${categoryId}">
-                    <blockquote class="layui-elem-quote" th:text="${categoryTitle}"></blockquote>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
+                <div class="layui-row layui-col-space10">
+                    <div class="layui-col-xs8">
+                        <div class="document-editor">
+                            <div class="toolbar-container"></div>
+                            <div class="content-container">
+                                <div id="editor"></div>
+                                <textarea id="content" name="content" style="display: none;"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs4" id="prop">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">标题</label>
+                            <input type="hidden" id="categoryId" name="categoryId" th:value="${categoryId}">
+                            <blockquote class="layui-elem-quote" th:text="${categoryTitle}"></blockquote>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">标题*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="title" name="title" class="layui-input" value="" placeholder="请输入标题" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                         <div class="layui-form-item">
                             <label class="layui-form-label">子标题</label>
                             <div class="layui-input-block">
                                 <input type="text" id="subTitle" name="subTitle" class="layui-input" value="" placeholder="请输入子标题" >
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">概述</label>
-                    <div class="layui-input-block">
-                        <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
-                    </div>
-                </div>
-                <div class="layui-form-item">
-                    <label class="layui-form-label">外链地址</label>
-                    <div class="layui-input-block">
-                        <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
-                    </div>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">概述</label>
+                            <div class="layui-input-block">
+                                <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
+                            </div>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">外链地址</label>
+                            <div class="layui-input-block">
+                                <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
+                            </div>
+                        </div>
                         <div class="layui-form-item">
                             <label class="layui-form-label">来源</label>
                             <div class="layui-input-block">
                                 <input type="text" id="source" name="source" class="layui-input" value="" placeholder="请输入来源" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
                             <label class="layui-form-label">作者</label>
                             <div class="layui-input-block">
                                 <input type="text" id="author" name="author" class="layui-input" value="" placeholder="请输入作者" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">发布时间</label>
+                            <label class="layui-form-label">发布时间*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="publishDate" name="publishDate" class="layui-input" value="" placeholder="请选择发布时间" readonly style="cursor: pointer;" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item" pane>
-                            <label class="layui-form-label">是否发布</label>
+                            <label class="layui-form-label">是否发布*</label>
                             <div class="layui-input-block">
                                 <input type="radio" name="isPublish" value="1" title="是" checked>
                                 <input type="radio" name="isPublish" value="0" title="否">
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">封面图片</label>
-                    <div class="layui-input-block">
-                        <input type="hidden" id="coverPhotos" name="coverPhotos">
-                        <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
-                        <script id="coverPhotosFileDownload" type="text/html">
-                            {{# var fileName = 'coverPhotos'; }}
-                            {{# if(d[fileName].length > 0) { }}
-                            {{#    var files = d[fileName];}}
-                            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
-                            <div class="upload-image-box">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">封面图片</label>
+                            <div class="layui-input-block">
+                                <input type="hidden" id="coverPhotos" name="coverPhotos">
+                                <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
+                                <script id="coverPhotosFileDownload" type="text/html">
+                                    {{# var fileName = 'coverPhotos'; }}
+                                    {{# if(d[fileName].length > 0) { }}
+                                    {{#    var files = d[fileName];}}
+                                    {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+                                    <div class="upload-image-box">
                                 <span class="upload-image-span">
                                     <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
                                 </span>
-                                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
-                                    <i class="fa fa-trash-o"></i>
-                                </a>
+                                        <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
+                                            <i class="fa fa-trash-o"></i>
+                                        </a>
+                                    </div>
+                                    {{#    } }}
+                                    {{# } }}
+                                    {{# if(d[fileName].length < 3) { }}
+                                    <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                                        <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
+                                            <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                                        </a>
+                                    </div>
+                                    {{# } }}
+                                </script>
                             </div>
-                            {{#    } }}
-                            {{# } }}
-                            {{# if(d[fileName].length < 3) { }}
-                            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
-                                <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
-                                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
-                                </a>
-                            </div>
-                            {{# } }}
-                        </script>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <div class="layui-input-block">
-                        <script id="content" name="content" type="text/plain"></script>
+                        </div>
                     </div>
                 </div>
                 <div class="layui-form-item layui-layout-admin">
@@ -138,8 +192,8 @@
         </div>
     </div>
 </div>
-<script src="assets/js/vendor/ueditor/ueditor.config.js"></script>
-<script src="assets/js/vendor/ueditor/ueditor.all.js"></script>
+<script src="assets/js/vendor/ckeditor/ckeditor.js"></script>
+<script src="assets/js/vendor/ckeditor/translations/zh-cn.js"></script>
 <script src="assets/js/vendor/viewer/viewer.min.js"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script>
@@ -149,6 +203,7 @@
         index: 'lib/index' //主入口模块
     }).use(['index', 'form', 'laydate', 'laytpl'], function(){
         var $ = layui.$;
+        var $win = $(window);
         var form = layui.form;
         var laytpl = layui.laytpl;
         var laydate = layui.laydate;
@@ -159,6 +214,18 @@
             parent.layer.close(parent.layer.getFrameIndex(window.name));
         }
 
+        function resize() {
+            let height = $win.height();
+            $('.content-container').css({
+                height: (height - 260) + 'px',
+            })
+            $('#prop').css({
+                height: (height - 150) + 'px',
+                overflow: 'auto'
+            })
+        }
+        resize();
+
         function refreshDownloadTemplet(fileName, file) {
             var dataRander = {};
             dataRander[fileName] = file;
@@ -259,31 +326,59 @@
 
         // 初始化正文富文本
         function initContentRichText() {
-            var editor = UE.getEditor('content', {autoHeightEnabled: false});
-            editor.ready(function() {
-                editor.setHeight(400);
-            });
-            ueEditorObj['content'] = editor;
-        }
+            DecoupledEditor.create(document.querySelector('#editor'), {
+                language: 'zh-cn',
+                toolbar: ['undo', 'redo', '|',
+                    'fontColor', 'fontBackgroundColor', 'highlight', '|',
+                    'alignment', '|',
+                    'bold', 'italic', 'link', 'blockQuote', '|',
+                    'bulletedList', 'numberedList', '|',
+                    'uploadImage', 'insertTable', '|',
+                    'sourceEditing'
+                ],
+            }).then(editor => {
+                const toolbarContainer = document.querySelector('.toolbar-container');
+                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+                editor.model.document.on('change:data', function() {
+                    let content = editor.getData();
+                    $('#content').val(content);
+                })
 
-        // 初始化文章类别联表
-        function initCategory(){
-            top.restAjax.get(top.restAjax.path('api/category/list', []), {}, null, function(code, data, args) {
-                laytpl(document.getElementById('categoryIdTemplate').innerHTML).render(data, function(html) {
-                    document.getElementById('categoryIdTemplateBox').innerHTML = html;
-                });
-                form.render('select', 'categoryIdTemplateBox');
-            }, function(code, data) {
-                top.dialog.msg(data.msg);
+                editor.plugins.get("FileRepository").createUploadAdapter = function(loader) {
+                    return {
+                        upload: function () {
+                            // 因为编辑器插件需要返回一个promise对象
+                            return new Promise(function (resolve, reject) {
+                                // 读取选中的文件
+                                loader.file.then(function (file) {
+                                    // 我们通过formData进行图片上传
+                                    let form = new FormData();
+                                    form.append('image', file);
+                                    top.restAjax.postFile('api/file/v2/upload-image', form, null, function (code, data) {
+                                        // 定义插件返回格式
+                                        resolve({
+                                            default: 'route/file/v2/download/true/'+ data.data.fileId
+                                        });
+                                    }, function (code, data) {
+                                        reject(data.msg);
+                                    });
+                                })
+                            });
+                        },
+                        abort: function () {
+                            // 图片删除方法，可以调用后端api进行文件删除
+                        }
+                    }
+                };
+            }).catch(error => {
+                console.log(error)
             });
         }
 
-
         // 初始化内容
         function initData() {
             initPublishDateDate();
             initContentRichText();
-            initCategory();
         }
         initData();
 
@@ -292,7 +387,6 @@
             top.dialog.confirm(top.dataMessage.commit, function(index) {
                 top.dialog.close(index);
                 var loadLayerIndex;
-                formData.field['content'] = ueEditorObj['content'].getContent();
                 top.restAjax.post(top.restAjax.path('api/content/save', []), formData.field, null, function(code, data) {
                     var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
                         time: 0,
diff --git a/module-article/src/main/resources/templates/content/save.html b/module-article/src/main/resources/templates/content/save.html
index f6173bfe..626ee520 100644
--- a/module-article/src/main/resources/templates/content/save.html
+++ b/module-article/src/main/resources/templates/content/save.html
@@ -10,8 +10,70 @@
     <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
     <link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css" media="all">
+    <style>
+        ul, ol {list-style: unset;}
+        ul li, ol li {list-style-type: unset;}
+        :root {
+            --ck-sample-base-spacing: 2em;
+            --ck-sample-color-white: #fff;
+            --ck-sample-color-green: #279863;
+        }
+        .document-editor #editor {
+            background: var(--ck-sample-color-white);
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+        }
+        .document-editor .ck.ck-editor {
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .ck.ck-content {
+            font-size: 1em;
+            line-height: 1.6em;
+            margin-bottom: 0.8em;
+            min-height: 200px;
+            padding: 1.5em 2em;
+        }
+        /* --------- MAIN / DOCUMENT EDITOR --------------------------------------------------------------- */
+        .document-editor {
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+            border-radius: 2px;
+            max-height: 700px;
+            display: flex;
+            flex-flow: column nowrap;
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .toolbar-container {
+            z-index: 1;
+            position: relative;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+        .document-editor .toolbar-container .ck.ck-toolbar {
+            border-top-width: 0;
+            border-left-width: 0;
+            border-right-width: 0;
+            border-radius: 0;
+        }
+        .document-editor .content-container {
+            padding: var(--ck-sample-base-spacing);
+            background: #eee;
+            overflow-y: scroll;
+        }
+        .document-editor .content-container #editor {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            width: 15.8cm;
+            min-height: 21cm;
+            padding: 1cm 1cm 2cm;
+            margin: 0 auto;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+    </style>
 </head>
-<body>
+<body style="overflow: hidden;">
 <div class="layui-fluid layui-anim layui-anim-fadein">
     <div class="layui-card">
         <div class="layui-card-header">
@@ -22,116 +84,108 @@
         </div>
         <div class="layui-card-body" style="padding: 15px;">
             <form class="layui-form layui-form-pane" lay-filter="dataForm">
-                <div class="layui-form-item">
-                    <label class="layui-form-label">文章类别</label>
-                    <div class="layui-input-block layui-form" id="categoryIdTemplateBox" lay-filter="categoryIdTemplateBox"></div>
-                    <script id="categoryIdTemplate" type="text/html">
-                        <select name="categoryId" lay-verify="required" lay-search>
-                            <option value="">选择文章类别</option>
-                            {{# for(var i = 0, item; item = d[i++];) { }}
-                            <option value="{{item.categoryId}}">{{item.title}}</option>
-                            {{# } }}
-                        </select>
-                    </script>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
+                <div class="layui-row layui-col-space10">
+                    <div class="layui-col-xs8">
+                        <div class="document-editor">
+                            <div class="toolbar-container"></div>
+                            <div class="content-container">
+                                <div id="editor"></div>
+                                <textarea id="content" name="content" style="display: none;"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs4" id="prop">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">标题</label>
+                            <label class="layui-form-label">文章类别*</label>
+                            <div class="layui-input-block layui-form" id="categoryIdTemplateBox" lay-filter="categoryIdTemplateBox"></div>
+                            <script id="categoryIdTemplate" type="text/html">
+                                <select name="categoryId" lay-verify="required" lay-search>
+                                    <option value="">选择文章类别</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.categoryId}}">{{item.title}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">标题*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="title" name="title" class="layui-input" value="" placeholder="请输入标题" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                         <div class="layui-form-item">
                             <label class="layui-form-label">子标题</label>
                             <div class="layui-input-block">
                                 <input type="text" id="subTitle" name="subTitle" class="layui-input" value="" placeholder="请输入子标题" >
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">概述</label>
-                    <div class="layui-input-block">
-                        <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
-                    </div>
-                </div>
-                <div class="layui-form-item">
-                    <label class="layui-form-label">外链地址</label>
-                    <div class="layui-input-block">
-                        <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
-                    </div>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">概述</label>
+                            <div class="layui-input-block">
+                                <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
+                            </div>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">外链地址</label>
+                            <div class="layui-input-block">
+                                <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
+                            </div>
+                        </div>
                         <div class="layui-form-item">
                             <label class="layui-form-label">来源</label>
                             <div class="layui-input-block">
                                 <input type="text" id="source" name="source" class="layui-input" value="" placeholder="请输入来源" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
                             <label class="layui-form-label">作者</label>
                             <div class="layui-input-block">
                                 <input type="text" id="author" name="author" class="layui-input" value="" placeholder="请输入作者" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">发布时间</label>
+                            <label class="layui-form-label">发布时间*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="publishDate" name="publishDate" class="layui-input" value="" placeholder="请选择发布时间" readonly style="cursor: pointer;" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item" pane>
-                            <label class="layui-form-label">是否发布</label>
+                            <label class="layui-form-label">是否发布*</label>
                             <div class="layui-input-block">
                                 <input type="radio" name="isPublish" value="1" title="是" checked>
                                 <input type="radio" name="isPublish" value="0" title="否">
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">封面图片</label>
-                    <div class="layui-input-block">
-                        <input type="hidden" id="coverPhotos" name="coverPhotos">
-                        <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
-                        <script id="coverPhotosFileDownload" type="text/html">
-                            {{# var fileName = 'coverPhotos'; }}
-                            {{# if(d[fileName].length > 0) { }}
-                            {{#    var files = d[fileName];}}
-                            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
-                            <div class="upload-image-box">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">封面图片</label>
+                            <div class="layui-input-block">
+                                <input type="hidden" id="coverPhotos" name="coverPhotos">
+                                <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
+                                <script id="coverPhotosFileDownload" type="text/html">
+                                    {{# var fileName = 'coverPhotos'; }}
+                                    {{# if(d[fileName].length > 0) { }}
+                                    {{#    var files = d[fileName];}}
+                                    {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+                                    <div class="upload-image-box">
                                 <span class="upload-image-span">
                                     <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
                                 </span>
-                                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
-                                    <i class="fa fa-trash-o"></i>
-                                </a>
+                                        <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
+                                            <i class="fa fa-trash-o"></i>
+                                        </a>
+                                    </div>
+                                    {{#    } }}
+                                    {{# } }}
+                                    {{# if(d[fileName].length < 3) { }}
+                                    <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                                        <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
+                                            <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                                        </a>
+                                    </div>
+                                    {{# } }}
+                                </script>
                             </div>
-                            {{#    } }}
-                            {{# } }}
-                            {{# if(d[fileName].length < 3) { }}
-                            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
-                                <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
-                                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
-                                </a>
-                            </div>
-                            {{# } }}
-                        </script>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <div class="layui-input-block">
-                        <script id="content" name="content" type="text/plain"></script>
+                        </div>
                     </div>
                 </div>
                 <div class="layui-form-item layui-layout-admin">
@@ -146,8 +200,8 @@
         </div>
     </div>
 </div>
-<script src="assets/js/vendor/ueditor/ueditor.config.js"></script>
-<script src="assets/js/vendor/ueditor/ueditor.all.js"></script>
+<script src="assets/js/vendor/ckeditor/ckeditor.js"></script>
+<script src="assets/js/vendor/ckeditor/translations/zh-cn.js"></script>
 <script src="assets/js/vendor/viewer/viewer.min.js"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script>
@@ -157,16 +211,28 @@
         index: 'lib/index' //主入口模块
     }).use(['index', 'form', 'laydate', 'laytpl'], function(){
         var $ = layui.$;
+        var $win = $(window);
         var form = layui.form;
         var laytpl = layui.laytpl;
         var laydate = layui.laydate;
-        var ueEditorObj = {};
         var viewerObj = {};
 
         function closeBox() {
             parent.layer.close(parent.layer.getFrameIndex(window.name));
         }
 
+        function resize() {
+            let height = $win.height();
+            $('.content-container').css({
+                height: (height - 260) + 'px',
+            })
+            $('#prop').css({
+                height: (height - 150) + 'px',
+                overflow: 'auto'
+            })
+        }
+        resize();
+
         function refreshDownloadTemplet(fileName, file) {
             var dataRander = {};
             dataRander[fileName] = file;
@@ -267,11 +333,53 @@
 
         // 初始化正文富文本
         function initContentRichText() {
-            var editor = UE.getEditor('content', {autoHeightEnabled: false});
-            editor.ready(function() {
-                editor.setHeight(400);
+            DecoupledEditor.create(document.querySelector('#editor'), {
+                language: 'zh-cn',
+                toolbar: ['undo', 'redo', '|',
+                    'fontColor', 'fontBackgroundColor', 'highlight', '|',
+                    'alignment', '|',
+                    'bold', 'italic', 'link', 'blockQuote', '|',
+                    'bulletedList', 'numberedList', '|',
+                    'uploadImage', 'insertTable', '|',
+                    'sourceEditing'
+                ],
+            }).then(editor => {
+                const toolbarContainer = document.querySelector('.toolbar-container');
+                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+                editor.model.document.on('change:data', function() {
+                    let content = editor.getData();
+                    $('#content').val(content);
+                })
+
+                editor.plugins.get("FileRepository").createUploadAdapter = function(loader) {
+                    return {
+                        upload: function () {
+                            // 因为编辑器插件需要返回一个promise对象
+                            return new Promise(function (resolve, reject) {
+                                // 读取选中的文件
+                                loader.file.then(function (file) {
+                                    // 我们通过formData进行图片上传
+                                    let form = new FormData();
+                                    form.append('image', file);
+                                    top.restAjax.postFile('api/file/v2/upload-image', form, null, function (code, data) {
+                                        // 定义插件返回格式
+                                        resolve({
+                                            default: 'route/file/v2/download/true/'+ data.data.fileId
+                                        });
+                                    }, function (code, data) {
+                                        reject(data.msg);
+                                    });
+                                })
+                            });
+                        },
+                        abort: function () {
+                            // 图片删除方法，可以调用后端api进行文件删除
+                        }
+                    }
+                };
+            }).catch(error => {
+                console.log(error)
             });
-            ueEditorObj['content'] = editor;
         }
 
         // 初始化文章类别联表
@@ -300,7 +408,6 @@
             top.dialog.confirm(top.dataMessage.commit, function(index) {
                 top.dialog.close(index);
                 var loadLayerIndex;
-                formData.field['content'] = ueEditorObj['content'].getContent();
                 top.restAjax.post(top.restAjax.path('api/content/save', []), formData.field, null, function(code, data) {
                     var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
                         time: 0,
diff --git a/module-article/src/main/resources/templates/content/update-category.html b/module-article/src/main/resources/templates/content/update-category.html
index 078654c9..749ed20a 100644
--- a/module-article/src/main/resources/templates/content/update-category.html
+++ b/module-article/src/main/resources/templates/content/update-category.html
@@ -10,8 +10,70 @@
     <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
     <link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css" media="all">
+    <style>
+        ul, ol {list-style: unset;}
+        ul li, ol li {list-style-type: unset;}
+        :root {
+            --ck-sample-base-spacing: 2em;
+            --ck-sample-color-white: #fff;
+            --ck-sample-color-green: #279863;
+        }
+        .document-editor #editor {
+            background: var(--ck-sample-color-white);
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+        }
+        .document-editor .ck.ck-editor {
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .ck.ck-content {
+            font-size: 1em;
+            line-height: 1.6em;
+            margin-bottom: 0.8em;
+            min-height: 200px;
+            padding: 1.5em 2em;
+        }
+        /* --------- MAIN / DOCUMENT EDITOR --------------------------------------------------------------- */
+        .document-editor {
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+            border-radius: 2px;
+            max-height: 700px;
+            display: flex;
+            flex-flow: column nowrap;
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .toolbar-container {
+            z-index: 1;
+            position: relative;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+        .document-editor .toolbar-container .ck.ck-toolbar {
+            border-top-width: 0;
+            border-left-width: 0;
+            border-right-width: 0;
+            border-radius: 0;
+        }
+        .document-editor .content-container {
+            padding: var(--ck-sample-base-spacing);
+            background: #eee;
+            overflow-y: scroll;
+        }
+        .document-editor .content-container #editor {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            width: 15.8cm;
+            min-height: 21cm;
+            padding: 1cm 1cm 2cm;
+            margin: 0 auto;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+    </style>
 </head>
-<body>
+<body style="overflow: hidden;">
 <div class="layui-fluid layui-anim layui-anim-fadein">
     <div class="layui-card">
         <div class="layui-card-header">
@@ -22,108 +84,100 @@
         </div>
         <div class="layui-card-body" style="padding: 15px;">
             <form class="layui-form layui-form-pane" lay-filter="dataForm">
-                <div class="layui-form-item">
-                    <input type="hidden" id="categoryId" name="categoryId" th:value="${categoryId}">
-                    <blockquote class="layui-elem-quote" th:text="${categoryTitle}"></blockquote>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
+                <div class="layui-row layui-col-space10">
+                    <div class="layui-col-xs8">
+                        <div class="document-editor">
+                            <div class="toolbar-container"></div>
+                            <div class="content-container">
+                                <div id="editor"></div>
+                                <textarea id="content" name="content" style="display: none;"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs4" id="prop">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">标题</label>
+                            <input type="hidden" id="categoryId" name="categoryId" th:value="${categoryId}">
+                            <blockquote class="layui-elem-quote" th:text="${categoryTitle}"></blockquote>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">标题*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="title" name="title" class="layui-input" value="" placeholder="请输入标题" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                         <div class="layui-form-item">
                             <label class="layui-form-label">子标题</label>
                             <div class="layui-input-block">
                                 <input type="text" id="subTitle" name="subTitle" class="layui-input" value="" placeholder="请输入子标题" >
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">概述</label>
-                    <div class="layui-input-block">
-                        <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
-                    </div>
-                </div>
-                <div class="layui-form-item">
-                    <label class="layui-form-label">外链地址</label>
-                    <div class="layui-input-block">
-                        <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
-                    </div>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">概述</label>
+                            <div class="layui-input-block">
+                                <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
+                            </div>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">外链地址</label>
+                            <div class="layui-input-block">
+                                <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
+                            </div>
+                        </div>
                         <div class="layui-form-item">
                             <label class="layui-form-label">来源</label>
                             <div class="layui-input-block">
                                 <input type="text" id="source" name="source" class="layui-input" value="" placeholder="请输入来源" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
                             <label class="layui-form-label">作者</label>
                             <div class="layui-input-block">
                                 <input type="text" id="author" name="author" class="layui-input" value="" placeholder="请输入作者" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">发布时间</label>
+                            <label class="layui-form-label">发布时间*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="publishDate" name="publishDate" class="layui-input" value="" placeholder="请选择发布时间" readonly style="cursor: pointer;" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item" pane>
-                            <label class="layui-form-label">是否发布</label>
+                            <label class="layui-form-label">是否发布*</label>
                             <div class="layui-input-block">
-                                <input type="radio" name="isPublish" value="1" title="是">
+                                <input type="radio" name="isPublish" value="1" title="是" checked>
                                 <input type="radio" name="isPublish" value="0" title="否">
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">封面图片</label>
-                    <div class="layui-input-block">
-                        <input type="hidden" id="coverPhotos" name="coverPhotos">
-                        <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
-                        <script id="coverPhotosFileDownload" type="text/html">
-                            {{# var fileName = 'coverPhotos'; }}
-                            {{# if(d[fileName].length > 0) { }}
-                            {{#    var files = d[fileName];}}
-                            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
-                            <div class="upload-image-box">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">封面图片</label>
+                            <div class="layui-input-block">
+                                <input type="hidden" id="coverPhotos" name="coverPhotos">
+                                <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
+                                <script id="coverPhotosFileDownload" type="text/html">
+                                    {{# var fileName = 'coverPhotos'; }}
+                                    {{# if(d[fileName].length > 0) { }}
+                                    {{#    var files = d[fileName];}}
+                                    {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+                                    <div class="upload-image-box">
                                 <span class="upload-image-span">
                                     <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
                                 </span>
-                                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
-                                    <i class="fa fa-trash-o"></i>
-                                </a>
+                                        <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
+                                            <i class="fa fa-trash-o"></i>
+                                        </a>
+                                    </div>
+                                    {{#    } }}
+                                    {{# } }}
+                                    {{# if(d[fileName].length < 3) { }}
+                                    <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                                        <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
+                                            <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                                        </a>
+                                    </div>
+                                    {{# } }}
+                                </script>
                             </div>
-                            {{#    } }}
-                            {{# } }}
-                            {{# if(d[fileName].length < 3) { }}
-                            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
-                                <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
-                                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
-                                </a>
-                            </div>
-                            {{# } }}
-                        </script>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <div class="layui-input-block">
-                        <script id="content" name="content" type="text/plain"></script>
+                        </div>
                     </div>
                 </div>
                 <div class="layui-form-item layui-layout-admin">
@@ -138,8 +192,8 @@
         </div>
     </div>
 </div>
-<script src="assets/js/vendor/ueditor/ueditor.config.js"></script>
-<script src="assets/js/vendor/ueditor/ueditor.all.js"></script>
+<script src="assets/js/vendor/ckeditor/ckeditor.js"></script>
+<script src="assets/js/vendor/ckeditor/translations/zh-cn.js"></script>
 <script src="assets/js/vendor/viewer/viewer.min.js"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script>
@@ -149,6 +203,7 @@
         index: 'lib/index' //主入口模块
     }).use(['index', 'form', 'laydate', 'laytpl'], function(){
         var $ = layui.$;
+        var $win = $(window);
         var form = layui.form;
         var laytpl = layui.laytpl;
         var laydate = layui.laydate;
@@ -161,6 +216,18 @@
             parent.layer.close(parent.layer.getFrameIndex(window.name));
         }
 
+        function resize() {
+            let height = $win.height();
+            $('.content-container').css({
+                height: (height - 260) + 'px',
+            })
+            $('#prop').css({
+                height: (height - 150) + 'px',
+                overflow: 'auto'
+            })
+        }
+        resize();
+
         function refreshDownloadTemplet(fileName, file) {
             var dataRander = {};
             dataRander[fileName] = file;
@@ -260,32 +327,55 @@
 
         // 初始化正文富文本
         function initContentRichText(value) {
-            var editor = UE.getEditor('content', {autoHeightEnabled: false});
-            editor.ready(function() {
-                editor.setHeight(400);
-                editor.setContent(value);
-            });
-            ueEditorObj['content'] = editor;
-        }
-
-        // 初始化文章类别联表
-        function initArticleCategoryIdJoinTable(joinValue){
-            top.restAjax.get(top.restAjax.path('api/category/list', []), {}, null, function(code, data) {
-                laytpl(document.getElementById('categoryIdJoinTemplate').innerHTML).render(data, function(html) {
-                    document.getElementById('categoryIdJoinTemplateBox').innerHTML = html;
-                });
-                form.render('select', 'categoryIdJoinTemplateBox');
-
-                // 初始化选择
-                var formSelectData = {};
-                formSelectData['categoryId'] = joinValue;
-                form.val('dataForm', formSelectData);
-            }, function(code, data) {
-                top.dialog.msg(data.msg);
+            DecoupledEditor.create(document.querySelector('#editor'), {
+                language: 'zh-cn',
+                toolbar: ['undo', 'redo', '|',
+                    'fontColor', 'fontBackgroundColor', 'highlight', '|',
+                    'alignment', '|',
+                    'bold', 'italic', 'link', 'blockQuote', '|',
+                    'bulletedList', 'numberedList', '|',
+                    'uploadImage', 'insertTable', '|',
+                    'sourceEditing'
+                ],
+            }).then(editor => {
+                const toolbarContainer = document.querySelector('.toolbar-container');
+                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+                editor.setData(value);
+                editor.model.document.on('change:data', function() {
+                    let content = editor.getData();
+                    $('#content').val(content);
+                })
+                editor.plugins.get("FileRepository").createUploadAdapter = function(loader) {
+                    return {
+                        upload: function () {
+                            // 因为编辑器插件需要返回一个promise对象
+                            return new Promise(function (resolve, reject) {
+                                // 读取选中的文件
+                                loader.file.then(function (file) {
+                                    // 我们通过formData进行图片上传
+                                    let form = new FormData();
+                                    form.append('image', file);
+                                    top.restAjax.postFile('api/file/v2/upload-image', form, null, function (code, data) {
+                                        // 定义插件返回格式
+                                        resolve({
+                                            default: 'route/file/v2/download/true/'+ data.data.fileId
+                                        });
+                                    }, function (code, data) {
+                                        reject(data.msg);
+                                    });
+                                })
+                            });
+                        },
+                        abort: function () {
+                            // 图片删除方法，可以调用后端api进行文件删除
+                        }
+                    }
+                };
+            }).catch(error => {
+                console.log(error)
             });
         }
 
-
         // 初始化内容
         function initData() {
             var loadLayerIndex;
@@ -299,7 +389,6 @@
                 initCoverPhotosUploadFile();
                 initPublishDateDate();
                 initContentRichText(data['content']);
-                initArticleCategoryIdJoinTable(data['categoryId']);
             }, function(code, data) {
                 top.dialog.msg(data.msg);
             }, function() {
@@ -315,7 +404,6 @@
             top.dialog.confirm(top.dataMessage.commit, function(index) {
                 top.dialog.close(index);
                 var loadLayerIndex;
-                formData.field['content'] = ueEditorObj['content'].getContent();
                 top.restAjax.put(top.restAjax.path('api/content/update/{contentId}', [contentId]), formData.field, null, function(code, data) {
                     var layerIndex = top.dialog.msg(top.dataMessage.updateSuccess, {
                         time: 0,
diff --git a/module-article/src/main/resources/templates/content/update.html b/module-article/src/main/resources/templates/content/update.html
index 0fcc1da9..3b33df9a 100644
--- a/module-article/src/main/resources/templates/content/update.html
+++ b/module-article/src/main/resources/templates/content/update.html
@@ -9,9 +9,71 @@
     <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
     <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
-    <link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css" media="all">
+    <link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css" media="all">\
+    <style>
+        ul, ol {list-style: unset;}
+        ul li, ol li {list-style-type: unset;}
+        :root {
+            --ck-sample-base-spacing: 2em;
+            --ck-sample-color-white: #fff;
+            --ck-sample-color-green: #279863;
+        }
+        .document-editor #editor {
+            background: var(--ck-sample-color-white);
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+        }
+        .document-editor .ck.ck-editor {
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .ck.ck-content {
+            font-size: 1em;
+            line-height: 1.6em;
+            margin-bottom: 0.8em;
+            min-height: 200px;
+            padding: 1.5em 2em;
+        }
+        /* --------- MAIN / DOCUMENT EDITOR --------------------------------------------------------------- */
+        .document-editor {
+            border: 1px solid #DFE4E6;
+            border-bottom-color: #cdd0d2;
+            border-right-color: #cdd0d2;
+            border-radius: 2px;
+            max-height: 700px;
+            display: flex;
+            flex-flow: column nowrap;
+            box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+        }
+        .document-editor .toolbar-container {
+            z-index: 1;
+            position: relative;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+        .document-editor .toolbar-container .ck.ck-toolbar {
+            border-top-width: 0;
+            border-left-width: 0;
+            border-right-width: 0;
+            border-radius: 0;
+        }
+        .document-editor .content-container {
+            padding: var(--ck-sample-base-spacing);
+            background: #eee;
+            overflow-y: scroll;
+        }
+        .document-editor .content-container #editor {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            width: 15.8cm;
+            min-height: 21cm;
+            padding: 1cm 1cm 2cm;
+            margin: 0 auto;
+            box-shadow: 2px 2px 1px rgba(0,0,0,.05);
+        }
+    </style>
 </head>
-<body>
+<body style="overflow: hidden;">
 <div class="layui-fluid layui-anim layui-anim-fadein">
     <div class="layui-card">
         <div class="layui-card-header">
@@ -22,116 +84,108 @@
         </div>
         <div class="layui-card-body" style="padding: 15px;">
             <form class="layui-form layui-form-pane" lay-filter="dataForm">
-                <div class="layui-form-item">
-                    <label class="layui-form-label">文章类别</label>
-                    <div class="layui-input-block layui-form" id="categoryIdJoinTemplateBox" lay-filter="categoryIdJoinTemplateBox"></div>
-                    <script id="categoryIdJoinTemplate" type="text/html">
-                        <select name="categoryId" lay-verify="required" lay-search>
-                            <option value="">选择文章类别</option>
-                            {{# for(var i = 0, item; item = d[i++];) { }}
-                            <option value="{{item.categoryId}}">{{item.title}}</option>
-                            {{# } }}
-                        </select>
-                    </script>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
+                <div class="layui-row layui-col-space10">
+                    <div class="layui-col-xs8">
+                        <div class="document-editor">
+                            <div class="toolbar-container"></div>
+                            <div class="content-container">
+                                <div id="editor"></div>
+                                <textarea id="content" name="content" style="display: none;"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs4" id="prop">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">标题</label>
+                            <label class="layui-form-label">文章类别*</label>
+                            <div class="layui-input-block layui-form" id="categoryIdTemplateBox" lay-filter="categoryIdTemplateBox"></div>
+                            <script id="categoryIdTemplate" type="text/html">
+                                <select name="categoryId" lay-verify="required" lay-search>
+                                    <option value="">选择文章类别</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.categoryId}}">{{item.title}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">标题*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="title" name="title" class="layui-input" value="" placeholder="请输入标题" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                         <div class="layui-form-item">
                             <label class="layui-form-label">子标题</label>
                             <div class="layui-input-block">
                                 <input type="text" id="subTitle" name="subTitle" class="layui-input" value="" placeholder="请输入子标题" >
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">概述</label>
-                    <div class="layui-input-block">
-                        <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
-                    </div>
-                </div>
-                <div class="layui-form-item">
-                    <label class="layui-form-label">外链地址</label>
-                    <div class="layui-input-block">
-                        <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
-                    </div>
-                </div>
-                <div class="layui-row">
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">概述</label>
+                            <div class="layui-input-block">
+                                <textarea id="summary" name="summary" class="layui-textarea" placeholder="请输入概述"></textarea>
+                            </div>
+                        </div>
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">外链地址</label>
+                            <div class="layui-input-block">
+                                <input type="text" id="link" name="link" class="layui-input" value="" placeholder="请输入外链地址，http或https开头，列表点击跳转到对应页面。">
+                            </div>
+                        </div>
                         <div class="layui-form-item">
                             <label class="layui-form-label">来源</label>
                             <div class="layui-input-block">
                                 <input type="text" id="source" name="source" class="layui-input" value="" placeholder="请输入来源" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
                             <label class="layui-form-label">作者</label>
                             <div class="layui-input-block">
                                 <input type="text" id="author" name="author" class="layui-input" value="" placeholder="请输入作者" >
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item">
-                            <label class="layui-form-label">发布时间</label>
+                            <label class="layui-form-label">发布时间*</label>
                             <div class="layui-input-block">
                                 <input type="text" id="publishDate" name="publishDate" class="layui-input" value="" placeholder="请选择发布时间" readonly style="cursor: pointer;" lay-verify="required">
                             </div>
                         </div>
-                    </div>
-                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                         <div class="layui-form-item" pane>
-                            <label class="layui-form-label">是否发布</label>
+                            <label class="layui-form-label">是否发布*</label>
                             <div class="layui-input-block">
-                                <input type="radio" name="isPublish" value="1" title="是">
+                                <input type="radio" name="isPublish" value="1" title="是" checked>
                                 <input type="radio" name="isPublish" value="0" title="否">
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <label class="layui-form-label">封面图片</label>
-                    <div class="layui-input-block">
-                        <input type="hidden" id="coverPhotos" name="coverPhotos">
-                        <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
-                        <script id="coverPhotosFileDownload" type="text/html">
-                            {{# var fileName = 'coverPhotos'; }}
-                            {{# if(d[fileName].length > 0) { }}
-                            {{#    var files = d[fileName];}}
-                            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
-                            <div class="upload-image-box">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">封面图片</label>
+                            <div class="layui-input-block">
+                                <input type="hidden" id="coverPhotos" name="coverPhotos">
+                                <div class="layui-btn-container" id="coverPhotosFileBox" style="border: 1px solid #e6e6e6;"></div>
+                                <script id="coverPhotosFileDownload" type="text/html">
+                                    {{# var fileName = 'coverPhotos'; }}
+                                    {{# if(d[fileName].length > 0) { }}
+                                    {{#    var files = d[fileName];}}
+                                    {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+                                    <div class="upload-image-box">
                                 <span class="upload-image-span">
                                     <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
                                 </span>
-                                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
-                                    <i class="fa fa-trash-o"></i>
-                                </a>
+                                        <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="coverPhotosRemoveFile">
+                                            <i class="fa fa-trash-o"></i>
+                                        </a>
+                                    </div>
+                                    {{#    } }}
+                                    {{# } }}
+                                    {{# if(d[fileName].length < 3) { }}
+                                    <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                                        <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
+                                            <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                                        </a>
+                                    </div>
+                                    {{# } }}
+                                </script>
                             </div>
-                            {{#    } }}
-                            {{# } }}
-                            {{# if(d[fileName].length < 3) { }}
-                            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
-                                <a href="javascript:void(0);" lay-form-button data-explain="封面图片" data-name="coverPhotos" lay-filter="coverPhotosUploadFile">
-                                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
-                                </a>
-                            </div>
-                            {{# } }}
-                        </script>
-                    </div>
-                </div>
-                <div class="layui-form-item layui-form-text">
-                    <div class="layui-input-block">
-                        <script id="content" name="content" type="text/plain"></script>
+                        </div>
                     </div>
                 </div>
                 <div class="layui-form-item layui-layout-admin">
@@ -146,8 +200,8 @@
         </div>
     </div>
 </div>
-<script src="assets/js/vendor/ueditor/ueditor.config.js"></script>
-<script src="assets/js/vendor/ueditor/ueditor.all.js"></script>
+<script src="assets/js/vendor/ckeditor/ckeditor.js"></script>
+<script src="assets/js/vendor/ckeditor/translations/zh-cn.js"></script>
 <script src="assets/js/vendor/viewer/viewer.min.js"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script>
@@ -157,6 +211,7 @@
         index: 'lib/index' //主入口模块
     }).use(['index', 'form', 'laydate', 'laytpl'], function(){
         var $ = layui.$;
+        var $win = $(window);
         var form = layui.form;
         var laytpl = layui.laytpl;
         var laydate = layui.laydate;
@@ -169,6 +224,18 @@
             parent.layer.close(parent.layer.getFrameIndex(window.name));
         }
 
+        function resize() {
+            let height = $win.height();
+            $('.content-container').css({
+                height: (height - 260) + 'px',
+            })
+            $('#prop').css({
+                height: (height - 150) + 'px',
+                overflow: 'auto'
+            })
+        }
+        resize();
+
         function refreshDownloadTemplet(fileName, file) {
             var dataRander = {};
             dataRander[fileName] = file;
@@ -268,23 +335,63 @@
 
         // 初始化正文富文本
         function initContentRichText(value) {
-            var editor = UE.getEditor('content', {autoHeightEnabled: false});
-            editor.ready(function() {
-                editor.setHeight(400);
-                editor.setContent(value);
+            DecoupledEditor.create(document.querySelector('#editor'), {
+                language: 'zh-cn',
+                toolbar: ['undo', 'redo', '|',
+                    'fontColor', 'fontBackgroundColor', 'highlight', '|',
+                    'alignment', '|',
+                    'bold', 'italic', 'link', 'blockQuote', '|',
+                    'bulletedList', 'numberedList', '|',
+                    'uploadImage', 'insertTable', '|',
+                    'sourceEditing'
+                ],
+            }).then(editor => {
+                const toolbarContainer = document.querySelector('.toolbar-container');
+                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+                editor.setData(value);
+                editor.model.document.on('change:data', function() {
+                    let content = editor.getData();
+                    $('#content').val(content);
+                })
+                editor.plugins.get("FileRepository").createUploadAdapter = function(loader) {
+                    return {
+                        upload: function () {
+                            // 因为编辑器插件需要返回一个promise对象
+                            return new Promise(function (resolve, reject) {
+                                // 读取选中的文件
+                                loader.file.then(function (file) {
+                                    // 我们通过formData进行图片上传
+                                    let form = new FormData();
+                                    form.append('image', file);
+                                    top.restAjax.postFile('api/file/v2/upload-image', form, null, function (code, data) {
+                                        // 定义插件返回格式
+                                        resolve({
+                                            default: 'route/file/v2/download/true/'+ data.data.fileId
+                                        });
+                                    }, function (code, data) {
+                                        reject(data.msg);
+                                    });
+                                })
+                            });
+                        },
+                        abort: function () {
+                            // 图片删除方法，可以调用后端api进行文件删除
+                        }
+                    }
+                };
+            }).catch(error => {
+                console.log(error)
             });
-            ueEditorObj['content'] = editor;
         }
 
         // 初始化文章类别联表
         function initArticleCategoryIdJoinTable(joinValue){
-            top.restAjax.get(top.restAjax.path('api/category/list', []), {}, null, function(code, data) {
-                laytpl(document.getElementById('categoryIdJoinTemplate').innerHTML).render(data, function(html) {
-                    document.getElementById('categoryIdJoinTemplateBox').innerHTML = html;
+            top.restAjax.get(top.restAjax.path('api/category/list', []), {}, null, function(code, data, args) {
+                laytpl(document.getElementById('categoryIdTemplate').innerHTML).render(data, function(html) {
+                    document.getElementById('categoryIdTemplateBox').innerHTML = html;
                 });
-                form.render('select', 'categoryIdJoinTemplateBox');
+                form.render('select', 'categoryIdTemplateBox');
 
-                // 初始化选择
                 var formSelectData = {};
                 formSelectData['categoryId'] = joinValue;
                 form.val('dataForm', formSelectData);
@@ -323,7 +430,6 @@
             top.dialog.confirm(top.dataMessage.commit, function(index) {
                 top.dialog.close(index);
                 var loadLayerIndex;
-                formData.field['content'] = ueEditorObj['content'].getContent();
                 top.restAjax.put(top.restAjax.path('api/content/update/{contentId}', [contentId]), formData.field, null, function(code, data) {
                     var layerIndex = top.dialog.msg(top.dataMessage.updateSuccess, {
                         time: 0,
