Voilà j'ai réussi a faire quelque choses de potable.
Dans la page plugin.js le code est le suivant :
var iframeWindow = null;
CKEDITOR.plugins.add( 'picture',{
requires : 'iframedialog' ],
init: function( editor ){
editor.addCommand( 'pictureDialog', new CKEDITOR.dialogCommand( 'pictureDialog' ) );
editor.ui.addButton( 'picture',{
label: 'Inserer une image',
command: 'pictureDialog',
icon: this.path + 'images/icon.png'
});
CKEDITOR.dialog.add( 'pictureDialog', function ()
{
return{
title : 'Ajouter une image',
width : 800,
height : 460,
contents : {
id : 'iframe',
label : 'Ajouter une image...',
expand : true,
elements : {
type : 'iframe',
src : 'NomDuSite_racine/gadmin/medias/index',
width : '100%',
height : '460px',
onContentLoad : function(){
var iframe = document.getElementById(this._.frameId);
iframeWindow = iframe.contentWindow;
}
}]
}],
onOk : function(){
}
}
});
}
});
Dans la page medias/admin_index.php, voici le code que j'ai.
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#upload" data-toggle="tab">Ajouter une image</a></li>
<li><a href="#select" data-toggle="tab">Séléctionner une image</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="upload">
<form action="<?php echo router::url('admin/medias/index/'.$post_id); ?>" method="post" enctype="multipart/form-data" class="form-horizontal">
<?php echo $this->form->input('name','Titre de l\'image'); ?>
<?php echo $this->form->input('file','', array('type'=>'btn-picture')); ?>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Envoyé</button>
<a href="javascript:history.go(-1)" class="btn">Annuler</a>
</div>
</form>
</div>
<div class="tab-pane fade" id="select">
<div class="row-fluid">
<div class="thumbnails">
<?php if($images[0]){ ?>
<?php foreach ($images as $k => $v){ ?>
<div class="span3">
<div class="thumbnail img-rounded">
<a href="#" class="img-rounded selectImg">
<img class="img-rounded" src="<?php echo router::webroot('img_uploaded/'.$v->file); ?>"/>
</a>
<div class="caption">
<h4><?php if(!empty($v->name)){ echo $v->name; }else{ echo 'Titre non défini'; } ?></h4>
<a class="btn btn-small btn-danger" onclick="return confirm('Voulez vous vraiment supprimer cette image ?');" href="<?php echo router::url('admin/medias/delete/'.$v->id.DS.$v->file); ?>">
<i class="icon-trash icon-white"></i> Supprimer
</a>
<a class="btn btn-inverse btn-small btnOptionImg hidden" href="#"><i class="icon-wrench icon-white"></i></a>
</div>
</div>
</div>
<?php } ?>
<!-- Option d'image -->
<div class="span8">
<div class="thumbnail_OptionImg hidden">
<fieldset>
<legend>Option de l'image</legend>
<div class="span4">
<label>Largeur :</label>
<input type="text" class="span12" id="widthImg" placeholder="200px" value="">
<label>Hauteur :</label>
<input type="text" class="span12" id="heightImg" placeholder="200px" value="">
</div>
<label>Positionnement de l'image :</label>
<select id="positionImg">
<option value="left">Gauche</option>
<option value="right">Droite</option>
</select>
<p class="span12">
<a class="btn" id="btnChangeImg" href="#">Changer d'image</a>
</p>
</fieldset>
</div>
</div>
</div>
</div>
<input type="hidden" id="iframe_hLinkImg" value="">
<?php }else{ echo 'Il n\'y a aucune image sur le serveur veuillez en <a href="#" id="toggleTabUpload">ajouter</a> !'; } ?>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="<?php echo router::webroot('js/bootstrap.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo router::webroot('ckeditor/ckeditor.js'); ?>"></script>
<script type="text/javascript">
$(document).ready(function() {
var CKEDITOR = window.parent.CKEDITOR;
var oEditor = CKEDITOR.instances.editorName;
var okListener = function(ev) {
if(document.getElementById('widthImg').value == ''){ width = '150px' }else{ width = document.getElementById('widthImg').value; }
if(document.getElementById('heightImg').value == ''){ height = 'auto' }else{ height = document.getElementById('widthImg').value; }
if(document.getElementById('positionImg').value != ''){ position = 'class="align'+document.getElementById('positionImg').value+'"'; }
this._.editor.insertHtml('<span '+position+'><img style="width:'+width+';height:'+height+';" src="'+document.getElementById('iframe_hLinkImg').value+'" /></span>');
CKEDITOR.dialog.getCurrent().removeListener("ok", okListener);
CKEDITOR.dialog.getCurrent().removeListener("cancel", cancelListener);
};
var cancelListener = function(ev) {
CKEDITOR.dialog.getCurrent().removeListener("ok", okListener);
CKEDITOR.dialog.getCurrent().removeListener("cancel", cancelListener);
};
CKEDITOR.event.implementOn(CKEDITOR.dialog.getCurrent());
CKEDITOR.dialog.getCurrent().on("ok", okListener);
CKEDITOR.dialog.getCurrent().on("cancel", cancelListener);
// s'il n'y a pas d'image : après le click sur le lien "toggleTabUpload", on force l'affichage du tab Upload.
$('#toggleTabUpload').click(function(){
$('#myTab a[href="#upload"]').tab('show');
});
$('.selectImg').click(function(){
link = $(this).children('img').attr('src');
$('#iframe_hLinkImg').val(link);
$('.selectImg').parent().removeClass('success');
$(this).parent().addClass('success');
$('.btnOptionImg').addClass('hidden');
$(this).next('.caption').children('.btnOptionImg').removeClass('hidden');
});
$('.btnOptionImg').click(function(){
$('.thumbnail').parent().addClass('hidden');
$('.thumbnail.success').parent().removeClass('hidden');
$('.thumbnail_OptionImg').removeClass('hidden');
});
$('#btnChangeImg').click(function(){
$('.thumbnail').parent().removeClass('hidden');
$('.thumbnail_OptionImg').addClass('hidden');
});
});
</script>
j'ai plein de jquery pour l'animation, mais si tu copie ca, ca devrais jouer ...
Après il faut faire attention au style de l'éditeur qui n'est surement pas le même que les tiens ...
moi dans ckeditor/contents.css
j'appel mes CSS
@import url('NomDuSite_racine/webroot/css/bootstrap-responsive.min.css');
@import url('NomDuSite_racine/webroot/css/bootstrapjasny.fileupload.min.css');
@import url('NomDuSite_racine/webroot/css/bootstrap.min.css');
@import url('NomDuSite_racine/webroot/css/gouvins.css');
@import url('NomDuSite_racine/webroot/css/typography.css');