使用CKEditor自定义文件浏览器，并使用ASP.Net MVC进行上传

Using CKEditor custom filebrowser and upload with ASP.Net MVC

本文关键字：MVC Net ASP 自定义 CKEditor 文件 浏览器 使用      更新时间：2023-10-30

我有一个MVC应用程序，我正试图与它一起使用CKEditor。我看到的一个例子是这里，但还有很多其他的例子。到目前为止还不错，但有一部分我仍然很好奇，那就是js，它将所选文件名发送回文件上传对话框文本框。

<script type="text/javascript">
    $(document).ready(function () {
        $(".returnImage").click("click", function (e) {
            var urlImage = $(this).attr("data-url");
            window.opener.updateValue("cke_72_textInput", urlImage);
            window.close();
        });
    });
</script>

特别是cke_72_textInput元素。我的例子一开始并不起作用，直到我打开chrome-dev工具，找到了文本输入的实际id，在我的例子中是cke_76_textinput。我想知道为什么身份证会改变？用这样一个特定的id来指代似乎有点"脆弱"？上面的js代码只是获取所选的图像文件，并将其返回到fileupload对话框的文本框中。

是否有公开的东西间接引用了这个文本框元素，而没有通过id指定它（例如通过config）？

查看：

$(document).ready(function () {   
 CKEDITOR.replace('Text-area-name', {
            filebrowserImageUploadUrl: '/Controller-name/UploadImage'
        });
        CKEDITOR.editorConfig = function (config) {
            // Define changes to default configuration here. For example: 
            config.language = 'de';
            // config.extraPlugins = 'my_own_plugin'; // if you have any plugin 
            // config.uiColor = '#AADC6E'; 
            // config.image_previewText = CKEDITOR.tools.repeat(' Hier steht dann dein guter Text. ', 8 ); 
            // config.contentsLanguage = 'de'; 
            config.height = 350; // 350px, specify if you want a larger height of the editor 
            config.linkShowAdvancedTab = false;
            config.linkShowTargetTab = false;
        };
 CKEDITOR.on('dialogDefinition', function (ev) {
            var dialogName = ev.data.name;
            var dialogDefinition = ev.data.definition;
            ev.data.definition.resizable = CKEDITOR.DIALOG_RESIZE_NONE;
            if (dialogName == 'link') {
                var infoTab = dialogDefinition.getContents('info');
                infoTab.remove('protocol');
                dialogDefinition.removeContents('target');
                dialogDefinition.removeContents('advanced');
            }
            if (dialogName == 'image') {
                dialogDefinition.removeContents('Link');
                dialogDefinition.removeContents('advanced');
                var infoTab = dialogDefinition.getContents('info');
                infoTab.remove('txtBorder');
                infoTab.remove('txtHSpace');
                infoTab.remove('txtVSpace');
                infoTab.remove('cmbAlign');
            }
        });
    }

在控制器上：

 [HttpPost]
    public ActionResult UploadImage(HttpPostedFileBase file, string CKEditorFuncNum, string CKEditor, string langCode)
    {
     if (file.ContentLength <= 0)
            return null;
        // here logic to upload image
        // and get file path of the image
        const string uploadFolder = "Assets/img/";
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath(string.Format("~/{0}", uploadFolder)), fileName);
        file.SaveAs(path);
        var url = string.Format("{0}{1}/{2}/{3}", Request.Url.GetLeftPart(UriPartial.Authority),
            Request.ApplicationPath == "/" ? string.Empty : Request.ApplicationPath,
            uploadFolder, fileName);
        // passing message success/failure
        const string message = "Image was saved correctly";
        // since it is an ajax request it requires this string
        var output = string.Format(
            "<html><body><script>window.parent.CKEDITOR.tools.callFunction({0}, '"{1}'", '"{2}'");</script></body></html>",
            CKEditorFuncNum, url, message);
        return Content(output);
    }

我遇到了同样的问题。。。考虑到这似乎是一个常见的用例，我找不到任何官方文档，这让我有点沮丧。

无论如何，请看一下这里的快速教程：http://r2d2.cc/2010/11/03/file-and-image-upload-with-asp-net-mvc2-with-ckeditor-wysiwyg-rich-text-editor/.万一链接断了，下面是我所做的。

    [HttpPost]
    public ActionResult UploadImage(HttpPostedFileBase upload, string ckEditorFuncNum)
    {
        /* 
           add logic to upload and save image here
        */
        var path = "~/Path/To/image.jpg"; // Logical relative path to uploaded image
        var url = string.Format("{0}://{1}{2}", 
            Request.Url.Scheme, 
            Request.Url.Authority, 
            Url.Content(path)); // URL path to uploaded image
        var message = "Saved!"; // Optional
        var output = string.Format("<script>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}');</script>", 
            CKEditorFuncNum, 
            url, 
            message);
        return Content(output);
    }
相关文章：