Brijpal Sharma
html
Publish on:-May 18th, 2020 ,
Category:- Web Development
Brijpal Sharma
html
Publish on:-May 18th, 2020 ,
Category:- Web Development
In this blog post, I use Ckeditor 4 and CKfinder 3 To upload an image from the Compter to sever.
Download Files from given below link Or Oficial site of CKEditor
Create a view page where you want to add CKEditor with CKFinder.
HTML Code
<textarea name=body id="editor1" rows="5 " cols="5"></textarea>
Script Code
<script type=text/javascript src={{asset('/assets/plugins/ckeditor/ckeditor.js')}}></script>
File Structure
assets->plugins->ckeditor
assets->plugins->ckfinder
If add do the right away you can see we have an image upload option with Browse Server. to activate this now add CKFinder File Path.
<script type=text/javascript>
CKEDITOR.replace( 'editor1',{
filebrowserBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
After that, you can see we have a File Browser Panel.
Now you can upload the image to your website and application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name=body id="editor1" rows="5 " cols="5"></textarea>
<script type=text/javascript src={{asset('/assets/plugins/ckeditor/ckeditor.js')}}></script>
<script type=text/javascript>
CKEDITOR.replace( 'editor1',{
filebrowserBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
</body>
</html>
Download Plugins from here
Step: 1 Place plugin file in CKEditor/plugins folder
Step: 2 Add some code as given below into the ckeditor/Config.js file.
assets/plugins/ckeditor/Config.js
config.extraPlugins = 'maximize';
Here In My Case "maximize" is my plugin name. and add to the toolbar groups.
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'forms' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
{ name : 'maximize'} //here added new plugin
];
So here we completed a blog on How To Integrate CKFinder with CKEditor. I hope it's will help you
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
You must be logged in to post a comment.