Table of Contents
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.