首页 > 代码库 > ckeditor在图像属性加入浏览图片

ckeditor在图像属性加入浏览图片

<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
 <meta charset="GB2312">
 <title>jLogic-CKEditor</title>
 <script src="http://www.mamicode.com/ckeditor/ckeditor.js"></script>
 <link rel="stylesheet" href="http://www.mamicode.com/ckeditorCfg/jLogic-ckeditor.css" charset="GB2312">
 <script>
  function getData()
  {
   var editor = CKEDITOR.instances.editor1;
   return editor.getData();
  }
  
  
  function setData(value)
  {
   var editor = CKEDITOR.instances.editor1;
   editor.setData( value );
  }
  
  
  function insertText(value)
  {
   var editor = CKEDITOR.instances.editor1;
   editor.insertText( value );
  }
  
  
  function insertHtml(value)
  {
   var editor = CKEDITOR.instances.editor1;
   editor.insertHtml( value );
  // if ( editor.mode == ‘wysiwyg‘ )
  //  editor.insertHtml( value );
  // else
  //  alert( ‘You must be in WYSIWYG mode!‘ );
  }
 </script>
 
</head>
<body>
 <textarea class="ckeditor" id="editor1" name="editor1">
  {jLogic-TextArea}
 </textarea>
 <script type="text/javascript">
          var editor = CKEDITOR.replace(‘editor1‘, addUploadButton(this));
          editor.on(‘instanceReady‘, function(event){
   event.editor.getCommand(‘maximize‘).exec();
  });
          
           function addUploadButton(editor){
           CKEDITOR.on(‘dialogDefinition‘, function( ev ){
               var dialogName = ev.data.name;
               var dialogDefinition = ev.data.definition;
               if ( dialogName == ‘image‘ ){
                   var infoTab = dialogDefinition.getContents( ‘info‘ );
                   infoTab.add({
                       type : ‘button‘,
                       id : ‘upload_image‘,
                       align : ‘center‘,
                       label : ‘添加图片‘,
                       onClick : function( evt ){
                           var thisDialog = this.getDialog();
                           var txtUrlObj = thisDialog.getContentElement(‘info‘, ‘txtUrl‘);
                           var txtUrlId = txtUrlObj.getInputElement().$.id;
                           addUploadImage(txtUrlId);
                       }
                   }, ‘browse‘);
               }
           });
        }

        function addUploadImage(theURLElementId){
         var obj = new Object();
       obj.name="";
         var imgUrl = window.showModalDialog("../ckeditor/samples/uploadsFiles.html",obj,"dialogWidth=400px;dialogHeight=200px");
        var urlObj = document.getElementById(theURLElementId);
         urlObj.value = http://www.mamicode.com/imgUrl;
         urlObj.fireEvent("onchange");
        }
    </script>
 
</body>
</html>

uploadsFiles.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="http://www.mamicode.com/">  
      
    <title></title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!--  
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">  
    -->  
  </head>  
    
  <body>  
    
 
        <input type="file" name="imgFile" id="fuPhoto" title="选择图片" />  
        <input type="submit" value="http://www.mamicode.com/确 定" id="btnUpload" onclick="yes()"/>  
    
 
    <script type="text/javascript">  
      function yes()
       {
        
      //  alert(document.getElementById("fuPhoto").value);
        //window.location.href="http://www.mamicode.com//replacebyclass.html";
        window.returnValue=http://www.mamicode.com/document.getElementById("fuPhoto").value;
        window.close();
        }
       
    </script>     
  </body>  
 </html>