asp.net mvc使用TinyMCE富文本编辑器

富文本编辑器 TinyMCE 是一个很好用的富文本编辑器，本人菜鸟一只，下面是一个简单的例子。

 

首先先去官网下载 TinyMCE 的js文件，放在asp.net mvc工程项目里面：

 

然后在controller里面创建一个页面，姑且简单的就直接叫做Home.Index页面吧。

   public class HomeController : Controller
    {
        //测试首页
        public ActionResult Index()
        {
            return View();
        }

        //保存方法 
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult SaveInfo()
        {
            string textValue = Request.Form["textContent"];
            return Content("save success");
        }


    }

然后开始编辑前端html和js

@{
    Layout = null;
}





    
    

    
    

    



    
 
        

            
            
        
    

可以看到

里面就简单的放了两个元素  input submit button 和 textArea , 这个时候运行代码，就可以看到一个简单的例子网站：

在网站里面编辑一点内容，点击save 按钮，可能会提示报错：

A potentially dangerous Request.Form value was detected from the client  （。。。。。。）

这个是接收端 SaveInfo 方法里面检查到了存在威胁的html输入，这个时候，你可以到web.config 文件里面修改配置，修改输入验证模式：

其中添加 requestValidationMode=2.0 就可以了。

添加之后，再次运行，这下就没有错误提示了。

这样，你就可以继续改造 SaveInfo 方法里面的存储代码， 我一般是用sql server 存数据，这里就不演示如何写代码了。

保存好了编辑记录之后， 我们继续做一个新的页面用于显示编辑好的内容， 姑且叫这个新的页面为 home.ViewE , controller里面的代码如下

 public class HomeController : Controller
    {
        //测试首页
        public ActionResult Index()
        {
            return View();
        }

        //保存方法 
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult SaveInfo()
        {
            string textValue = Request.Form["textContent"];

            FileXmlDAL dal = new FileXmlDAL();
            dal.InsertNewXML(DateTime.Now.ToString("yyyyMMddhhmmss"), textValue);

            return Content("save success");
        }

         //显示文章
        public ActionResult ViewE(int id)
        {
            string textVAL = "";
            FileXmlDAL dal = new FileXmlDAL();
            textVAL=dal.FindXML(id);
            ViewBag.FileContent = textVAL;

            return View();
        }

    }

 这个 home.ViewE的前端页面代码如下,可以看到 页面里面只有textarea ， 没有其他input元素。 

@{
    Layout = null;
}





    
    

    
    

    



    
 
        
            @Html.Raw(ViewBag.FileContent)
        
    

运行代码输入网址  xxx/home/viewe/xxx   就可以看到保存好的内容了：(大家有兴趣的话，可以去官网上面查下，如何把内容设置为只读，不可编辑)

 

接下来我们可以继续看上传图片的代码 ，对于富文本编辑而言，除了文字和表格， 插图也是非常有用的， 这个TinyMCE 编辑器就是自带了很多有用的插件，无需自己额外引入，所以我觉得非常好用，之前也用过 UEditor ， 觉得TinyMCE的速度快一些，并且表格插件好用些。

继续看图片上传的代码吧，我先演示在同一个项目里面上传图片文件（真实项目中，一般把  文件服务  和  网站应用服务  分开，不放在一起）：

先是做一个新的控制器FileController

我在App_data文件夹里面新增了一个Pic文件夹，然后在Pic文件夹里面放了一张用来测试的图片，后续上传图片的时候保存地址就是这个 /app_data/Pic 文件夹

  public class FileController : Controller
    {
        //显示一个测试用的图片
        public ActionResult Index()
        {
            return View();
        }

        //显示图片
        public ActionResult ViewPic(string id)
        {
            if (string.IsNullOrEmpty(id) == true)
            {
                id = "nodata.png";
            }

            string rootPath = Server.MapPath("/App_Data/Pic/");
            string imgPath = rootPath + id;
            byte[] img = System.IO.File.ReadAllBytes(imgPath);
            return File(img, "application/octet-stream");
        }

    }

然后看看测试用的 File.Index 页面代码：

@{
    Layout = null;
}





    
    


    
 
        
测试图片
        
    

这个代码里面就是简单的显示

可以正常显示图片之后，就继续写上传部分的代码了。我在一些教程网站里面看到，TinyMCE的图片返回值是：

xx.location = "/file/viewpic?id=nodata.png";

所以先要构造一个对应的实体类作为返回值  ， 如果不按照具体要求的格式返回前台，那么富文本编辑器上面应该是无法正常显示的：

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

接着来写fileController 

 public class FileController : Controller
    {
        //显示一个测试用的图片
        public ActionResult Index()
        {
            return View();
        }

        //显示图片
        public ActionResult ViewPic(string id)
        {
            if (string.IsNullOrEmpty(id) == true)
            {
                id = "nodata.png";
            }

            string rootPath = Server.MapPath("/App_Data/Pic/");
            string imgPath = rootPath + id;
            byte[] img = System.IO.File.ReadAllBytes(imgPath);
            return File(img, "application/octet-stream");
        }

        //上传图片
        public ActionResult UploadPic()
        {
            PicReturn pr = new PicReturn();
            //pr.location = "/file/viewpic?id=nodata.png";
            try
            {
                if (Request.Files.Count > 0)
                {
                    HttpPostedFileBase fitem = Request.Files[0];
                    string ExtenName = System.IO.Path.GetExtension(fitem.FileName);
                    string titleNEW = Guid.NewGuid().ToString() + ExtenName;
                    string savePath = "../App_Data/Pic/" + titleNEW;
                    savePath = System.Web.HttpContext.Current.Server.MapPath(savePath);

                    fitem.SaveAs(savePath);
                    pr.location = "/file/viewpic?id=" + titleNEW;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }

            return Json(pr);
        }

    }

可以看到 uploadPic 方法里面 就是将图片保存到 app_data/pic 文件夹里面， 并且返回了 /file/viewPic?id=xxxx 的json给前台。

这个时候，回去home.index 页面配置编辑器的

  images_upload_url: '/file/uploadpic',
 images_upload_base_path: '',

两个属性，就可以上传图片了 ：

上传之后，你可以先到 app_data/pic 文件夹里面查看保存情况 ， 然后再去点击保存按钮，存入数据库（存入的只是html 标签，不是具体的图片文件，所以在 FileController.ViewPic 方法，是把相对的图片从文件夹里面读取出来）

保存之后，在数据库里面可以看到这段html ， 惊奇的发现

我没查出原因，只好在homeController.saveInfo 里面增加一行 replace的代码：

    // homeController 保存方法 
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult SaveInfo()
        {
            string textValue = Request.Form["textContent"];
               if (string.IsNullOrEmpty(textValue) == false) {
                textValue = textValue.Replace("

写到这里代码就结束了 。 TinyMCE编辑器的上传图片功能也实现了。

有写的不对的地方请见谅。