ckeditor编辑器

app/sys/controller/Ckeditor.php

@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * +----------------------------------------------------------------------
+ * | Ueditor编辑器后台控制器制器
+ * +----------------------------------------------------------------------
+ */
+
+namespace app\sys\controller;
+
+use think\App;
+use think\facade\Config;
+
+class Ckeditor extends Base
+{
+     /**
+     * 图片上传
+     * @file upload_file   上传的文件
+     * @param string  $img_id   图片ipnut text id 默认值 picture
+     * @param boolean $water    是否添加水印
+     * @param boolean $thumb    是否制作缩略图
+     * @param int $width        缩略图最大宽
+     * @param int $height       缩略图最大高
+     * @param bool $overwrite   生成缩略图后是否保存原图
+     */
+    public function uploadimg()
+    {
+        if ($this->request->isPost()) {
+            $file = $this->request->file('upload');
+            if ($file) {
+                try {
+                    validate(
+                        [
+                            'file' => [
+                                // 限制文件大小(单位b)，这里限制为4M
+                                'fileSize' => 4 * 1024 * 1024,
+                                // 限制文件后缀，多个后缀以英文逗号分割
+                                'fileExt'  => 'jpg,png,gif,jpeg,webp,jfif'
+                            ]
+                        ],
+                        [
+                            'file.fileSize' => '文件太大',
+                            'file.fileExt' => '不支持的文件后缀',
+                        ]
+                    )->check(['file' => $file]);
+
+                    $savename = \think\facade\Filesystem::disk('public')->putFile('/', $file);
+
+                    return json([
+                        'uploaded' => 1,
+                        'fileName' => basename($savename),
+                        'url' => Config::get('filesystem.disks.public.url') . '/' . $savename
+                    ]);
+                } catch (\think\exception\ValidateException $e) {
+                    $this->error($e->getMessage());
+                    return json([
+                        'uploaded' => 1,
+                        'error' =>  ['message'=>$e->getMessage()]
+                    ]);
+                }
+            } else {
+                return json([
+                    'uploaded' => 1,
+                    'error' =>  ['message'=>'图片不能为空']
+                ]);
+            }
+        }
+    }
+}

public/static/plugins/.gitignore

@@ -1,5 +1,6 @@
 /ace
 /charts
+/ckeditor
 /h-ui
 /h-ui.admin
 /Hui-iconfont

view/sys/article/ckeditor4.html

@@ -0,0 +1,63 @@
+<script src="/static/plugins/ckeditor/ckeditor4/ckeditor.js"></script>
+<script>
+if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+	CKEDITOR.tools.enableHtml5Elements( document );
+
+// The trick to keep the editor in the sample quite small
+// unless user specified own height.
+CKEDITOR.config.height = 300;
+CKEDITOR.config.width = 'auto';
+
+var initSample = ( function() {
+	var wysiwygareaAvailable = isWysiwygareaAvailable(),
+		isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
+
+	return function() {
+		var editorElement = CKEDITOR.document.getById( 'editor' );
+
+		// :(((
+		if ( isBBCodeBuiltIn ) {
+			editorElement.setHtml(
+				'Hello world!\n\n' +
+				'I\'m an instance of [url=https://ckeditor.com]CKEditor[/url].'
+			);
+		}
+
+		// Depending on the wysiwygarea plugin availability initialize classic or inline editor.
+		if ( wysiwygareaAvailable ) {
+			CKEDITOR.replace( 'editor' );
+		} else {
+			editorElement.setAttribute( 'contenteditable', 'true' );
+			CKEDITOR.inline( 'editor' );
+
+			// TODO we can consider displaying some info box that
+			// without wysiwygarea the classic editor may not work.
+		}
+	};
+
+	function isWysiwygareaAvailable() {
+		// If in development mode, then the wysiwygarea must be available.
+		// Split REV into two strings so builder does not replace it :D.
+		if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
+			return true;
+		}
+
+		return !!CKEDITOR.plugins.get( 'wysiwygarea' );
+	}
+} )();
+
+initSample();
+
+$("#form-button-save").click(function(){
+    if (!validator().form()) {
+        return false
+    }
+    
+    const content = CKEDITOR.instances.editor.getData();
+    
+    $("<input/>").attr("type","hidden").attr("name", "content").val(content).appendTo($("#form-save"));
+
+    $("#form-save")[0].submit();
+})
+</script>
+

view/sys/article/ckeditor5.html

@@ -0,0 +1,33 @@
+<style>
+    .ck-editor__editable_inline {
+        height: 400px !important;
+    }
+</style>
+<script src="/static/plugins/ckeditor/ckeditor5-build-classic/ckeditor.js"></script>
+<script>
+    ClassicEditor
+        .create(document.querySelector('#editor'), {
+            //功能模块
+            toolbar:
+                ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'indent', 'outdent', '|', 'link', 'imageUpload', 'mediaEmbed', '|', 'blockQuote', 'insertTable', 'undo', 'redo']
+            , language: 'zh-cn'
+            //图片上传
+            , ckfinder: {
+                uploadUrl: 'http://192.168.31.123:2000/api/Home/UploadImg'
+            }
+        })
+        .then(editor => {
+            window.editor = editor;
+        })
+        .catch(err => {
+            console.error(err.stack);
+        });
+
+    $("#form-button-save").click(function () {
+        if (!validator().form()) {
+            return false
+        }
+
+        $("#form-save")[0].submit();
+    })
+</script>

view/sys/article/save.html

@@ -101,7 +101,7 @@
         <div class="row cl">
             <label class="form-label col-xs-1 col-sm-1"></label>
             <div class="formControls col-xs-11 col-sm-10">
-                <script id="editor" type="text/plain" style="width:100%;height:400px;">{$data.content|raw}</script>
+                <div id="editor" type="text/plain" style="width:100%;height:400px;" name="content">{$data.content|raw}</div>
             </div>
         </div>
         <div class="row cl">
@@ -128,23 +128,14 @@
     </form>
 </article>
 
+{include file="article/ueditor" /}
+
 <!--请在下方写此页面业务相关的脚本-->
-<script type="text/javascript" src="/static/plugins/ueditor/1.4.3/ueditor.config.js"></script>
-<script type="text/javascript" src="/static/plugins/ueditor/1.4.3/ueditor.all.js"></script>
-<script type="text/javascript" src="/static/plugins/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
 <script type="text/javascript" src="/static/plugins/jquery.validation/1.14.0/jquery.validate.js"></script>
 <script type="text/javascript" src="/static/plugins/jquery.validation/1.14.0/messages_zh.js"></script>
 <script type="text/javascript" src="/static/plugins/jquery.validation/1.14.0/validate-methods.js"></script>
 
 <script type="text/javascript">
-    $(function () {
-        //实例化编辑器   
-        var ue = UE.getEditor('editor', {
-            autoHeightEnabled: false,
-            textarea: "content",
-        });
-    })
-
     function validator(params) {
         return $("#form-save").validate({
             debug: true,
@@ -173,14 +164,6 @@
         });
     }
 
-    $("#form-button-save").click(function(){
-        if (!validator().form()) {
-            return false
-        }
-
-        $("#form-save")[0].submit();
-    })
-
     //添加标题图
     function addTitlePic() {
         layer.open({

view/sys/article/ueditor.html

@@ -0,0 +1,21 @@
+<!-- ueditor -->
+<script type="text/javascript" src="/static/plugins/ueditor/1.4.3/ueditor.config.js"></script>
+<script type="text/javascript" src="/static/plugins/ueditor/1.4.3/ueditor.all.js"></script>
+<script type="text/javascript" src="/static/plugins/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
+<script>
+$(function () {
+    //实例化编辑器   
+    var ue = UE.getEditor('editor', {
+        autoHeightEnabled: false,
+        textarea: "content",
+    });
+})
+
+$("#form-button-save").click(function(){
+    if (!validator().form()) {
+        return false
+    }
+
+    $("#form-save")[0].submit();
+})
+</script>