如何使用P富文本編輯器CKEditor

這篇文章主要介紹“如何使用P富文本編輯器CKEditor”，在日常操作中，相信很多人在如何使用P富文本編輯器CKEditor問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用P富文本編輯器CKEditor”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

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

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

<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 : '&nbsp;'///去掉圖片上傳預覽區域顯示的文字
    });
};
</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()接收圖片，只能用$_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里的內容

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

七、使用顏色插件

1、需要下載三個插件（缺一不可），下載地址：

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

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

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

2、下載好的插件解壓到ckeditor\plugins目錄里

3、加載插件

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

CKEDITOR.editorConfig = function( config ) {

    ...省略前面的代碼

    //加載插件
    config.extraPlugins = 'colorbutton,panelbutton,floatpanel';
}

方式二：在js里初始化editor時，添加插件的配置

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

八、自定義工具欄配置

在ckeditor/config.js文件中設置

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;h2;h3;h4;h5;h6;h7;pre';
	config.removeButtons = 'Underline,Subscript,Superscript';
	config.removeDialogTabs = 'image:advanced;link:advanced';
	//加載插件
	config.extraPlugins = 'colorbutton,panelbutton,floatpanel'; 
};

到此，關于“如何使用P富文本編輯器CKEditor”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！