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

本篇文章给大家推荐一款炒鸡好用的Thinkphp富文本编辑器--CKEditor,下面给大家介绍一下使用CKEditor的方法,希望对大家有所帮助! 最近一直在做Thinkphp后...

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

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

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

Ckeditor4下载地址(本教程选择的是CKEditor 4.16版本):

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

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

一、在页面中引入ckeditor核心文件ckeditor.js<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>

二、在使用编辑器的地方插入HTML控件<textareaid="content"name="content"cols="30"rows="2"></textarea>

三、将相应的控件替换成编辑器代码<scripttype="text/javascript">vareditor;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":"Afilewiththesamenamealreadyexists.Theuploadedfilewasrenamedto\"test.jpg\"."}}

上传失败返回:

{"uploaded":0,"error":{"message":"Thefileistoobig."}}

后端上传图片的代码:

/***@name='上传图片'*/publicfunctionuploadPic(){//注明: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类型的文件)");}returnjson_encode($arr);}

六、js里获取ckeditor里的内容

<scripttype="text/javascript">vareditor;$(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/cke4/addon/panelbutton

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

3、加载插件

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

CKEDITOR.editorConfig=function(config){...省略前面的代码//加载插件config.extraPlugins='colorbutton,panelbutton,floatpanel';}

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

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

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/43026.html;
(0)
上一篇 2023年5月19日 下午4:16
下一篇 2023年5月19日 下午4:16

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部