本文主要介紹在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富媒体编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。