ckeditor最近修改一个上传的，原来的Image的上传插件功能很多，但是自己用，没有必要，就进行了修改，后来就改成了目前的样子，根据_samples/api_dialog.html 进行了修改，把页面里面的调用都进行了修改.
1.添加网址和上传在一个tab中
2.图片上传之后会直接把生成的值放到图片网址的input中。
1.index.html调用页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using API to customize dialogs - CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="./ckeditor.js"></script>
<script type="text/javascript" src="./mydialog.js"></script>
</head>
<body>
<h1>
CKEditor Sample
</h1>
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
<script type="text/javascript">
//调用封装的函数
makeEditor('editor1');
</script>
</body>
</html>
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的上传程序就略过了
<?php
$str = '{"picurl":/l.jpg"}';
$str = '{"error":-304}';
echo $str;
?>
生成的dialog的样子和editor
- 大小: 17.4 KB
- 大小: 12.8 KB
分享到：
相关推荐
最近项目开发需要用到CKEditor在线编辑器，但发现他本身没有自带，所以需要自己手动配置插件。但网上很多配置都有问题，自己摸索了好久终于搞定。需要注意的细节有：flvPlayer文件夹的内容直接放在ckeditor文件夹...
可以实现网络上传功能但是从官网上下载的没有上传图标，只能写地址，很不方便，这里增加了js代码来实现上传功能
CKEditor实现本地视频和图片的上传功能，不用kfinal
这个ckeditor的version为4.6.1,。 主要是添加了拖拽上传图片个上传视频的功能， 具体教程看博文：http://blog.csdn.net/u014044812/article/details/53897024
CKEditor 4图片上传CKEditor 4的简单隐藏iframe图片上传按钮下载档案将imageupload文件夹上传到ckeditor插件文件夹 [removed][removed][removed] CKEDITOR.plugins.addExternal('imageupload', '/ckeditor/plugins/...
ckeditor文件上传功能，附图片上传示例，java程序及返回结果。 strut配置 <param name="allowedTypes">image/bmp||image/png||image/gif||image/jpeg||image/jpg||image/pjpeg</param> ...
ckeditor4音频视频上传自定义插件
ckeditor4添加上传视频插件 后端java配置看下面的链接 https://blog.csdn.net/sxz13145/article/details/124410416
使用CKEditor3.6.0版本，使用上传组件实现Servlet上传图片，含有列子
ckeditor实现 视频上传CKEditor 是新一代的 FCKeditor，是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。
近日要用到CKEditor实现图片上传，网上找了好多代码，要么跑不起来，要么不全，比如不知道如何返回值。跳了不少坑，现在彻底搞定。 目前上传用的是ASP.NET,可以随便切换成PHP、JAVA或其它的语言 只需要把ckeditor...
CKEditor 自主控制图片上传 可以将上传图片记录到数据库中
ckeditor整合图片上传,ckeditor,图片上传
用自定义图片上传按钮代替原来的图片上传按钮，实现即时上传插入。覆盖原ckeditor。修改ckeditor.js中imgupload()的上传接口路径。根据接口返回自定义 success: function 中的代码解析出图片路径。
ckeditor .net ckeditor 带视频上传功能 根据自己的项目修改上传位置
Ckeditor上传图片！本身Ckeditor不具备上传图片功能的！前两天在一个博客园的一个博主那里讨了点Ckeditor上传图片的方法，现在共享给大家！博主的博客地址和实现方式我压缩在文件中了！大家支持正版哈！
ckeditor 自定义上传图片 可以自定义上传图片按钮，源码，
ckeditor ckfinder 上传本地图片