Question

我使用this helpful post来帮助构建我的功能。

TinyMCE图像在创建内容时效果很好，并且在我的详细信息视图（创建和详细信息操作）中显示效果很好。

当我尝试编辑条目时，TinyMCE编辑器不会显示上传的图像，也不允许我在编辑操作中上传更多图像。

这是TinyMCE初始化：

$(document).ready(function () {
            tinymce.init({
                selector: '#mytextarea',
                //plugins:["image"],
                plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste textcolor colorpicker textpattern"
                ],
                toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
                toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
                toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | visualchars visualblocks nonbreaking template pagebreak restoredraft",
                images_upload_url: "TinyMceUpload",
                branding: false,
            });            
        });

以下是控制器上载图像的代码：

//Image upload
        [HttpPost]
        public ActionResult TinyMceUpload(HttpPostedFileBase file)
        {
            //Response.AppendHeader("Access-Control-Allow-Origin", "*");
            //var location = SaveFile(Server.MapPath("~/Areas/Discussion/Content/Images/"), file);
            var location = SaveFile(Server.MapPath("~/Content/Images/Discussions/Article/"), file);

            return Json(new { location }, JsonRequestBehavior.AllowGet);
        }

                    private static string SaveFile(string targetFolder, HttpPostedFileBase file)
        {
            const int megabyte = 1024 * 1024;

            if (!file.ContentType.StartsWith("image/"))
            {
                throw new InvalidOperationException("Invalid MIME content type.");
            }

            var extension = Path.GetExtension(file.FileName.ToLowerInvariant());
            string[] extensions = { ".gif", ".jpg", ".png", ".svg", ".webp" };
            if (!extensions.Contains(extension))
            {
                throw new InvalidOperationException("Invalid file extension.");
            }

            if (file.ContentLength > (12 * megabyte))
            {
                throw new InvalidOperationException("File size limit exceeded.");
            }
            //string usr = UserIDString();
            var fileName = file.FileName + DateTime.Now.ToString("yyyyMMddHHmmssfff") + extension;
            //var fileName = Guid.NewGuid() + extension;
            var path = Path.Combine(targetFolder, fileName);
            file.SaveAs(path);


            return Path.Combine("/Content/Images/Discussions/Article", fileName).Replace('\\', '/');
            //return Path.Combine("/Areas/Discussion/Content/Images", fileName).Replace('\\', '/');
        }

我认为它可能与我选择的文件夹或GUID的使用有关，所以这就是为什么有些行被评论。我注意到当我上传图像，并在TinyMCE编辑器中选择“源代码”时，它在编辑和创建时都显示相同，但它只在Create上显示内容，也许它与TINYMCE没有完全相关初始化...

此外，如果在编辑器模式下如上所述在编辑器中的“源代码”中并且在图像链接（下方）上获得前导"../.."，则它将正确显示图像，但它仍然不允许我在编辑操作中上传图片。我在EDIT上传图片时收到HTTP 500错误。

我不知道这两个问题是否相关。如果有人能帮我解决这两个问题，我很感激。

编辑：

<img src="../../Content/Images/Discussions/Article/20180124121058299.png" alt="" width="240" height="240" />

创建：

<img src="../../Content/Images/Discussions/Article/20180124121208500.png" alt="" width="545" height="134" />

Answer 1

您需要在配置中将relative_urls设置为false。这就是弄乱你的形象路径。

TinyMCE图像MVC5无法编辑

1 个答案: