I am trying to get a simple CKEditor file upload on my page but I am not really sure how to do that. I downloaded the CKEditor plug-in and added it to my page. Now I have an upload screen with all kinds of things you need to fill in. I only need it to be able to browse your documents for photos and use those.
My CKEditor code on my page:
<div class="box box-info">
<div class="box-header">
<h3 class="box-title">CK Editor <small>Advanced and full of features</small></h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
</div><!-- /. tools -->
</div><!-- /.box-header -->
<div class="box-body pad">
<form>
<textarea id="editor1" name="editor1" rows="1" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</div>
</div><!-- /.box -->
<!-- CK Editor -->
<script type="text/javascript" src="/assets/plugins/ckeditor/ckeditor.js"></script>
<script>CKEDITOR.dtd.$removeEmpty['span'] = false; CKEDITOR.dtd.$removeEmpty['i'] = false;</script>
<script>CKEDITOR.env.isCompatible = true;</script>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
customConfig: '/assets/plugins/ckeditor/config.js',
filebrowserBrowseUrl : '/assets/plugins/ckeditor/plugins/browser/browse.php',
enterMode : CKEDITOR.ENTER_BR
});
</script>
how my config file looks like:
CKEDITOR.editorConfig = function( config ) {
config.filebrowserUploadUrl = '/uploader/upload.php';
config.toolbar = [
{ name: 'insert', items: ['Smiley'] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'links', items: [ 'Image' ] }
];
config.autoParagraph = false;
config.allowedContent = true;
config.fullPage = false;
config.extraAllowedContent = 'p(*)[*]{*};span(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
config.extraPlugins = 'youtube,ckawesome';
config.fontawesomePath = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
config.contentsCss = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css','https://app.gratiswebshopbeginnen.nl/assets/bootstrap/css/bootstrap.min.css'];
// Se the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Make dialogs simpler.
//config.removeDialogTabs = 'image:advanced;link:advanced';
};
Upload users Image with CKEditor
<textarea id="editor1" name="editor1" rows="1" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script src="../ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
So, from the above code we understand,
These setups will show the ckeditor. Furthermore for the image upload we need one more settings
Open config.js file(/ckeditor/config.js) and place the below code
config.filebrowserUploadUrl = '/uploader/upload.php';
So, the config.js should look like this
CKEDITOR.editorConfig = function( config ) {
config.filebrowserUploadUrl = '/uploader/upload.php';
};
So, at upload.php the uploaded file will be catch able, here you can have your own php code to store the uploaded file into your server
So,when these settings works, the upload screen will looks like this