Ist es möglich, Blueimp FileUpload (https://github.com/blueimp/jQuery-File-Upload) mit dem Editor CkEditor (http://ckeditor.com/) zu integrieren?Integration blueimp Dateiupload in ckeditor
Irgendwelche Hinweise?
Vielen Dank!
Ist es möglich, Blueimp FileUpload (https://github.com/blueimp/jQuery-File-Upload) mit dem Editor CkEditor (http://ckeditor.com/) zu integrieren?Integration blueimp Dateiupload in ckeditor
Irgendwelche Hinweise?
Vielen Dank!
Am Ende fand ich die Lösung von mir:
In der Datei index.php von blueimp Fileupload habe ich die Tabelle, indem die folgenden Zeilen bearbeitet zuerst den </tr>
Befehl:
<td>
<div class="btn scegli" id="chooseThis" >
<span class="url" style="display: none">"{%=file.url%}"</span>
<span>Choose</span>
</div>
</td>
Bei das Ende dieser Datei nach dem jquery Inklusion:
<script type="text/javascript">
$(".chooseThis").live("click", function (e) {
parent.triggerUploadImages($(this).children('.url').html());
});
</script>
ich ein einfaches Plugin entwickelt haben, in CKeditor zu verwenden:
CKEDITOR.plugins.add('fileUpload',
{
init: function (editor) {
editor.addCommand('OpenDialog',new CKEDITOR.dialogCommand('OpenDialog'));
editor.ui.addButton('FileUpload',
{
label: 'Upload images',
command: 'OpenDialog',
icon: CKEDITOR.plugins.getPath('fileUpload') + 'icon.gif'
});
editor.contextMenu.addListener(function(element){
return { 'My Dialog' : CKEDITOR.TRISTATE_OFF };
});
CKEDITOR.dialog.add('OpenDialog', function(api){
var dialogDefinition =
{
title : 'Gestisci immagini',
minWidth : 700,
minHeight : 500,
contents : [
{
expand : true,
padding : 0,
elements :
[
{
type : 'html',
html : ' <iframe src="../../includes/fileUpload/index.php" style="width:100%;height:490px" />'
}
]
}
],
buttons : []
};
return dialogDefinition;
});
}
});
Um die Schaltfläche zur Symbolleiste hinzuzufügen, müssen Sie auch die Datei config.js ändern. Der Name der Schaltfläche lautet: „Fileupload“
Dann Funktion Ich habe den CKeditor zu erstellen:
var editor, html = '';
function createEditor() {
if (editor) return;
var config = {};
editor = CKEDITOR.replace("editor",
{
extraPlugins : 'fileUpload',
});
}
Und dies ist die Funktion, die den Trigger verwalten:
function triggerUploadImages(url){
if(editor){
CKEDITOR.dialog.getCurrent().hide();
editor.insertHtml('<img src='+url+' />');
}
}
Was Sie versucht hat, bisher? Können Sie uns Ihren aktuellen Code zeigen oder erwarten Sie, dass jemand anders den Code für Sie schreibt? – AlfonsoML