如何使用CKEditor 5图片上传？

问题描述

嗨，我当前正在使用CKEditor 5，我的问题是图像上传。 ckeditor允许我上传图像，它显示在CKEditor中，该文件也正在使用自定义VB脚本上传至文件夹，但我一直收到错误消息：无法上传文件-文件名。然后，图像从ckeditor中消失。有人知道我在做什么错吗？图像URL是否没有正确地传递回CKEditor？

    var myEditor;
    ClassicEditor
        .create(document.querySelector('#CKEditor1'),{

            ckfinder: {
                filebrowserUploadMethod: 'form',// Upload the images to the server using the CKFinder QuickUpload command.
                uploadUrl: 'Scripts/uploadVB.aspx?CKEditor=CKEditor1&CKEditorFuncNum=1&langCode=en'
            }
        })
        .then(editor => {
            console.log('Editor was initialized',editor);
            myEditor = editor;
            
        })
    .catch( error => {
        console.error( error );
        });

 <div id="CKEditor1">This is some sample content.</div>

UploadVB Page

<%@ Page Language="VB" Strict="true"%>
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
<script runat="server">
    Sub Page_Load(ByVal o As Object,ByVal e As EventArgs)
        Response.Write(processupload())
        'processupload()
    End Sub
    'https://github.com/AlfonsoML/CKEditorUploader/blob/master/uploadVB.aspx
   
       
        Dim basePath As String = "C:\Users\new\Image\CN_Image"
        ' Step 3: Put here the Url that should be used for the upload folder (it the URL to access the folder that you have set in $basePath
        ' you can use a relative url "/images/",or a path including the host "http://example.com/images/"
        ' ALWAYS put the final slash (/)
        Dim baseUrl As String = "/Image/CN_Image/"
        ' Done. Now test it!
        ' No need to modify anything below this line
        '----------------------------------------------------
        ' ------------------------
        ' Input parameters: optional means that you can ignore it,and required means that you
        ' must use it to provide the data back to CKEditor.
        ' ------------------------
        ' Optional: instance name (might be used to adjust the server folders for example)


        Dim CKEditor As String = HttpContext.Current.Request("CKEditor")

        ' required: Function number as indicated by CKEditor.
        Dim funcNum As String = HttpContext.Current.Request("CKEditorFuncNum")
        'Dim CKEditorFuncNum As String = Context.Request("CKEditorFuncNum")
        ' Optional: To provide localized messages
        Dim langCode As String = HttpContext.Current.Request("langCode")
        ' ------------------------
        ' Data processing
        ' ------------------------
        Dim total As Integer
        Try
            total = HttpContext.Current.Request.Files.Count
        Catch ex As Exception
            Return sendError("Error uploading the file")
        End Try
        If (total = 0) Then
            Return sendError("No file has been sent")
        End If
        If (Not System.IO.Directory.Exists(basePath)) Then
            Return sendError("basePath folder doesn't exists")
        End If
        'Grab the file name from its fully qualified path at client
        Dim theFile As HttpPostedFile = HttpContext.Current.Request.Files(0)
        Dim strFileName As String = theFile.FileName
        If (strFileName = "") Then
            Return sendError("File name is empty")
        End If
        Dim sFileName As String = System.IO.Path.GetFileName(strFileName)
        Dim name As String = System.IO.Path.Combine(basePath,sFileName)
        theFile.SaveAs(name)
        Dim url As String = baseUrl + sFileName.Replace("'","\'")

        ' ------------------------
        ' Write output
        ' ------------------------

        Return "<scr" + "ipt type='text/javascript'> window.parent.CKEDITOR.tools.callFunction(" + funcNum + ",'" + url + "','')</scr" + "ipt>"


    End Function
    Private Function sendError(ByVal msg As String) As String
        Dim funcNum As String = HttpContext.Current.Request("CKEditorFuncNum")
        Return "<scr" + "ipt type='text/javascript'> window.parent.CKEDITOR.tools.callFunction(" + funcNum + ",'','" + msg + "')</scr" + "ipt>"
    End Function
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）