Share and recommend a useful TP rich text editor-CKEditor
Oct 25, 2021 pm 07:16 PMThis 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!
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/
##1. Introduce the ckeditor core file ckeditor.js into the page <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Copy after login
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2. Insert the HTML control where the editor is used<textarea id="content" name="content" cols="30" rows="2"></textarea>
Copy after login
<textarea id="content" name="content" cols="30" rows="2"></textarea>
3. Replace the corresponding control with the editor code <script type="text/javascript">
var editor;
window.onload = function()
{
editor = CKEDITOR.replace( 'content', {
filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上传图片的后端URL地址
image_previewText : ' '///去掉图片上传预览区域显示的文字
});
};
</script>
Copy after login
<script type="text/javascript"> var editor; window.onload = function() { editor = CKEDITOR.replace( 'content', { filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上传图片的后端URL地址 image_previewText : ' '///去掉图片上传预览区域显示的文字 }); }; </script>
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\"." } }
Upload failedReturn:
{ "uploaded": 0, "error": { "message": "The file is too big." } }
Backend upload image code:
/** * @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); }
6. Get ckeditor in js Content<script type="text/javascript">
var editor;
$(function() {
editor = CKEDITOR.replace('content');
})
editor.document.getBody().getText();//取得纯文本
editor.document.getBody().getHtml();//取得html文本
</script>
Copy after login
<script type="text/javascript"> var editor; $(function() { editor = CKEDITOR.replace('content'); }) editor.document.getBody().getText();//取得纯文本 editor.document.getBody().getHtml();//取得html文本 </script>
7. Using color plug-ins
1. You need to download three plug-ins (one is indispensable), download address:https://ckeditor.com/cke4/addon/colorbuttonhttps://ckeditor.com/cke4/addon/floatpanelhttps://ckeditor.com/ cke4/addon/panelbutton2. Unzip the downloaded plug-in into the ckeditor\plugins directory3. Load the plug-inMethod 1: In ckeditor/config In the .js file, add the plug-in configuration as follows:
CKEDITOR.editorConfig = function( config ) { ...省略前面的代码 //加载插件 config.extraPlugins = 'colorbutton,panelbutton,floatpanel'; }
<script type="text/javascript"> var editor; window.onload = function() { editor = CKEDITOR.replace( 'content', { filebrowserImageUploadUrl : '{:url("@admin/article/uploadPic")}',//上传图片的后端URL地址 image_previewText : ' ',///去掉图片上传预览区域显示的文字 extraPlugins: 'colorbutton',//使用颜色插件 }); }; </script>
8. Customize the toolbar configuration
Set in the ckeditor/config.js fileCKEDITOR.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;h1;h2;h3;h4;h5;h6;pre'; config.removeButtons = 'Underline,Subscript,Superscript'; config.removeDialogTabs = 'image:advanced;link:advanced'; //加载插件 config.extraPlugins = 'colorbutton,panelbutton,floatpanel'; };
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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

There are several versions of thinkphp

Which one is better, laravel or thinkphp?

Development suggestions: How to use the ThinkPHP framework to implement asynchronous tasks

ThinkPHP6 backend management system development: realizing backend functions
