Thinkphp使用CKEditor4-CSDN博客

本文链接：https://blog.csdn.net/2401_84875887/article/details/138980102

“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 > 102421000){

$arr= array(

“uploaded” => 0,

“error” => “上传的图片大小不能超过2M”

);

exit(json_encode($arr));

}

$e x t e n s i o n = p a t h I n f o ($ name,PATHINFO_EXTENSION);

$types = array(“jpg”,“bmp”,“gif”,“png”);

if(in_array( $e x t e n s i o n,$ 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 = $p a t h .$ 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里的内容

七、使用颜色插件

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

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

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

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

2、下载好的插件解压到ckeditor\plugins目录里

3、加载插件

方式一：在ckeditor/config.js文件中，添加插件的配置，如下：

CKEDITOR.editorConfig = function( config ) {

…省略前面的代码

//加载插件

config.extraPlugins = ‘colorbutton,panelbutton,floatpanel’;

}

方式二：在js里初始化editor时，添加插件的配置

八、自定义工具栏配置

在ckeditor/config.js文件中设置

CKEDITOR.editorConfig = function( config ) {

//工具栏设置

config.toolbar = ‘MyToolbar’;

config.toolbar_Full = [

{ name: ‘document’, items : [ ‘Source’,‘-’,‘Save’,‘NewPage’,‘DocProps’,‘Preview’,‘Print’,‘-’,‘Templates’ ] },

{ name: ‘clipboard’, items : [ ‘Cut’,‘Copy’,‘Paste’,‘PasteText’,‘PasteFromWord’,‘-’,‘Undo’,‘Redo’ ] },

{ name: ‘editing’, items : [ ‘Find’,‘Replace’,‘-’,‘SelectAll’,‘-’,‘SpellChecker’, ‘Scayt’ ] },

{ name: ‘forms’, items : [ ‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’,

‘HiddenField’ ] },

‘/’,

{ name: ‘basicstyles’, items : [ ‘Bold’,‘Italic’,‘Underline’,‘Strike’,‘Subscript’,‘Superscript’,‘-’,‘RemoveFormat’ ] },

{ name: ‘paragraph’, items : [ ‘NumberedList’,‘BulletedList’,‘-’,‘Outdent’,‘Indent’,‘-’,‘Blockquote’,‘CreateDiv’,

‘-’,‘JustifyLeft’,‘JustifyCenter’,‘JustifyRight’,‘JustifyBlock’,‘-’,‘BidiLtr’,‘BidiRtl’ ] },

{ name: ‘links’, items : [ ‘Link’,‘Unlink’,‘Anchor’ ] },

{ name: ‘insert’, items : [ ‘Image’,‘Flash’,‘Table’,‘HorizontalRule’,‘Smiley’,‘SpecialChar’,‘PageBreak’,‘Iframe’ ] },

‘/’,

{ name: ‘styles’, items : [ ‘Styles’,‘Format’,‘Font’,‘FontSize’ ] },

{ name: ‘colors’, items : [ ‘TextColor’,‘BGColor’ ] },

{ name: ‘tools’, items : [ ‘Maximize’, ‘ShowBlocks’,‘-’,‘About’ ] }

];

config.toolbar_Basic = [

[‘Bold’, ‘Italic’, ‘-’, ‘NumberedList’, ‘BulletedList’, ‘-’, ‘Link’, ‘Unlink’,‘-’,‘About’]

];

//自定义

config.toolbar_MyToolbar =[

//加粗斜体，下划线穿过线下标字上标字

[‘Bold’,‘Italic’,‘Underline’,‘Strike’,‘Subscript’,‘Superscript’],

// 数字列表实体列表减小缩进增大缩进

[‘NumberedList’,‘BulletedList’,‘-’,‘Outdent’,‘Indent’],

学习宝典

对我们开发者来说，一定要打好基础，随时准备战斗。不论寒冬是否到来，都要把自己的技术做精做深。虽然目前移动端的招聘量确实变少了，但中高端的职位还是很多的，这说明行业只是变得成熟规范起来了。竞争越激烈，产品质量与留存就变得更加重要，我们进入了技术赋能业务的时代。

不论遇到什么困难，都不应该成为我们放弃的理由！

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，对此我针对Android程序员，我这边给大家整理了一套学习宝典！包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

【Android核心高级技术PDF文档，BAT大厂面试真题解析】