分享推荐一款好用的TP富文本编辑器-CKEditor

本篇文章给大家推荐一款炒鸡好用的Thinkphp富文本编辑器--CKEditor，下面给大家介绍一下使用CKEditor的方法，希望对大家有所帮助！

最近一直在做Thinkphp后端开发，之前都是使用layui的富文本编辑器，layui的优点是简单易用，但缺点也比较明显，就是编辑器功能比较少，无意中发现别人的项目里使用的是CKEditor富文本编辑器，感觉还阔以！下面让我们一起来学习如何使用CKEditor。

Ckeditor4下载地址（本教程选择的是CKEditor 4.16版本）：

https://ckeditor.com/ckeditor-4/download/

一、在页面中引入ckeditor核心文件ckeditor.js

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

二、在使用编辑器的地方插入HTML控件

<textarea  id="content" name="content" cols="30" rows="2"></textarea>

三、将相应的控件替换成编辑器代码

<script type="text/javascript">var editor;window.onload = function(){    editor = CKEDITOR.replace( 'content', {        filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上传图片的后端URL地址        image_previewText : '&nbsp;'///去掉图片上传预览区域显示的文字    });};</script>

四、开启上传功能（上传功能被隐藏了，所以需要开启）

在ckeditor/plugins/image/dialogs/image.js文件中，搜索：id:"Upload",hidden:!0，把 !0改成false

五、thinkphp后端上传文件的方法

4.10版本之后，官方文档要求图片上传成功后，返回json格式，示例如下：

上传成功返回：

{    "uploaded": 1,    "fileName": "demo.jpg",    "url": "/files/demo.jpg"} {    "uploaded": 1,    "fileName": "test.jpg",    "url": "/files/test.jpg",    "error": {        "message": "A file with the same name already exists. The uploaded file was renamed to \"test.jpg\"."    }}

上传失败返回：

{    "uploaded": 0,    "error": {        "message": "The file is too big."    }}

后端上传图片的代码：

/** * @name='上传图片'     */public function uploadPic(){    //注明：ckeditor是使用ajax上传图片，而不是用表单提交，因此不能使用request()->file()接收图片，只能用$_FILES    $name = $_FILES['upload']['name'];     $size = $_FILES['upload']['size'];    if($size  > 1024*2*1000){        $arr= array(            "uploaded" => 0,            "error"    => "上传的图片大小不能超过2M"        );        exit(json_encode($arr));    }    $extension = pathInfo($name,PATHINFO_EXTENSION);    $types = array("jpg","bmp","gif","png");            if(in_array($extension,$types)){         //以日期为文件夹名，如public/uploads/20210327/        $dateFolder = date("Ymd",time());        $path = ROOT_PATH . 'public/uploads/'.$dateFolder.DS;        if(!file_exists($path)){            mkdir($path,0777,true);        }               $img_name  = str_replace('.','',uniqid("",TRUE)).".".$extension; //图片名称        $save_path = $path.$img_name; //保存路径         $img_path  = '/uploads/'.$dateFolder.DS.$img_name; //图片路径         move_uploaded_file($_FILES['upload']['tmp_name'],$save_path);           $arr= array(            "uploaded" => 1,            "fileName" => $img_name,            "url"      => $img_path        );    }else{         $arr= array(            "uploaded" => 0,            "error"    => "图片格式不正确（只能上传.jpg/.gif/.bmp/.png类型的文件）"        );           }     return json_encode($arr);}

六、js里获取ckeditor里的内容

<script type="text/javascript">var editor;$(function() {    editor = CKEDITOR.replace('content');})editor.document.getBody().getText();//取得纯文本editor.document.getBody().getHtml();//取得html文本</script>

七、使用颜色插件

1、需要下载三个插件（缺一不可），下载地址：

https://ckeditor.com/cke4/addon/colorbutton

https://ckeditor.com/cke4/addon/floatpanel

https://ckeditor.com