是否可以將Blueimp FileUpload(https://github.com/blueimp/jQuery-File-Upload) 與編輯器CkEditor(http://ckeditor.com/)進行集成?在ckeditor中集成blueimp文件上載
任何提示?
非常感謝!
是否可以將Blueimp FileUpload(https://github.com/blueimp/jQuery-File-Upload) 與編輯器CkEditor(http://ckeditor.com/)進行集成?在ckeditor中集成blueimp文件上載
任何提示?
非常感謝!
在最後,我發現我自己的解決方案:
在blueimp文件上傳的文件的index.php我已經編輯表第一添加以下行的</tr>
命令:
<td>
<div class="btn scegli" id="chooseThis" >
<span class="url" style="display: none">"{%=file.url%}"</span>
<span>Choose</span>
</div>
</td>
在這個文件的末尾,jquery的夾雜物後:
<script type="text/javascript">
$(".chooseThis").live("click", function (e) {
parent.triggerUploadImages($(this).children('.url').html());
});
</script>
我已經開發了一個簡單的插件在CKEDITOR使用方法:
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;
});
}
});
要將按鈕添加到工具欄,必須修改config.js。按鈕的名稱是:「文件上傳」
然後我有函數來創建CKEDITOR:
var editor, html = '';
function createEditor() {
if (editor) return;
var config = {};
editor = CKEDITOR.replace("editor",
{
extraPlugins : 'fileUpload',
});
}
這是管理的觸發功能:
function triggerUploadImages(url){
if(editor){
CKEDITOR.dialog.getCurrent().hide();
editor.insertHtml('<img src='+url+' />');
}
}
你嘗試過什麼至今?你能告訴我們你當前的代碼,還是你希望別人爲你寫代碼? – AlfonsoML