Redactor(Wysiwyg编辑器)/图像上传/经典ASP/JON


Redactor (Wysiwyg editor) / Images Upload / Classic ASP / JSON

在与各种wysiwyg编辑器合作多年后,我实际上正在考虑购买impravi的redactor wysiwygEditor(http://imperavi.com/redactor/),然而,为了使用脚本的图像/文件上传功能,我试图篡改trail版本和Classic ASP。目前,图像/文件上载功能是用PHP/JONS编写的,我很想将它们重写为Classic ASP。

我会尽量在下面张贴代码:

带有REDACTOR WYSIWYG的HTML表单

<!DOCTYPE html>
<html>
<head>  
    <title>All uploads</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />       
    <link rel="stylesheet" href="../redactor/redactor.css" />
    <script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>   
    <script src="../redactor/redactor.js"></script>
    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $('#redactor_content').redactor({   
                imageUpload: '../demo/scripts/image_upload.php',
                fileUpload: '../demo/scripts/file_upload.php',
                imageGetJson: '../demo/json/data.json'
            });
        }
    );
    </script>               
</head>
<body>
    <div id="page">
    <textarea id="redactor_content" name="content">
        <h2>Hello and Welcome</h2>
        <p>I never did quite grasp him, though he endeavored to explain it to me upon numerous occasions.  I suggested telepathy, but he said no, that it was not telepathy since they could only communicate when in each others' presence, nor could they talk with the Sagoths or the other inhabitants of Pellucidar by the same method they used to converse with one another.</p>
        <p>"What they do," said Perry, "is to project their thoughts into the fourth dimension, when they become appreciable to the sixth sense of their listener.  Do I make myself quite clear?"</p>
        <p>"You do not, Perry," I replied.  He shook his head in despair, and returned to his work.  They had set us to carrying a great accumulation of Maharan literature from one apartment to another, and there arranging it upon shelves.  I suggested to Perry that we were in the public library of Phutra, but later, as he commenced to discover the key to their written language, he assured me that we were handling the ancient archives of the race.</p>
        <p>During this period my thoughts were continually upon Dian the Beautiful.  I was, of course, glad that she had escaped the Mahars, and the fate that had been suggested by the Sagoth who had threatened to purchase her upon our arrival at Phutra.  I often wondered if the little party of fugitives had been overtaken by the guards who had returned to search for them.  Sometimes I was not so sure but that I should have been more contented to know that Dian was here in Phutra, than to think of her at the mercy of Hooja the Sly One.  Ghak, Perry, and I often talked together of possible escape, but the Sarian was so steeped in his lifelong belief that no one could escape from the Mahars except by a miracle, that he was not much aid to us—his attitude was of one who waits for the miracle to come to him.</p>   
    </textarea> 
    </div>                      
</body>
</html>

PHP图像上传脚本-(图像上传:'../demo/scripts/IMAGE_UPLOAD.PHP(

<?php
// This is a simplified example, which doesn't cover security of uploaded images. 
// This example just demonstrate the logic behind the process. 

// files storage folder
$dir = '/home/web/sitecom/images/';
$_FILES['file']['type'] = strtolower($_FILES['file']['type']);
if ($_FILES['file']['type'] == 'image/png' || $_FILES['file']['type'] == 'image/jpg' || $_FILES['file']['type'] == 'image/gif' || $_FILES['file']['type'] == 'image/jpeg' || $_FILES['file']['type'] == 'image/pjpeg')
{
    // setting file's mysterious name
    $filename = md5(date('YmdHis')).'.jpg';
    $file = $dir.$filename;
    // copying
    copy($_FILES['file']['tmp_name'], $file);
    // displaying file    
    $array = array(
        'filelink' => '/images/'.$filename
    );
    echo stripslashes(json_encode($array));   
}
?>

数据JSON文件-(imageGetJson:'../demo/JSON/DATA.JSON'(

[
    { "thumb": "json/images/1_m.jpg", "image": "json/images/1.jpg", "title": "Image 1", "folder": "Folder 1" },
    { "thumb": "json/images/2_m.jpg", "image": "json/images/2.jpg", "title": "Image 2", "folder": "Folder 1" },
    { "thumb": "json/images/3_m.jpg", "image": "json/images/3.jpg", "title": "Image 3", "folder": "Folder 1" },
    { "thumb": "json/images/4_m.jpg", "image": "json/images/4.jpg", "title": "Image 4", "folder": "Folder 1" },
    { "thumb": "json/images/5_m.jpg", "image": "json/images/5.jpg", "title": "Image 5", "folder": "Folder 1" },
    { "thumb": "json/images/1_m.jpg", "image": "json/images/1.jpg", "title": "Image 6", "folder": "Folder 1" },
    { "thumb": "json/images/2_m.jpg", "image": "json/images/2.jpg", "title": "Image 7", "folder": "Folder 1" },
    { "thumb": "json/images/3_m.jpg", "image": "json/images/3.jpg", "title": "Image 8", "folder": "Folder 1" },
    { "thumb": "json/images/4_m.jpg", "image": "json/images/4.jpg", "title": "Image 9", "folder": "Folder 1" },
    { "thumb": "json/images/5_m.jpg", "image": "json/images/5.jpg", "title": "Image 10", "folder": "Folder 2" },
    { "thumb": "json/images/1_m.jpg", "image": "json/images/1.jpg", "title": "Image 11", "folder": "Folder 2" },
    { "thumb": "json/images/2_m.jpg", "image": "json/images/2.jpg", "title": "Image 12", "folder": "Folder 2" } 
]

额外信息:

起初,我无法让图像库显示任何图像,在浏览stackoverflow后,我再次发现:(让IIS6提供JSON文件(股份有限公司POST,get(?(上面写着:

默认情况下,W2K3及以上版本中的IIS不会提供它所知道的MIME类型以外的文件(而是返回404个错误(。

您需要向IIS添加一个MIME类型,使其能够提供该类型的文件。您可以在站点级别或服务器级别进行设置。

要为整个服务器设置此项:

Open the properties for the server in IIS Manager and click MIME Types
Click "New". Enter "JSON" for the extension and "application/json" for the MIME type.

完成这项操作后,我可以点击"插入图像"按钮,并通过选择选项查看服务器上的实际图像。

现在我需要开始将上面的内容重新写入经典ASP。

出于这个问题的目的,我创建了一个名为"all_uploads_classic_asp.html"的新页面,它基本上是"all_uloads.html"的副本,带有一些修改后的代码,请参阅我对以下代码的更改:

原始版本:

    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $('#redactor_content').redactor({   
                imageUpload: '../demo/scripts/image_upload.php',
                fileUpload: '../demo/scripts/file_upload.php',
                imageGetJson: '../demo/json/data.json'
            });
        }
    );
    </script>   

修订版:

    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $('#redactor_content').redactor({   
                imageUpload: '../demo/scripts/image_upload.asp',
                fileUpload: '../demo/scripts/file_upload.asp',
                imageGetJson: '../demo/json/data.json'
            });
        }
    );
    </script>   

然后,我创建了一个名为"image_upload.asp"的新页面,该页面与原始PHP版本"image_pload.PHP"位于同一目录中

经典ASP上传脚本

<%
' This is a simplified example, which doesn't cover security of uploaded images. 
' This example just demonstrate the logic behind the process in Classic ASP
' Written by I.Hekkenberg (DevCentral)
' files storage folder and path
Dim MySaveFolder, MySaveFolderPath
    MySaveFolder     = "../demo/json/images/"
    MySaveFolderPath = "d:'internet'root'www'devcentral.co.uk'wwwroot'demo'wysiwyg'demo'json'images'"
' Server / Script Timeout for storage larger images
    Server.ScriptTimeout = 1200
    Set objUpload = Server.CreateObject("Persits.Upload")
        On Error Resume Next
        objUpload.OverwriteFiles = False
        objUpload.SetMaxSize 5242880    ' Limit files to 5MB
        objUpload.SaveVirtual(MySaveFolder)
        ' display error message
        If Err <> 0 Then 
            Response.Write "<br />ERROR file uploading: " & Err.Description & " | " & MySaveFolder
            Err.Clear
        ' no error occured so continue as normal
        Else
            ' ======================================================
            ' HELP NEEDED WITH REWRITTING THE BELOW INTO CLASSIC ASP
            '                                                       
            '   // displaying file                                  
            '   $array = array(                                     
            '   'filelink' => '/images/'.$filename                  
            '   );                                                  
            '   echo stripslashes(json_encode($array));             
            '                                                       
            ' ======================================================
        End If
    Set objUpload = Nothing
%>

现在我被困在下一步该去哪里了,谢谢

如果你需要更多信息,请询问,我会尽快更新

Iwan Hekkenberg

更新:2013年1月16日

我已经按照"ulluoink"的指示将代码修改为以下内容,但在实际上传图像时仍然没有运气。<%这是一个简化的例子,不包括上传图像的安全性。"这个例子只是展示了经典ASP中流程背后的逻辑'作者:I.Hekkenberg(DevCentral(

' files storage folder and path
Dim MySaveFolder, MySaveFolderPath
    MySaveFolder     = "../demo/json/images/"
    MySaveFolderPath = "D:'internet'root'www'devcentral.co.uk'wwwroot'demo'wysiwyg'demo'json'images'"
    ' Server / Script Timeout for storage larger images
    Server.ScriptTimeout = 1200
    Set objUpload = Server.CreateObject("Persits.Upload")
        objUpload.OverwriteFiles = False
        objUpload.SetMaxSize 5242880    ' Limit files to 5MB
        objUpload.SaveVirtual(MySaveFolder)
        ' ======================================================
        ' HELP NEEDED WITH REWRITTING THE BELOW INTO CLASSIC ASP
        '                                                       
        '   // displaying file                                  
        '   $array = array(                                     
        '   'filelink' => '/images/'.$filename                  
        '   );                                                  
        '   echo stripslashes(json_encode($array));             
        '                                                       
        ' ======================================================
        ' Amended code by 'ulluoink'
        ' write json back to client
        with response
          .codePage = 65001
          .charset = "utf-8"
          .contentType = "application/json"
        end with
        For Each File in objUpload.Files
            response.write "{ ""filelink"": """ & MySaveFolder & "/" & File.FileName & """ }"
        Next
        ' ======================================================
    Set objUpload = Nothing
%>

如果什么都没有发生或显示出任何错误迹象,如何调试?我似乎在日志文件中也找不到任何东西。

附言:上述守则已予修订。我删除了经典asp的错误处理,一点运气都没有。

更新日期:2013年1月16日

好的,所以在查找image_upload.asp页面时出现了一个错误,这非常糟糕;(,在安装firebug并将404错误重新定时到image_upload.asp后,我在firebug控制台中发现了一个新错误:

TypeError:rawString.match(…(为null[此错误中断]

var jsonString=rawString.match(/{(.|''n(*}/([0];

它引用了redactor.js文件:(http://demo.devcentral.co.uk/wysiwyg/redactor/redactor.js)

        uploadLoaded : function()
        {
            var i = $('#' + this.id)[0];
            var d;
            if (i.contentDocument)
            {
                d = i.contentDocument;
            }
            else if (i.contentWindow)
            {
                d = i.contentWindow.document;
            }
            else
            {
                d = window.frames[this.id].document;
            }
            // Success
            if (this.uploadOptions.success)
            {
                if (typeof d !== 'undefined')
                {
                    // Remove bizarre <pre> tag wrappers around our json data:
                    var rawString = d.body.innerHTML;
                    var jsonString = rawString.match(/'{(.|'n)*'}/)[0];
                    var json = $.parseJSON(jsonString);
                    if (typeof json.error == 'undefined')
                    {
                        this.uploadOptions.success(json);
                    }
                    else
                    {
                        this.uploadOptions.error(this, json);
                        this.modalClose();
                    }
                }
                else
                {
                    alert('Upload failed!');
                    this.modalClose();
                }
            }
            this.element.attr('action', this.element_action);
            this.element.attr('target', '');
        },

更新和最终结果:18/01/2013

在"ulluoink"的帮助下,他再次向我指出上传脚本中的路径让我头疼,很明显,Firebug调试工具将是我在调试json等脚本时使用的工具,这个调试器得到了答案,这给我留下了深刻的印象,感谢"ulluolink"帮助我解决了这个问题。

下面我将发布我用来让这个工作的最终代码:

最终红显(WYSIWYG(-image_upload.asp

<%
' This is a simplified example, which doesn't cover security of uploaded images. 
' This example just demonstrate the logic behind the process in Classic ASP
' Written by I.Hekkenberg (DevCentral)
' files storage folder and path
Dim MySaveFolder : MySaveFolder      = "../json/images"
    Server.ScriptTimeout = 1200
    Set objUpload = Server.CreateObject("Persits.Upload")
        objUpload.OverwriteFiles = False
        objUpload.SetMaxSize 5242880    ' Limit files to 5MB
        objUpload.SaveVirtual(MySaveFolder)
        ' code below provide by 'ulluoink'
        ' write json back to client
        with response
          .codePage = 65001
          .charset = "utf-8"
          .contentType = "application/json"
        end with
        For Each File in objUpload.Files
            response.write "{ ""filelink"": ""json/images/" & File.FileName & """ }"
        Next
        ' ======================================================
    Set objUpload = Nothing
%>
'create instance of uploaded file
set File = objUpload.Files("file") 
' write json back to client
with response
  .codePage = 65001
  .charset = "utf-8"
  .contentType = "application/json"
end with
response.write "{ ""filelink"": """ & MySaveFolder & "/" & File.FileName & """ }"

您可以使用这样的类来生成json。。。