ckeditor最近修改一个上传的，原来的Image的上传插件功能很多，但是自己用，没有必要，就进行了修改，后来就改成了目前的样子，根据_samples/api_dialog.html 进行了修改，把页面里面的调用都进行了修改.
1.添加网址和上传在一个tab中
2.图片上传之后会直接把生成的值放到图片网址的input中。
1.index.html调用页面
This is some sample text. You are using
CKEditor Sample
2. mydialog.js
//外部调用函数
function makeEditor(id) {
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' )
{
var infoTab = dialogDefinition.getContents( 'info' );
//删除不要的标签页中选项
infoTab.remove( 'linkType' );
infoTab.remove( 'browse' );
var urlField = infoTab.get( 'url' );
//更改链接的文字
urlField['label'] = '链接地址';
//删除不要的tab标签页
dialogDefinition.removeContents( 'target' );
dialogDefinition.removeContents( 'advanced' );
//由于filebrowserUploadUrl的使用,删除链接dialog中出现的upload标签页
dialogDefinition.removeContents( 'upload' );
}
});
var editor = CKEDITOR.replace( id,
{
toolbar : [[ 'Source','-','Bold','Italic','Underline','Strike','-','Link','-','Unlink','-','AddImage']],
//引入上传
filebrowserUploadUrl : 'http://127.0.0.1/editor/upload.php'
});
editor.on( 'pluginsLoaded', function( ev )
{
if ( !CKEDITOR.dialog.exists( 'myAddImage' ) )
{
//生成调用js的地址 窗体函数
var href = 'http://' + window.location.host + '/editor/myAddImage.js';
CKEDITOR.dialog.add( 'myAddImage', href );
}
editor.addCommand( 'myImageCmd', new CKEDITOR.dialogCommand( 'myAddImage' ) );
editor.ui.addButton( 'AddImage',
{
label : '图片',
icon:'images/images.jpg', //增加按钮图标
command : 'myImageCmd'
});
});
}
//获取CKEditorFuncNum的值
function getUrlParam(url)
{
var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)', 'i') ;
var match = url.match(reParam) ;
return (match && match.length > 1) ? match[1] : '' ;
}
/*
* iframe的onload
* params:
* t obj iframe
* num int anonymous function number used to pass the url of a file to CKEditor (random number)
*/
function iframeLoad(t, num){
t.style.display = 'none';
var ret = t.contentWindow.document.body.innerHTML;
var fchild = t.contentWindow.document.body.firstChild;
// fchild.nodeType { 1 => form, 3 => textNode}
if (fchild.nodeType == 3) {
//我返回的ret是json数据,进行处理
var data = eval("("+ret+")");
if(data.picurl) {
picurl = data.picurl;
//触发filebrowser
CKEDITOR.tools.callFunction(num, picurl);
} else if(data.error) {
CKEDITOR.tools.callFunction(num, '', '上传失败'+data.error);
}
}
t.style.display = '';
}
3. myAddImage.js
CKEDITOR.dialog.add( 'myAddImage', function( editor )
{
var ADDIMAGE = 1,
regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i;
return {
title : '添加图片',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'addImage',
label : '添加图片',
title : '添加图片',
filebrowser : 'uploadButton',
elements :
[
{
id : 'txtUrl',
type : 'text',
label : '图片网址',
required: true
},
{
id : 'photo',
type : 'file',
label : '上传图片',
style: 'height:40px',
size : 38
},
{
type : 'fileButton',
id : 'uploadButton',
label : '上传',
filebrowser :
{
action : 'QuickUpload',
target : 'addImage:txtUrl'//更新的文本标签
},
onClick: function(){
var d = this.getDialog();
var _txtUrl = d.getContentElement('addImage','txtUrl');
var _photo = d.getContentElement('addImage','photo');
var _frameId = _photo._.frameId;
var _iframe = CKEDITOR.document.getById(_frameId);
//给iframe添加onload事件
_iframe.setAttribute('onload',
'getAjaxResult(this,'+getUrlParam(_photo.action)+')');
},
'for' : [ 'addImage', 'photo']
}
]
}
],
onOk : function(){
_src = this.getContentElement('addImage', 'txtUrl').getValue();
if (_src.match(regexGetSizeOrEmpty)) {
alert('请输入网址或者上传文件');
return false;
}
this.imageElement = editor.document.createElement( 'img' );
this.imageElement.setAttribute( 'alt', '' );
this.imageElement.setAttribute( 'src', _src );
editor.insertElement( this.imageElement );
}
};
});
4. upload.php页面，就直接返回了些数据，php的上传程序就略过了
生成的dialog的样子和editor
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有