Bonjour la team,
après avoir bien suivi les 7 jours de développement et compléter mon MVC avec pas mal de model et controller j'ai voulu faire mumuse avec ckeditor au lieu de tinymce.
En fait je bloquais pour ajouter mes propres smiley sur tinymce version 3.5.7 donc je mue suis dit essayons avec ckeditor.
La tout est ok, j'ai bien intégré le js qui se charge en lieu et place de tinymce, idem pour les smileys.
Mais vient le sujet de l'image uploader ... et la je bloque sur le retour de l'url vers ckeditor.
D'après la doc http://docs.ckeditor.com/#!/guide/dev_file_browser_api
on doit le faire par un
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
je pensais le placer dans mon mediasController à la fin de la sauvegarde mais ça ne fonctionne.
Si l'un d'entre vous a déjà intégré CKEditor avec le modele MVC de cette serie de tuto, je suis preneur de tout conseil !
Graf, si tu vois comment m'aider j'en te serai plus que reconnaissant !
Merci d'avance à la communauté :)
3 réponses
Hello, je suis bloquer au même endroit que toi.
As-tu trouvé une solution depuis le temps ?
moi je suis partie sur un code un peut différent ...
CKEDITOR.plugins.add( 'picture',{
// requiert le plugin 'iframedialog'
requires : 'iframedialog' ],
init: function( editor ){
// ...
editor.addCommand( 'pictureDialog', new CKEDITOR.dialogCommand( 'pictureDialog' ) );
// ajoute le bouton 'picture' à la toolbar
// Appel la commande picureDialog, lors du click
editor.ui.addButton( 'picture',{
label: 'Inserer une image',
command: 'pictureDialog',
icon: this.path + 'images/icon.png'
});
// ajoute un iframe à la boite de dialogue
CKEDITOR.dialog.addIframe( 'pictureDialog', 'Ajouter une image', '/Fortunagan/gouvins/gadmin/medias/index', 800, 460);
}
});Mais j'arrive pas à faire mon retour d'info
Salut,
je pense que tagcash est en bonne voie. Dans ta page admin_index.php tu peux récupérer l'objet Editor. Tu peux ainsi ajouter ton image dans le CKEditor et le fermer manuellement.
// recupere l'objet CKEditor
var CKEDITOR = window.parent.glob;
// recupere l'objet editor
var editor = CKEDITOR.instances.editor1;
// cree un nouvel element avec html le code html a ajouter dans l'editeur
var newElement = CKEDITOR.dom.element.createFromHtml(html, editor.document);
// on l'insere dans l'editeur
editor.insertElement(newElement);
// on cache la div
CKEDITOR.dialog.getCurrent().hide();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');