Question

我有一个MVC应用程序，我试图使用CKEditor。我看到的一个例子是here，但还有很多其他的例子。到目前为止一切都很好，但我仍然很好奇的一个部分是将所选文件名发送回文件上传对话框文本框的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工具并找到textinput的实际id，这在我的情况下是cke_76_textInput。为什么id改变我想知道？似乎有点脆弱＆＃34;引用这样的特定ID？上面的js代码只获取所选的图像文件并将其返回到fileupload对话框的文本框中。

是否有暴露的东西间接引用此文本框元素而未通过id指定（例如通过配置）？

Answer 1

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

无论如何，请看一下快速教程：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);
    }

Answer 2

在视图上：

$(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);
    }

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

2 个答案: