Question

我是CkEditor的新手，我已经成功地将编辑器整合并自定义到我的页面，但我无法上传图像。在CkEditor文档中，我发现他们使用PhP脚本上传文件，但我不知道如何将其添加到我的ASP.NET MVC项目中。

Answer 1

按照我的步骤进行操作：

首先，将其添加到您的布局：

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>

<!-- 		<input type="file" id="file-input"> -->
<p>Update</p>
<img class="dashboard-hme-img profile-pic" src="https://cdn.paperindex.com/piimages/dummy/vivek.png">
<i class="fa fa-camera upload-button"></i>
<input id="file-input" class="hidden" type="file" accept="image/*" />

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <!-- leftbox -->
        <div class="box-2">
          <div class="result"></div>
        </div>
        <!--rightbox-->
        <div class="box-2 img-result hide">
          <!-- result of crop -->
          <img class="cropped" src="" alt="">
        </div>
        <!-- input file -->
        <div class="box">
          <div class="options hide">
            <input type="hidden" class="img-w" value="200" min="200" max="1200" />
          </div>
          <!-- save btn -->

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button class="btn save hide">Save</button>
      </div>
    </div>

  </div>
</div>

然后将其添加到您的视图中：

@RenderSection("scripts", required: false)

您可以看到我正在使用CDN和CKeditor版本4.10.1。 @section scripts{ <script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script> <script> CKEDITOR.replace('textarea's name', { customConfig: '/js/CustomConfig.js' }); </script> }是一个自定义javascript文件，您可以在您的项目中创建它。在CustomConfig.js中添加以下代码：

CustomConfig.js

最终在操作中使用以下代码：

CKEDITOR.editorConfig = function (config) {   
    config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:upload';   
    config.filebrowserImageUploadUrl = '/Home/UploadImage' //Action for Uploding image  
};

[HttpPost] public ActionResult UploadImage(IFormFile upload, string CKEditorFuncNum, string CKEditor, string langCode) { if (upload.Length <= 0 ) return null; if (!upload.IsImage()) { var NotImageMessage = "please choose a picture"; dynamic NotImage = JsonConvert.DeserializeObject("{ 'uploaded': 0, 'error': { 'message': \"" + NotImageMessage + "\"}}"); return Json(NotImage); } var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower(); Image image = Image.FromStream(upload.OpenReadStream()); int width = image.Width; int height = image.Height; if ((width > 750) || (height > 500)) { var DimensionErrorMessage = "Custom Message for error" dynamic stuff = JsonConvert.DeserializeObject("{ 'uploaded': 0, 'error': { 'message': \"" + DimensionErrorMessage + "\"}}"); return Json(stuff); } if (upload.Length > 500 * 1024) { var LengthErrorMessage = "Custom Message for error"; dynamic stuff = JsonConvert.DeserializeObject("{ 'uploaded': 0, 'error': { 'message': \"" + LengthErrorMessage + "\"}}"); return Json(stuff); } var path = Path.Combine( Directory.GetCurrentDirectory(), "wwwroot/images/CKEditorImages", fileName); using (var stream = new FileStream(path, FileMode.Create)) { upload.CopyTo(stream); } var url = $"{"/images/CKEditorImages/"}{fileName}"; var successMessage = "image is uploaded successfully"; dynamic success = JsonConvert.DeserializeObject("{ 'uploaded': 1,'fileName': \"" + fileName + "\",'url': \"" + url + "\", 'error': { 'message': \"" + successMessage + "\"}}"); return Json(success); }是用于检查图像的一种淘汰方法：

IsImage()

如何在ASP.NET Core MVC项目中的CkEditor中上传图像？

1 个答案: