Table of Contents
Copy after login
" >##1. Introduce the ckeditor core file ckeditor.js into the page
Copy after login
Copy after login
" >2. Insert the HTML control where the editor is used
Copy after login
4. Turn on the upload function (the upload function is hidden, so it needs to be turned on)
5. Upload files on the thinkphp backend Method
7. Using color plug-ins
8. Customize the toolbar configuration
Home PHP Framework ThinkPHP Share and recommend a useful TP rich text editor-CKEditor

Share and recommend a useful TP rich text editor-CKEditor

Oct 25, 2021 pm 07:16 PM
ckeditor thinkphp Rich text editor

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!

Share and recommend a useful TP rich text editor-CKEditor

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/

Share and recommend a useful TP rich text editor-CKEditor

##1. Introduce the ckeditor core file ckeditor.js into the page
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Copy after login

2. Insert the HTML control where the editor is used
<textarea  id="content" name="content" cols="30" rows="2"></textarea>
Copy after login

3. Replace the corresponding control with the editor code
<script type="text/javascript">
var editor;
window.onload = function()
{
	editor = CKEDITOR.replace( &#39;content&#39;, {
            filebrowserImageUploadUrl : &#39;{:url("@admin/article/uploadPic")}&#39;,//上传图片的后端URL地址
            image_previewText : &#39; &#39;///去掉图片上传预览区域显示的文字
    });
};
</script>
Copy after login

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. Upload files on the thinkphp backend Method

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

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\"."
    }
}
Copy after login

Upload failedReturn:

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

Backend upload image code:

/**
    * @name=&#39;上传图片&#39;    
    */
    public function uploadPic()
    {
		//注明:ckeditor是使用ajax上传图片,而不是用表单提交,因此不能使用request()->file()接收图片,只能用$_FILES
		$name = $_FILES[&#39;upload&#39;][&#39;name&#39;]; 
		$size = $_FILES[&#39;upload&#39;][&#39;size&#39;];
		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 . &#39;public/uploads/&#39;.$dateFolder.DS;
			if(!file_exists($path)){
				mkdir($path,0777,true);
			}		
			$img_name  = str_replace(&#39;.&#39;,&#39;&#39;,uniqid("",TRUE)).".".$extension; //图片名称
			$save_path = $path.$img_name; //保存路径 
			$img_path  = &#39;/uploads/&#39;.$dateFolder.DS.$img_name; //图片路径 
			move_uploaded_file($_FILES[&#39;upload&#39;][&#39;tmp_name&#39;],$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);
    }
Copy after login

6. Get ckeditor in js Content
<script type="text/javascript">
var editor;
$(function() {
	editor = CKEDITOR.replace(&#39;content&#39;);
})
editor.document.getBody().getText();//取得纯文本
editor.document.getBody().getHtml();//取得html文本
</script>
Copy after login

7. Using color plug-ins

1. You need to download three plug-ins (one 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 into the ckeditor\plugins directory

3. Load the plug-in

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

CKEDITOR.editorConfig = function( config ) {

    ...省略前面的代码

    //加载插件
    config.extraPlugins = &#39;colorbutton,panelbutton,floatpanel&#39;;
}
Copy after login

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( &#39;content&#39;, {
            filebrowserImageUploadUrl : &#39;{:url("@admin/article/uploadPic")}&#39;,//上传图片的后端URL地址
            image_previewText : &#39; &#39;,///去掉图片上传预览区域显示的文字
			extraPlugins: &#39;colorbutton&#39;,//使用颜色插件
    });
};
</script>
Copy after login

8. Customize the toolbar configuration

Set in the ckeditor/config.js file

CKEDITOR.editorConfig = function( config ) {
	//工具栏设置
	config.toolbar = &#39;MyToolbar&#39;;
	config.toolbar_Full = [
		{ name: &#39;document&#39;, items : [ &#39;Source&#39;,&#39;-&#39;,&#39;Save&#39;,&#39;NewPage&#39;,&#39;DocProps&#39;,&#39;Preview&#39;,&#39;Print&#39;,&#39;-&#39;,&#39;Templates&#39; ] },
		{ name: &#39;clipboard&#39;, items : [ &#39;Cut&#39;,&#39;Copy&#39;,&#39;Paste&#39;,&#39;PasteText&#39;,&#39;PasteFromWord&#39;,&#39;-&#39;,&#39;Undo&#39;,&#39;Redo&#39; ] },
		{ name: &#39;editing&#39;, items : [ &#39;Find&#39;,&#39;Replace&#39;,&#39;-&#39;,&#39;SelectAll&#39;,&#39;-&#39;,&#39;SpellChecker&#39;, &#39;Scayt&#39; ] },
		{ name: &#39;forms&#39;, items : [ &#39;Form&#39;, &#39;Checkbox&#39;, &#39;Radio&#39;, &#39;TextField&#39;, &#39;Textarea&#39;, &#39;Select&#39;, &#39;Button&#39;, &#39;ImageButton&#39;, 
			&#39;HiddenField&#39; ] },
		&#39;/&#39;,
		{ name: &#39;basicstyles&#39;, items : [ &#39;Bold&#39;,&#39;Italic&#39;,&#39;Underline&#39;,&#39;Strike&#39;,&#39;Subscript&#39;,&#39;Superscript&#39;,&#39;-&#39;,&#39;RemoveFormat&#39; ] },
		{ name: &#39;paragraph&#39;, items : [ &#39;NumberedList&#39;,&#39;BulletedList&#39;,&#39;-&#39;,&#39;Outdent&#39;,&#39;Indent&#39;,&#39;-&#39;,&#39;Blockquote&#39;,&#39;CreateDiv&#39;,
		&#39;-&#39;,&#39;JustifyLeft&#39;,&#39;JustifyCenter&#39;,&#39;JustifyRight&#39;,&#39;JustifyBlock&#39;,&#39;-&#39;,&#39;BidiLtr&#39;,&#39;BidiRtl&#39; ] },
		{ name: &#39;links&#39;, items : [ &#39;Link&#39;,&#39;Unlink&#39;,&#39;Anchor&#39; ] },
		{ name: &#39;insert&#39;, items : [ &#39;Image&#39;,&#39;Flash&#39;,&#39;Table&#39;,&#39;HorizontalRule&#39;,&#39;Smiley&#39;,&#39;SpecialChar&#39;,&#39;PageBreak&#39;,&#39;Iframe&#39; ] },
		&#39;/&#39;,
		{ name: &#39;styles&#39;, items : [ &#39;Styles&#39;,&#39;Format&#39;,&#39;Font&#39;,&#39;FontSize&#39; ] },
		{ name: &#39;colors&#39;, items : [ &#39;TextColor&#39;,&#39;BGColor&#39; ] },
		{ name: &#39;tools&#39;, items : [ &#39;Maximize&#39;, &#39;ShowBlocks&#39;,&#39;-&#39;,&#39;About&#39; ] }
	]; 
	config.toolbar_Basic = [
		[&#39;Bold&#39;, &#39;Italic&#39;, &#39;-&#39;, &#39;NumberedList&#39;, &#39;BulletedList&#39;, &#39;-&#39;, &#39;Link&#39;, &#39;Unlink&#39;,&#39;-&#39;,&#39;About&#39;]
	];
	//自定义
	config.toolbar_MyToolbar =[
        //加粗    斜体,    下划线    穿过线    下标字        上标字
        [&#39;Bold&#39;,&#39;Italic&#39;,&#39;Underline&#39;,&#39;Strike&#39;,&#39;Subscript&#39;,&#39;Superscript&#39;],
        // 数字列表        实体列表         减小缩进  增大缩进
        [&#39;NumberedList&#39;,&#39;BulletedList&#39;,&#39;-&#39;,&#39;Outdent&#39;,&#39;Indent&#39;],
        //   左对齐        居中对齐        右对齐        两端对齐
        [&#39;JustifyLeft&#39;,&#39;JustifyCenter&#39;,&#39;JustifyRight&#39;,&#39;JustifyBlock&#39;],
        //超链接  取消超链接 锚点
        [&#39;Link&#39;,&#39;Unlink&#39;,&#39;Anchor&#39;],
        //图片    flash    表格       水平线        表情     特殊字符      分页符
        [&#39;Image&#39;,&#39;Flash&#39;,&#39;Table&#39;,&#39;HorizontalRule&#39;,&#39;Smiley&#39;,&#39;SpecialChar&#39;,&#39;PageBreak&#39;],
        &#39;/&#39;,
        // 样式     格式    字体   字体大小
        [&#39;Styles&#39;,&#39;Format&#39;,&#39;Font&#39;,&#39;FontSize&#39;],
        //文本颜色   背景颜色
        [&#39;TextColor&#39;,&#39;BGColor&#39;],
        //全屏         显示区块         源码
        [&#39;Maximize&#39;, &#39;ShowBlocks&#39;,&#39;-&#39;,&#39;Source&#39;]
    ],
	config.format_tags = &#39;p;h1;h2;h3;h4;h5;h6;pre&#39;;
	config.removeButtons = &#39;Underline,Subscript,Superscript&#39;;
	config.removeDialogTabs = &#39;image:advanced;link:advanced&#39;;
	//加载插件
	config.extraPlugins = &#39;colorbutton,panelbutton,floatpanel&#39;; 
};
Copy after login
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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to run thinkphp project How to run thinkphp project Apr 09, 2024 pm 05:33 PM

To run the ThinkPHP project, you need to: install Composer; use Composer to create the project; enter the project directory and execute php bin/console serve; visit http://localhost:8000 to view the welcome page.

There are several versions of thinkphp There are several versions of thinkphp Apr 09, 2024 pm 06:09 PM

ThinkPHP has multiple versions designed for different PHP versions. Major versions include 3.2, 5.0, 5.1, and 6.0, while minor versions are used to fix bugs and provide new features. The latest stable version is ThinkPHP 6.0.16. When choosing a version, consider the PHP version, feature requirements, and community support. It is recommended to use the latest stable version for best performance and support.

How to run thinkphp How to run thinkphp Apr 09, 2024 pm 05:39 PM

Steps to run ThinkPHP Framework locally: Download and unzip ThinkPHP Framework to a local directory. Create a virtual host (optional) pointing to the ThinkPHP root directory. Configure database connection parameters. Start the web server. Initialize the ThinkPHP application. Access the ThinkPHP application URL and run it.

Which one is better, laravel or thinkphp? Which one is better, laravel or thinkphp? Apr 09, 2024 pm 03:18 PM

Performance comparison of Laravel and ThinkPHP frameworks: ThinkPHP generally performs better than Laravel, focusing on optimization and caching. Laravel performs well, but for complex applications, ThinkPHP may be a better fit.

Development suggestions: How to use the ThinkPHP framework to implement asynchronous tasks Development suggestions: How to use the ThinkPHP framework to implement asynchronous tasks Nov 22, 2023 pm 12:01 PM

"Development Suggestions: How to Use the ThinkPHP Framework to Implement Asynchronous Tasks" With the rapid development of Internet technology, Web applications have increasingly higher requirements for handling a large number of concurrent requests and complex business logic. In order to improve system performance and user experience, developers often consider using asynchronous tasks to perform some time-consuming operations, such as sending emails, processing file uploads, generating reports, etc. In the field of PHP, the ThinkPHP framework, as a popular development framework, provides some convenient ways to implement asynchronous tasks.

How to install thinkphp How to install thinkphp Apr 09, 2024 pm 05:42 PM

ThinkPHP installation steps: Prepare PHP, Composer, and MySQL environments. Create projects using Composer. Install the ThinkPHP framework and dependencies. Configure database connection. Generate application code. Launch the application and visit http://localhost:8000.

How is the performance of thinkphp? How is the performance of thinkphp? Apr 09, 2024 pm 05:24 PM

ThinkPHP is a high-performance PHP framework with advantages such as caching mechanism, code optimization, parallel processing and database optimization. Official performance tests show that it can handle more than 10,000 requests per second and is widely used in large-scale websites and enterprise systems such as JD.com and Ctrip in actual applications.

RPC service based on ThinkPHP6 and Swoole to implement file transfer function RPC service based on ThinkPHP6 and Swoole to implement file transfer function Oct 12, 2023 pm 12:06 PM

RPC service based on ThinkPHP6 and Swoole implements file transfer function Introduction: With the development of the Internet, file transfer has become more and more important in our daily work. In order to improve the efficiency and security of file transfer, this article will introduce the specific implementation method of the RPC service based on ThinkPHP6 and Swoole to implement the file transfer function. We will use ThinkPHP6 as the web framework and utilize Swoole's RPC function to achieve cross-server file transfer. 1. Environmental standard

See all articles