Recommend to everyone a Thinkphp rich text editor that is easy to use with fried chicken

Recommend to everyone a Thinkphp rich text editor that is easy to use with fried chicken

Introduction:

Recently, I have been doing Thinkphp back-end development. I used to use layui's rich text editor. The advantage of layui is that it is simple and easy to use, but the disadvantage is also obvious. It is that the editor has relatively few functions, and I accidentally found it used in other people s projects. It is a rich text editor of CKEditor, and it feels so generous! Let's learn how to use CKEditor together

Ckeditor4 download address (the CKEditor 4.16 version selected for this tutorial):

ckeditor.com/ckeditor-4/...

1. Introduce the ckeditor core file ckeditor.js in the page 

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

2. Insert HTML controls where you use the editor

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

3. replace the corresponding control with the editor code

<script type= "text/javascript" > var editor; window .onload = function () { = CKEDITOR.replace Editor ( 'Content' , { filebrowserImageUploadUrl : '{: URL ( "ADMIN @/Article This article was/uploadPic")}' , //URL address uploaded images rear image_previewText : '& nbsp;' ///remove image Upload the text displayed in the preview area }); }; </script> Copy code

4. Turn on the upload function (the upload function is hidden, so it needs to be turned on)

 

In the ckeditor/plugins/image/dialogs/image.js file, search for: id:"Upload",hidden:!0 , change !0 to false

5. thinkphp back-end file upload method

After version 4.10, the official document requires that after the image is successfully uploaded, the json format will be returned. An example is as follows:

Upload successful return:

{     "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\"."     } } Copy code

upload failed return:

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

The code for uploading images on the backend:

/** * @name ='Upload picture' */ public function uploadPic () { //Note: ckeditor uses ajax to upload pictures, not form submissions, so request()->file() cannot be used to receive pictures, only $_FILES $name = $_FILES [ 'upload' ][ 'name' ]; $size = $_FILES [ 'upload' ][ 'size' ]; if ( $size > 1024 * 2 * 1000 ){ $arr = array ( "uploaded" => 0 , "error" => "The size of the uploaded picture cannot exceed 2M" ); exit (json_encode( $arr )); } $extension = pathInfo( $name ,PATHINFO_EXTENSION); $types = array ( "jpg" , "bmp" , "gif" , "png" ); if (in_array( $extension , $types )){ //take the date as Folder name, such as 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 ; //image name $save_path = $path . $img_name ; //save path $img_path = '/uploads/' . $dateFolder .DS. $img_name ; //image path 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" => "The image format is incorrect (only .jpg/.gif/.bmp/.png files can be uploaded)" ); } return json_encode( $arr ); } Copy code

6. get the content in ckeditor in js

<script type= "text/javascript" > var editor; $( function () { editor = CKEDITOR.replace( 'content' ); }) editor.document.getBody().getText(); //Get plain text editor.document.getBody().getHtml(); //Get html text </script> Copy code

7. use color plug-ins

1. Need to download three plug-ins (one is indispensable), download link:

ckeditor.com/cke4/addon/...

ckeditor.com/cke4/addon/...

ckeditor.com/cke4/addon/...

2. Unzip the downloaded plug-in to the ckeditor\plugins directory

3. Load the plugin

Method 1: In the ckeditor/config.js file, add the configuration of the plug-in, as follows:

CKEDITOR.editorConfig = function (config) { ...Omit the previous code //Load plugin config.extraPlugins = 'colorbutton,panelbutton,floatpanel' ; } Copy code

 Method 2: Add the configuration of the plug-in when initializing the editor in js

<script type= "text/javascript" > var editor; window .onload = function () { = CKEDITOR.replace Editor ( 'Content' , { filebrowserImageUploadUrl : '{: URL ( "ADMIN @/Article This article was/uploadPic")}' , //URL address uploaded images rear image_previewText : '& nbsp;' , ///remove The text displayed in the image upload preview area extraPlugins : 'colorbutton' , //Use color plug-ins }); }; </script> Copy code

8. custom toolbar configuration

Set in the ckeditor/config.js file

CKEDITOR.editorConfig = function ( config ) { //Toolbar settings 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' ] ]; //customize config.toolbar_MyToolbar =[ //Bold and italic, underscores across the line subscripts superscripts [ 'Bold' , 'Italic' , 'Underline' , 'Strike' , 'Subscript' , 'Superscript' ], //number list entity list is reduced Indentation Increase Indentation [ 'NumberedList' , 'BulletedList' , '-' , 'Outdent' , 'Indent' ], //Left justify, center justify, right justify both ends [ 'JustifyLeft' , 'JustifyCenter' , 'JustifyRight ' , 'JustifyBlock' ], //Hyperlink cancels the hyperlink anchor [ 'Link' , 'Unlink' , 'Anchor' ], //Picture flash table horizontal line expression special character page break [ 'Image' , 'Flash' , 'Table' , 'HorizontalRule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ], '/' , //style format font font size [ 'Styles' , 'Format' , 'Font' , 'FontSize' ], //Text color background color [ 'TextColor' , 'BGColor'], //Full screen display block source code [ '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' ; //Load plugin config.extraPlugins = 'colorbutton,panelbutton,floatpanel' ; }; Copy code