Published - | Updated - May 18, 2021 12:28 am
183 Views
Hi,
Today, i we will show you How to upload image in ckeditor laravel. This article will give you simple example of How to upload image in ckeditor laravel. you will learn How to upload image in ckeditor laravel. So let’s follow few step to create example of How to upload image in ckeditor laravel.
I will also tell you how to setup the ckeditor. this is a very easy to browse your image, file etc upload.
Step 1:- Download Ckeditor
Step 2:- Download Kcfinder For Image Uploading
http://kcfinder.sunhater.com/download.
Public Directory Create New Folder like ‘templateEditor’ and put both folder there.
Step 3:- Open config.js
public/templateEditor/ckeditor/config.js
put code as i under
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserBrowseUrl = '/templateEditor/kcfinder/browse.php?opener=ckeditor&type=files';
config.filebrowserImageBrowseUrl = '/templateEditor/kcfinder/browse.php?opener=ckeditor&type=images';
config.filebrowserFlashBrowseUrl = '/templateEditor/kcfinder/browse.php?opener=ckeditor&type=flash';
config.filebrowserUploadUrl = '/templateEditor/kcfinder/upload.php?opener=ckeditor&type=files';
config.filebrowserImageUploadUrl = '/templateEditor/kcfinder/upload.php?opener=ckeditor&type=images';
config.filebrowserFlashUploadUrl = '/templateEditor/kcfinder/upload.php?opener=ckeditor&type=flash';
};
Step 4:- add code in your blade file
<head>
<title>ckeditor laravel</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/templateEditor/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</body>