本文主要介紹在asp.net core環(huán)境下引入TinyMCE到項(xiàng)目中使用的方法，使用的.net core環(huán)境為最新的.net core 5.0版，其他.net core版本或.net mvc模式均適用，其實(shí)除了圖片上傳處理環(huán)節(jié)外其他地方與后臺(tái)開(kāi)發(fā)語(yǔ)言環(huán)境沒(méi)太大關(guān)聯(lián)。

了解TinyMCE

TinyMCE是一個(gè)基于WEB瀏覽器輕量級(jí)的所見(jiàn)即所得編輯器，支持目前流行的各種瀏覽器，核心由JavaScript編寫(xiě)。

功能使用配置比較簡(jiǎn)單靈活，可用于在項(xiàng)目后臺(tái)管理功能中的文章詳情、商品詳情等內(nèi)容的在線可視化編輯。

TinyMCE基于LGPL license發(fā)布的開(kāi)源軟件，可用于商業(yè)應(yīng)用。

TinyMCE顯示效果圖

下載TinyMCE

通過(guò)搜索引擎搜索關(guān)鍵詞tinymce進(jìn)入官網(wǎng)下載，或直接復(fù)制文中的官網(wǎng)下載鏈接：https://www.tiny.cloud/get-tiny/self-hosted

截止當(dāng)前時(shí)間最新的版本為5.6.1,點(diǎn)擊download按鈕下載即可

將下載完成的文件解壓縮后放入.net core 項(xiàng)目中的wwwroot文件夾下。

附：下載中文語(yǔ)言包或其他語(yǔ)言包，官網(wǎng)語(yǔ)言包下載地址

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

語(yǔ)言包文件下載后解壓縮復(fù)制到已下載的TinyMCE的langs目錄下

引入TinyMCE到.Net Core項(xiàng)目中

如何創(chuàng)建一個(gè).Net Core項(xiàng)目不在本文的范圍內(nèi)容，將剛下載完成的Tinymce整個(gè)目錄復(fù)制到項(xiàng)目的wwwroot目錄下，完成后項(xiàng)目目錄結(jié)構(gòu)大致如下。這里為了控制文件方便加入了一個(gè)子目錄lib及給TinyMCE目錄加了一個(gè)版本號(hào)。

這個(gè)是為了演示創(chuàng)建的項(xiàng)目

在.Net Core中創(chuàng)建一個(gè)頁(yè)面控制器文件表示調(diào)用TinyMCE進(jìn)行文章的添加與修改功能

public class ArticleController : Controller { /// /// 創(chuàng)建新文章頁(yè)面 /// /// public IActionResult Create() { return View(); } }

在對(duì)應(yīng)前端控制頁(yè)面代碼引入TinyMCE的JS文件運(yùn)行項(xiàng)目即可正常使用

文章的添加頁(yè)面

配置Asp.net Core環(huán)境下的TinyMCE圖片上傳接口

TinyMCE的圖片上傳接口地址為配置參數(shù)中的images_upload_url，結(jié)果反饋為JSON數(shù)據(jù)，格式為：

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

后臺(tái)開(kāi)發(fā)語(yǔ)言只需要處理接收文件后按照格式反饋即可，這里以.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";//上傳文件存放的服務(wù)器目錄 var newpath = Path.Combine(path, directory); if (!Directory.Exists(newpath)) Directory.CreateDirectory(newpath);//目錄不存在創(chuàng)建 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在網(wǎng)頁(yè)中的賦值與取值

1、頁(yè)面內(nèi)容中只有一個(gè)編輯器時(shí)取值方法：tinyMCE.activeEditor.getContent()賦值內(nèi)容：tinyMCE.activeEditor.setContent("這個(gè)是賦值內(nèi)容，比如從數(shù)據(jù)庫(kù)中讀取的字段")2、頁(yè)面中存在多個(gè)編輯器時(shí)第一個(gè)編輯器取值方法：tinyMCE.editors[0].getContent()第一個(gè)編輯器賦值方法：tinyMCE.editors[0].setContent("這個(gè)是賦值內(nèi)容，比如從數(shù)據(jù)庫(kù)中讀取的字段")第二個(gè)編輯器取值方法：tinyMCE.editors[1].getContent()第二個(gè)編輯器賦值方法：tinyMCE.editors[1].setContent("這個(gè)是賦值內(nèi)容，比如從數(shù)據(jù)庫(kù)中讀取的字段")[0]表示頁(yè)面內(nèi)序號(hào)為1的tinyMCE編輯器，依次類(lèi)推。3、如業(yè)務(wù)有需要的情況下提取編輯器中不帶HTML標(biāo)簽的純文本var editor = tinyMCE.activeEditor;var body = editor.getBody();editor.selection.select(body);var result = editor.selection.getContent( { 'format' : 'text'} );

TinyMCE還有很多個(gè)性化使用功能和配置，這里僅介紹到可以讓TinyMCE能在項(xiàng)目中正常調(diào)用，關(guān)于TinyMCE更多的用法可查閱官方的使用文檔。

總結(jié)

以上是生活随笔為你收集整理的asp点击链接数字加1代码_Asp.Net Core使用TinyMCE富媒体编辑器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。