Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use P-rich text editor CKEditor". In daily operation, I believe many people have doubts about how to use P-rich text editor CKEditor. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use P-rich text editor CKEditor". Next, please follow the editor to study!

First, introduce the ckeditor core file ckeditor.js into the page, insert the HTML control where the editor is used, and replace the corresponding control with the editor code var editor _ window.onload = function () {editor = CKEDITOR.replace ('content', {filebrowserImageUploadUrl:' {: url ("@ admin/article/uploadPic")}', / / the backend URL address of the uploaded image is image_previewText:'/ remove the text displayed in the image upload preview area);}; 4. Enable the upload function (the upload function is hidden, so it needs to be enabled)

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

5. The method of uploading files at thinkphp backend

After version 4.10, the official document requires that when the image is uploaded successfully, it will be returned in json format. The example is as follows:

Successfully uploaded and returned:

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

Failed to upload and returned:

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

The code for uploading images at the backend:

/ * * @ name=' upload pictures'* / public function uploadPic () {/ / Note: ckeditor uses ajax to upload pictures, not form submission, so you cannot use request ()-> file () to receive pictures, only $_ FILES $name= $_ FILES ['upload'] [' name'] $size = $_ FILES ['upload'] [' size']; if ($size > 1024m2 / 1000) {$arr= array ("uploaded" = > 0, "error" = > "the size of the uploaded image cannot exceed 2m") Exit (json_encode ($arr));} $extension = pathInfo ($name,PATHINFO_EXTENSION); $types = array ("jpg", "bmp", "gif", "png") If (in_array ($extension,$types)) {/ / take date as the 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 / / picture name $save_path = $path.$img_name; / / Save path $img_path ='/ uploads/'.$dateFolder.DS.$img_name; / / picture 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" = > "incorrect picture format (only .jpg / .gif / .bmp / .png files can be uploaded)") } return json_encode ($arr);} VI. Get the content var editor;$ in ckeditor in js (function () {editor = CKEDITOR.replace ('content');}) editor.document.getBody (). GetText (); / / get plain text editor.document.getBody (). GetHtml (); / / get html text 7. Use color plug-in

1. You need to download three plug-ins (one of which is indispensable). Download address:

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

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

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

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

3. Load the plug-in

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

CKEDITOR.editorConfig = function (config) {... Omit the previous code / / load the plug-in config.extraPlugins = 'colorbutton,panelbutton,floatpanel';}

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

Var editor;_window.onload = function () {editor = CKEDITOR.replace ('content', {filebrowserImageUploadUrl:' {: url ("@ admin/article/uploadPic")}', / / the back-end URL address of the uploaded image is image_previewText:'', / / remove the text displayed in the image upload preview area extraPlugins: 'colorbutton',// uses color plug-in}) }; VIII. Customize the 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']] / / Custom config.toolbar_MyToolbar = [/ / bold italics The underscore passes through the subscript superscript ['Bold','Italic','Underline','Strike','Subscript','Superscript'], / / the list of numeric entities decreases the indentation and increases the indentation [' NumberedList','BulletedList','-','Outdent','Indent'] / / left alignment, center alignment, right alignment, both ends alignment ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], / / hyperlink canceling hyperlink anchor [' Link','Unlink','Anchor'] / / Picture flash form horizontal line emoji special character page break ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],' /', / / style format 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 H2 / Underline,Subscript,Superscript'; config.removeDialogTabs = 'image:advanced;link:advanced'; / / load plug-in config.extraPlugins =' colorbutton,panelbutton,floatpanel';}; at this point, the study on "how to use P rich text editor CKEditor" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.