本文主要介绍在asp.net core环境下引入TinyMCE到项目中使用的方法，使用的.net core环境为最新的.net core 5.0版，其他.net core版本或.net mvc模式均适用，其实除了图片上传处理环节外其他地方与后台开发语言环境没太大关联。

了解TinyMCE

TinyMCE是一个基于WEB浏览器轻量级的所见即所得编辑器，支持目前流行的各种浏览器，核心由JavaScript编写。

功能使用配置比较简单灵活，可用于在项目后台管理功能中的文章详情、商品详情等内容的在线可视化编辑。

TinyMCE基于LGPL license发布的开源软件，可用于商业应用。

TinyMCE显示效果图

下载TinyMCE

通过搜索引擎搜索关键词tinymce进入官网下载，或直接复制文中的官网下载链接：https://www.tiny.cloud/get-tiny/self-hosted

截止当前时间最新的版本为5.6.1,点击download按钮下载即可

将下载完成的文件解压缩后放入.net core 项目中的wwwroot文件夹下。

附：下载中文语言包或其他语言包，官网语言包下载地址

https://www.tiny.cloud/get-tiny/language-packages

语言包文件下载后解压缩复制到已下载的TinyMCE的langs目录下

引入TinyMCE到.Net Core项目中

如何创建一个.Net Core项目不在本文的范围内容，将刚下载完成的Tinymce整个目录复制到项目的wwwroot目录下，完成后项目目录结构大致如下。这里为了控制文件方便加入了一个子目录lib及给TinyMCE目录加了一个版本号。

这个是为了演示创建的项目

在.Net Core中创建一个页面控制器文件表示调用TinyMCE进行文章的添加与修改功能

public class ArticleController : Controller { /// /// 创建新文章页面 /// /// public IActionResult Create() { return View(); } }

在对应前端控制页面代码引入TinyMCE的JS文件运行项目即可正常使用

文章的添加页面

配置Asp.net Core环境下的TinyMCE图片上传接口

TinyMCE的图片上传接口地址为配置参数中的images_upload_url，结果反馈为JSON数据，格式为：

{ location : "/upfile/images/abc.jpg" }

后台开发语言只需要处理接收文件后按照格式反馈即可，这里以.net core代码举例：

using System.IO;using Microsoft.AspNetCore.Hosting;using Microsoft.AspNetCore.Mvc;using Newtonsoft.Json.Linq;namespace Youlike.Mall.Web.Controllers{ [Route("editor/upload")] public class EditorController : Controller { IHostingEnvironment environment; public EditorController(IHostingEnvironment hostingEnvironment) { this.environment = hostingEnvironment; } [HttpPost] public string Post() { var files = Request.Form.Files; if (files.Count == 0) { return "未选择文件"; } var file = files[0]; var path = environment.WebRootPath; var directory = "upfile";//上传文件存放的服务器目录 var newpath = Path.Combine(path, directory); if (!Directory.Exists(newpath)) Directory.CreateDirectory(newpath);//目录不存在创建 var filename = file.FileName; var filepath = Path.Combine(path, directory, filename); using (var fs = new FileStream(filepath, FileMode.Create, FileAccess.Write)) { file.CopyTo(fs); fs.Close(); } var url = $"/{directory}/{filename}"; //这里引用了Newtonsoft.Json处理 var res = JObject.FromObject(new ResponseFile() { location = url }); return res.ToString(); } } public class ResponseFile { public string location { get; set; } }}

TinyMCE在网页中的赋值与取值

1、页面内容中只有一个编辑器时取值方法：tinyMCE.activeEditor.getContent()赋值内容：tinyMCE.activeEditor.setContent("这个是赋值内容，比如从数据库中读取的字段")2、页面中存在多个编辑器时第一个编辑器取值方法：tinyMCE.editors[0].getContent()第一个编辑器赋值方法：tinyMCE.editors[0].setContent("这个是赋值内容，比如从数据库中读取的字段")第二个编辑器取值方法：tinyMCE.editors[1].getContent()第二个编辑器赋值方法：tinyMCE.editors[1].setContent("这个是赋值内容，比如从数据库中读取的字段")[0]表示页面内序号为1的tinyMCE编辑器，依次类推。3、如业务有需要的情况下提取编辑器中不带HTML标签的纯文本var editor = tinyMCE.activeEditor;var body = editor.getBody();editor.selection.select(body);var result = editor.selection.getContent( { 'format' : 'text'} );

TinyMCE还有很多个性化使用功能和配置，这里仅介绍到可以让TinyMCE能在项目中正常调用，关于TinyMCE更多的用法可查阅官方的使用文档。

总结

以上是生活随笔为你收集整理的asp点击链接数字加1代码_Asp.Net Core使用TinyMCE富媒体编辑器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。