Thinkphp使用CKEditor4富文本编辑器
先看一下效果图:
提供完整版的CKEditor 4.11.3下载地址:
中文版CKEditor4.11.3-PHP文档类资源-CSDN下载
一、在页面中引入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 : ' '///去掉图片上传预览区域显示的文字});
};
</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、需要下载三个插件(缺一不可),下载地址:
Color Button | CKEditor.com
Floating Panel | CKEditor.com
Panel Button | CKEditor.com
2、下载好的插件解压到ckeditor\plugins目录里
3、加载插件
方式一:在ckeditor/config.js文件中,添加插件的配置,如下:
CKEDITOR.editorConfig = function( config ) {...省略前面的代码//加载插件config.extraPlugins = 'colorbutton,panelbutton,floatpanel';
}
方式二:在js里初始化editor时,添加插件的配置
<script type="text/javascript">
var editor;
window.onload = function()
{editor = CKEDITOR.replace( 'content', {filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上传图片的后端URL地址image_previewText : ' ',///去掉图片上传预览区域显示的文字extraPlugins: 'colorbutton',//使用颜色插件});
};
</script>
八、自定义工具栏配置
在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'],// 左对齐 居中对齐 右对齐 两端对齐['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],//超链接 取消超链接 锚点['Link','Unlink','Anchor'],//图片 flash 表格 水平线 表情 特殊字符 分页符['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',// 样式 格式 字体 字体大小['Styles','Format','Font','FontSize'],//文本颜色 背景颜色['TextColor','BGColor'],//全屏 显示区块 源码['Maximize', 'ShowBlocks','-','Source']],config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre';config.removeButtons = 'Underline,Subscript,Superscript';config.removeDialogTabs = 'image:advanced;link:advanced';//加载插件config.extraPlugins = 'colorbutton,panelbutton,floatpanel';
};
Thinkphp使用CKEditor4富文本编辑器相关推荐
- vue使用ckeditor4富文本编辑器配置
使用场景: 本来最开始使用的是quill富文本编辑器,但是由于功能和项目得实际需求并不是怎么适合,因为我需要在Word文档里面把一些内容进行粘贴复制进去(复制的是图文),当出现这种场景的话quill就 ...
- 只需三步:在CKEditor4富文本编辑器中集成错别字在线检测
在CKEditor4中集成错别字在线检测功能 JCJC错别字检测已经可以集成在各种编辑器中了,这篇文章主要用来讲解如何与:CKEditor编辑器集成错别字在线检测功能. 第一步,增加一个错别字检测按钮 ...
- 富文本编辑器:ckeditor(使用ckeditor4-vue)
最近,vue项目中使用了富文本编辑器,经过反复研究,选择了ckeditor,ckeditor分为4和5,我们选的4,网上中文的相关资料比较少,总结一下使用的经验. 官方网站:https://ckedi ...
- 富文本编辑器:ckeditor(使用官网下载包)
之前,直接使用的ckeditor-vue实现的富文本编辑器,问题主要是使用add-ons里面的plugin比较麻烦,需要自己包装,然后如果想要更改固有的plugin,比如table.tablesele ...
- 关于ckeditor富文本编辑器上传图片返回“不正确的服务器响应”的解决方案
最新由于项目需要,使用了ckeditor富文本编辑器,需要上传图片.在使用过程中突然发现,原来的ckeditor返回图片地址的方式返回"不正确的服务器响应".当时感觉好奇怪啊.明明 ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- JavaWeb 富文本编辑器(Ckeditor)文件上传
目录 一.什么是富文本编辑器? 二.CKEditor介绍 三.CKEditor下载 四.使用富文本编辑器 五.文件上传 一.什么是富文本编辑器? 富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑 ...
- JavaWeb富文本编辑器与文件上传
目录 一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用 二.文件上传 文件上传必须要注意的规则: 文件上传案例 文件夹的访问 一.富文本编辑器 富文本编辑器在项目中很常见,它可以将文本, ...
- phpeditor编写php_PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为 ...
- 富文本编辑器CKeditor的基本使用
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用?大象装冰箱 总共分三步 1.官网下载https://ckedito ...
最新文章
- 如何用简单易懂的例子解释隐马尔可夫模型?
- 盘点2019年336起机器人及相关领域投融资事件!注重细分领域深耕行业复苏趋势显现...
- mysql异步扩展_基于Swoole扩展开发异步高性能的MySQL代理服务器
- subsonic mysql_Subsonic 介绍
- 十进制转二进制 java 程序_如何把一个十进制数转为二进制数的Java程序?
- WebService之Java原生态支持(二)
- jsp是在html里面嵌入哪种代码?_再说嵌入式入门
- openwrt uci
- 日常记录(4)让百度和google收录我们的网站
- Egret Native项目热更新
- 《麦田里的守望者》阅读笔记
- 关于ViewPager.PageTransformer的一些理解
- 动图怎么裁剪边框?三步教你在线裁剪gif
- python 常见算法题
- AI识别抑郁症正确率高达八成,但AI+精神健康还有很长的路要走
- 刘润-商业洞察力-过去有效,现在无效,怎么办?
- 【PBR系列六】基于物理的环境光照(上):漫反射辐照度(Diffuse irradiance)
- C语言实现贪吃蛇(使用链表,适合初学者)
- 为什么要使用内存池技术?
- SVN文件没有对勾感叹号的状态提示