站長(zhǎng)資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

分享推薦一款好用的TP富文本編輯器-CKEditor

本篇文章給大家推薦一款炒雞好用的Thinkphp富文本編輯器–CKEditor,下面給大家介紹一下使用CKEditor的方法,希望對(duì)大家有所幫助!

分享推薦一款好用的TP富文本編輯器-CKEditor

最近一直在做Thinkphp后端開發(fā),之前都是使用layui的富文本編輯器,layui的優(yōu)點(diǎn)是簡(jiǎn)單易用,但缺點(diǎn)也比較明顯,就是編輯器功能比較少,無意中發(fā)現(xiàn)別人的項(xiàng)目里使用的是CKEditor富文本編輯器,感覺還闊以!下面讓我們一起來學(xué)習(xí)如何使用CKEditor。【相關(guān)教程推薦:thinkphp框架】

Ckeditor4下載地址(本教程選擇的是CKEditor 4.16版本):

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

分享推薦一款好用的TP富文本編輯器-CKEditor

一、在頁面中引入ckeditor核心文件ckeditor.js

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

二、在使用編輯器的地方插入HTML控件

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

三、將相應(yīng)的控件替換成編輯器代碼

<script type="text/javascript"> var editor; window.onload = function() { 	editor = CKEDITOR.replace( 'content', {             filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上傳圖片的后端URL地址             image_previewText : '&nbsp;'///去掉圖片上傳預(yù)覽區(qū)域顯示的文字     }); }; </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": "A file with the same name already exists. The uploaded file was renamed to "test.jpg"."     } }

上傳失敗返回:

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

后端上傳圖片的代碼:

/**     * @name='上傳圖片'         */     public function uploadPic()     { 		//注明:ckeditor是使用ajax上傳圖片,而不是用表單提交,因此不能使用request()->file()接收?qǐng)D片,只能用$_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);     }

六、js里獲取ckeditor里的內(nèi)容

<script type="text/javascript"> var editor; $(function() { 	editor = CKEDITOR.replace('content'); }) editor.document.getBody().getText();//取得純文本 editor.document.getBody().getHtml();//取得html文本 </script>

七、使用顏色插件

1、需要下載三個(gè)插件(缺一不可),下載地址:

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

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

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

2、下載好的插件解壓到ckeditorplugins目錄里

3、加載插件

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

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

方式二:在js里初始化editor時(shí),添加插件的配置

<script type="text/javascript"> var editor; window.onload = function() { 	editor = CKEDITOR.replace( 'content', {             filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上傳圖片的后端URL地址             image_previewText : '&nbsp;',///去掉圖片上傳預(yù)覽區(qū)域顯示的文字 			extraPlugins: 'colorbutton',//使用顏色插件     }); }; </script>

八、自定義工具欄配置

在ckeditor/config.js文件中設(shè)置

CKEDITOR.editorConfig = function( config ) { 	//工具欄設(shè)置 	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 =[         //加粗    斜體,    下劃線    穿過線    下標(biāo)字        上標(biāo)字         ['Bold','Italic','Underline','Strike','Subscript','Superscript'],         // 數(shù)字列表        實(shí)體列表         減小縮進(jìn)  增大縮進(jìn)         ['NumberedList','BulletedList','-','Outdent','Indent'],         //   左對(duì)齊        居中對(duì)齊        右對(duì)齊        兩端對(duì)齊         ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],         //超鏈接  取消超鏈接 錨點(diǎn)         ['Link','Unlink','Anchor'],         //圖片    flash    表格       水平線        表情     特殊字符      分頁符         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],         '/',         // 樣式     格式    字體   字體大小         ['Styles','Format','Font','FontSize'],         //文本顏色   背景顏色         ['TextColor','BGColor'],         //全屏         顯示區(qū)塊         源碼         ['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';  };

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
国产精品丝袜一区二区三区| 国产成人无码精品一区在线观看 | 精品水蜜桃久久久久久久| 国产精品女人在线观看| 日本一区精品久久久久影院 | 麻豆精品不卡国产免费看| 精品人妻伦一二三区久久| 无码精品人妻一区二区三区AV| 国产精品喷水在线观看| 老司机性色福利精品视频| 亚洲国产精品无码久久九九| 亚洲精品GV天堂无码男同| 91精品国产91久久| 99在线视频精品| 国产精品一区二区三区免费| 国产精品成熟老妇女| 国产精品美女在线观看| 久草视频这里只有精品| 色妞www精品视频免费看| 亚洲AV无码成人精品区狼人影院| 久久久久久精品免费看SSS| 亚洲精品日韩中文字幕久久久| 日韩AV无码精品人妻系列| 婷婷精品国产亚洲AV麻豆不片| 亚洲精品成人a在线观看| 精品韩国亚洲av无码不卡区| 久章草在线精品视频免费观看| 国产成人麻豆亚洲综合无码精品 | 亚洲精品国产成人99久久| 久久精品国产亚洲av麻| 亚洲国产成人精品无码区在线观看 | 国产精品伦理久久久久久| 亚洲国产精品自在拍在线播放| 四虎成人精品国产永久免费无码| 精品视频在线观看一区二区三区| 亚洲日韩av无码中文| 日韩a无吗一区二区三区| 另类ts人妖精品影院| 91精品婷婷国产综合久久| 亚洲精品亚洲人成在线麻豆| 精品久久人妻av中文字幕|