Question

我们的管理网站上有一个textarea使用CKEditor 4.4，用户可以在其中编辑内容。他们希望能够从他们的计算机添加图像，并将它们自动上传到服务器进行托管。

我已经看过a number of image upload scripts for CKEditor，但它们都带有PHP后端。 ASP.NET MVC 4是否存在？

我已经看到this post和this one显示了WebForms的服务器端控件，但是还没有找到我们可以插入或修改的MVC版本符合我们的口味。

我唯一的选择是使用现有的PHP插件之一并将端点重写为ASP.NET MVC吗？

感谢。

Answer 1

插件将图像异步发送到服务器。只要你有一个ASP.NET MVC / Web Api端点来接受图像并将其保存到相关位置/更新相关表，你应该是好的。确保您返回插件所期望的数据。

例如，在您提供的演示页面中，PHP服务器页面在成功上传图像时返回以下字符串

<script type="text/javascript">
    window.parent.CKEDITOR.tools.callFunction("92", "\/userfiles\/images\/myImgy.jpg", "");
</script>

在您的Web api端点中，您可以使用HttpContext.Current.Request.Files集合来查找已发布的文件。

Answer 2

这些并非完全是MVC示例，但您可以在VB.Net和C＃中找到一个样本来处理来自CKEditor的上传：https://github.com/AlfonsoML/CKEditorUploader

选择所需的代码并将其调整为CMS。

Answer 3

根据接受的答案中提到的Alfonso的WebForms代码，我最终在MVC中使用了类似于此的脚本：

using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class CKEditorController : Controller
    {
        const string basePath = @"D:\CKFinder\ckfinder\userfiles\";
        const string baseUrl = @"/ckfinder/userfiles/";

        const string scriptTag = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}')</script>";

        public ActionResult Index()
        {
            var funcNum = 0;
            int.TryParse(Request["CKEditorFuncNum"], out funcNum);

            if (Request.Files == null || Request.Files.Count < 1)
                return BuildReturnScript(funcNum, null, "No file has been sent");

            if (!System.IO.Directory.Exists(basePath))
                return BuildReturnScript(funcNum, null, "basePath folder doesn't exist");

            var receivedFile = Request.Files[0];

            var fileName = receivedFile.FileName;
            if (string.IsNullOrEmpty(fileName))
            {
                return BuildReturnScript(funcNum, null, "File name is empty");
            }

            var sFileName = System.IO.Path.GetFileName(fileName);

            var nameWithFullPath = System.IO.Path.Combine(basePath, sFileName);
            //Note: you may want to consider using your own naming convention for files, as this is vulnerable to overwrites
            //e.g. at the moment if two users uploaded a file called image1.jpg, one would clash with the other.
            //In the past, I've used Guid.NewGuid() combined with the file extension to ensure uniqueness.
            receivedFile.SaveAs(nameWithFullPath);

            var url = baseUrl + sFileName;

            return BuildReturnScript(funcNum, url, null);
        }

        private ContentResult BuildReturnScript(int functionNumber, string url, string errorMessage)
        {
            return Content(
                string.Format(scriptTag, functionNumber, HttpUtility.JavaScriptStringEncode(url ?? ""), HttpUtility.JavaScriptStringEncode(errorMessage ?? "")),
                "text/html"
                );
        }
    }
}

Answer 4

试试这个

Html和JavaScript

import org.apache.spark.sql.functions._
val updatedDf = Df.withColumn("name", regexp_replace(col("name"), ",", ""))

控制器

 <script src="~/Vendors/ckeditor/ckeditor.js"></script>
 <script src="~/Vendors/ckeditor/adapters/jquery.js"></script>
    <div class="jumbotron">
            <textarea name="editor1"></textarea>
            <script>
                CKEDITOR.replace('editor1', {
                    uiColor: '#9AB8F3',
                    filebrowserUploadUrl: '/CkEditorUpload/'
                });
            </script>

    </div>

用于CKEditor的ASP.NET MVC图像上传器？

4 个答案: