受欢迎的博客标签

We could not find a file manager for the TinyMCE web editing tool which we use in all our Content Management Systems . We normally use the excellent Roxy Fileman file manager .

Integrating Roxy Fileman into your ASP.NET Core project

Integrating Roxy Fileman with TinyMCE

Please see the installation instructions on the Roxy Fileman site for implementing with TinyMCE or CKeditor.

 

\src\Presentation\Nop.Web\Themes\RootTheme\Views\Shared\EditorTemplates\RichEditor.cshtml

    @using Nop.Core
@{
    var allowJbimages = false;
    var random = CommonHelper.GenerateRandomInteger();
}


@section header
    {
<style>
    pre {
        color: red;
        display: block;
        font-size: 87.5%;
        color: #212529;
    }
    .hljs {
        display: block;
        color: #f5f5f5 !important;
        padding: 0.5em;
        background: #303030 !important;
        color: #839496;
    }
</style>
}



@*<script type="text/javascript" src="~/Content/tinymce/tinymce.min.js"></script>*@
@*<script type="text/javascript" src="~/Content/tinymce/langs/zh_CN.js"></script>*@
@*<script src="http://cdn.bootcss.com/tinymce/4.6.3/tinymce.min.js"></script>*@
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>


<script>
    tinymce.init({
        selector: 'textarea.rte',//"textarea"根据你的选择器来指定,可以是textarea,可以绑定id(#···)或class(.····)
        height: 500,
        plugins: [ //配置插件:填写要使用的插件名称,可自己随意选择,但如果是上传本地图片image和imagetools是必要的
            'link image codesample code paste'
            
        ],
        //工具框,r设置工具栏指定显示插件,这里我展示了三个工具栏,也可自己随意配置
        toolbar: 'undo redo |  code codesample | link image | paste | bold |  formatselect  ',
        autosave_interval: '20s',
        image_advtab: true,//开启图片上传的高级选项功能
        paste_as_text: true,
        table_default_styles: {
            width: '100%',
            borderCollapse: 'collapse'
        },
        //"relative_urls" required by jbimages plugin to be set to "false"
        relative_urls: false,
        image_title: false, // 是否开启图片标题设置的选择,这里设置否
        automatic_uploads: true,//开启点击图片上传时,自动进行远程上传操作
       
        // 图片异步上传处理函数, without images_upload_url set, Upload tab won't show up
        images_upload_handler: (blobInfo, success, failure) => { // 图片异步上传处理函数
            var xhr, formData;

            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', '/RoxyFileman/UploadFilesAsync');//第一个参数是请求方式,第二个参数是请求地址,我这里配置的是struts的action,如果是其他(PHP等)的可这样配置:xxx.php
            
            xhr.onload = function () {
                var json;
                if (xhr.status !== 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                console.log(json);

                if (!json || typeof json.location !== 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                success(json.location);
            };

            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            xhr.send(formData);
        }

    });
</script>

@Html.TextArea(string.Empty, new { @class = "rte" })


 

\src\Presentation\Nop.Web\Themes\RootTheme\Views\Blog\Create.cshtml

<div class="form-group">
        @Html.LabelFor(m => m.Body)

       
        <span asp-validation-for="Body" class="text-danger"></span>


        @Html.EditorFor(m => m.Body, "RichEditor", new { @class = "form-control" })




    </div>

1.Create a folder in your project to hold uploaded CMS content, we are using /wwwroot/CMS/Content in this example; you will also need to create a folder for temp files, we are using /wwwroot/CMS/Temp. In a production environment, the /wwwroot/CMS folder will need to have full permissions for the OS。

2.Create Api Controllers/RoxyFilemanController.cs from our example project to your project.

\src\Presentation\Nop.Web\Controllers\RoxyFilemanController.cs

 

 [Route("[controller]")]
    [EnableCors("samesite")]
    [ApiController]
    public class RoxyFilemanController : ControllerBase
    {   

[HttpPost("UploadFilesAsync")]
        public virtual async Task<ActionResult<FileUploadLocation>> UploadFilesAsync()
        {

            var hasErrors = false;
            var result = new FileUploadLocation();
            try
            {

                foreach (var formFile in HttpContext.Request.Form.Files)
                {
                    var fileName = formFile.FileName;
                    if (true)
                    {

                        var destinationFile = Path.Combine(_hostingEnvironment.WebRootPath, "uploadimages", fileName);
                        using (var stream = new FileStream(destinationFile, FileMode.OpenOrCreate))
                        {
                            formFile.CopyTo(stream);
                        }

                        
                        result.location = $"/uploadimages/{fileName}";

                    }
                    else
                    {

                    }
                }
            }
            catch (Exception ex)
            {
                result.location = ex.Message;
            }

            return new JsonResult(result);
            
        }

       
    }
...
}

    public class FileUploadLocation
    {
        public string location { get; set; }
    }

 


You can download the entire our source code for example project here.