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实际上是一个基于IFrame的富文本编辑器,通过JavaScript与HTML DOM进行交互。它的核心功能在于将HTML元素转换为可编辑的文本区域,并提供了API供开发者进行扩展和定制。 为了实现图片上传,我们需要做以下...
在《JavaScript高级编程》这本书中,虽然没有直接讲述Struts和CKEditor的整合,但它会深入讲解JavaScript的核心概念、DOM操作、事件处理、Ajax等技术,这些对于理解和实现CKEditor在Web页面中的集成至关重要。...
- **集成到现有项目**:根据项目需求,通过AJAX、iframe或其他方式将编辑器嵌入网页。 5. **安全与优化**: - **内容过滤**:通过Content Filter功能,限制用户输入的HTML标签和属性,防止XSS攻击。 - **性能...
4. **jQuery-2.1.4.min.js**:jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理和AJAX交互。在这个教程中,姜哥可能教读者如何利用jQuery与CKEditor结合,提高编辑器的交互性和动态性,比如动态添加编辑器...
- **客户端**:在Ckeditor中选择图片并触发上传操作,Ckeditor会通过AJAX或IFrame方式向服务器发送POST请求,携带图片文件。 - **服务器端**:Servlet接收到请求后,解析请求体,获取到上传的图片文件。这个过程通常...
CKEditor通常与AJAX(Asynchronous JavaScript and XML)技术结合使用,以提供异步更新和更好的用户体验。然而,标题提到的是在不依赖AJAX程序集的情况下使用CKEditor,这意味着我们将探讨如何在没有AJAX的情况下...
CKEditor实际上是在页面上创建了一个iframe,用于渲染编辑区域。当用户在编辑器中输入内容时,这些内容不会立即写入到与之关联的textarea元素中,而是存储在内存中。因此,当表单提交时,浏览器只会发送textarea元素...
在ASP.NET AJAX 2008环境中创建一个HTML编辑器是一项技术性的工作,涉及到Web开发中的前端和后端交互,以及Ajax技术的应用。这个项目可能是为了提供一个用户友好的在线文本编辑工具,允许用户在网页上编辑HTML内容,...
在本项目中,“基于js, javaScript实现的云文档小程序”是一个使用JavaScript技术栈构建的微信小程序应用。JavaScript,通常简称为JS,是用于前端开发的重要脚本语言,它在Web开发领域扮演着核心角色。这个小程序的...
iframe可以创建一个独立的浏览上下文,使得编辑区域与页面其他部分隔离,防止样式冲突。 3. **JavaScript初始化**:编辑器的初始化代码通常在JavaScript中完成,它负责加载编辑器库,绑定事件,以及设置初始配置。...
Layer是一款著名的JavaScript弹层插件,它为开发者提供了丰富的弹出窗口解决方案,包括提示、对话框、iframe、图片预览等。在本“layer富文本域demo”中,我们将探讨如何使用Layer来集成一个富文本编辑器,以提升...
这个`<iframe>`会包含一个可以编辑的文档。 2. 启用编辑模式:通过JavaScript来启用`<iframe>`的编辑功能。设置`designMode`属性为`"On"`,使得用户可以在其中输入和编辑内容。 ```javascript window.frames["x...
jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中,jQuery 文本编辑器是用于创建富文本输入区域的工具,让用户能够像在Word等桌面应用中一样编辑文本,...
1. **安装与引入**:下载FCKEditor的ASP版本,将文件上传至服务器,并在网页中通过JavaScript引用编辑器的脚本文件,通常是在HTML中插入一个IFrame,然后通过JavaScript初始化编辑器实例。 2. **配置设置**:可以...
总之,FCKeditor作为一个强大的在线编辑器,为Web开发者提供了丰富的文本编辑功能,同时具有良好的可扩展性和安全性。无论是初学者还是经验丰富的开发者,都可以通过学习和使用FCKeditor提升网站的用户体验。通过...
FCKeditor通过在浏览器端生成一个iframe,然后在这个iframe内创建一个模拟的文本编辑环境。用户在编辑器中进行的操作都会被实时转换成HTML代码,这些代码可以被发送到服务器,或者保存在客户端的本地存储中。编辑器...
此外,FCKeditor采用IFrame技术,将编辑区域封装在一个独立的浏览环境中,避免了与页面其他元素的冲突。 **二、主要功能** 1. **富文本编辑**:FCKeditor支持各种字体、字号、颜色、对齐方式等基本文本格式化操作...
FCKeditor主要基于JavaScript编写,利用AJAX技术与服务器进行异步交互,提高了用户体验。同时,它利用IFrame技术实现编辑区域的隔离,防止编辑内容影响到页面其他部分。 **三、安装与集成** 安装FCKeditor v2.6.3...
首先,富文本编辑器通常基于浏览器的DOM(Document Object Model)和JavaScript技术构建,利用iframe或者contentEditable属性来创建一个可编辑区域。通过监听用户的键盘输入、鼠标操作,编辑器可以实时更新内容并...