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 >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
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請
點擊舉報。
