當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[ckeditor系列]ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传

發布時間：2023/12/10 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 [ckeditor系列]ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

ckeditor最近修改一個上傳的，原來的Image的上傳插件功能很多，但是自己用，沒有必要，就進行了修改，后來就改成了目前的樣子，根據_samples/api_dialog.html 進行了修改，把頁面里面的調用都進行了修改.

1.添加網址和上傳在一個tab中

2.圖片上傳之后會直接把生成的值放到圖片網址的input中。

1.index.html調用頁面

.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代碼??

<?php ??

$str?=?'{"picurl":/l.jpg"}'; ??

$str?=?'{"error":-304}'; ??

echo?$str; ??

?>??

生成的dialog的樣子和editor

?

?

原文地址:http://www.cnblogs.com/hannover/archive/2011/07/29/2121545.html

轉載于:https://www.cnblogs.com/101rico/archive/2013/01/20/2868398.html

總結

以上是生活随笔為你收集整理的[ckeditor系列]ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：怎么把mxf转换成mp4？
下一篇：如何解决谷歌云盘wget无法下载大文件的