Home > Article > PHP Framework > Share and recommend a useful TP rich text editor-CKEditor
This article recommends to you a useful Thinkphp rich text editor-CKEditor. Here I will introduce to you how to use CKEditor. I hope it will be helpful to you!
I have been doing Thinkphp back-end development recently. I used to use layui’s rich text editor. The advantage of layui is that it is simple and easy to use, but its shortcomings are also relatively obvious. The editor has relatively few functions. I accidentally discovered that other people’s projects use the CKEditor rich text editor. I feel that it is more powerful than it is! Let's learn how to use CKEditor together. [Related tutorial recommendations: thinkphp framework]
Ckeditor4 download address (this tutorial chooses CKEditor version 4.16):
https ://ckeditor.com/ckeditor-4/download/
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<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>
id:"Upload",hidden:!0, change !0 to false
Upload successfulReturn:
{ "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\"." } }
Upload failedReturn:
{ "uploaded": 0, "error": { "message": "The file is too big." } }
Backend upload image code:
/** * @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); }
<script type="text/javascript"> var editor; $(function() { editor = CKEDITOR.replace('content'); }) editor.document.getBody().getText();//取得纯文本 editor.document.getBody().getHtml();//取得html文本 </script>
https://ckeditor.com/cke4/addon/colorbuttonhttps://ckeditor.com/cke4/addon/floatpanelhttps://ckeditor.com/ cke4/addon/panelbutton2. Unzip the downloaded plug-in into the ckeditor\plugins directory3. Load the plug-inMethod 1: In ckeditor/config In the .js file, add the plug-in configuration as follows:
CKEDITOR.editorConfig = function( config ) { ...省略前面的代码 //加载插件 config.extraPlugins = 'colorbutton,panelbutton,floatpanel'; }Method 2: When initializing the editor in js, add the plug-in configuration
<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.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'; };For more programming-related knowledge, please visit:
Programming Video! !
The above is the detailed content of Share and recommend a useful TP rich text editor-CKEditor. For more information, please follow other related articles on the PHP Chinese website!