一个轻量简洁的富文本编辑器

2019-10-2

前两天开发后台的时候，需要用到富文本编辑器，之前用过百度的一个富文本编辑器，有点臃肿并且复杂难用（可能是我技术还不到家），然后又重新找了一个富文本编辑器（wangEditor ），上手非常简单，界面也很适合我目前的后台风格。

首先HTML代码：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Content/WangEditorJs/wangEditor.js"></script>
</head>
<body>
    <div id="AddText">
        
    </div>

    <textarea style="width:auto;height:auto;" id="TextBody"></textarea>
    <input type="button" id="Btn" value="获取内容" />

    <script type="text/javascript">

        var EditorWindow = window.wangEditor
        var editor = new EditorWindow('#AddText')
       
        editor.customConfig.uploadImgServer = '/Home/UploadImg'  //设置文件上传后台处理方法
        editor.create()

        $(function () {
            $("#Btn").click(function () {
                $("#TextBody").text(editor.txt.html());
            });
        });

    </script>


</body>
</html>

然后后台代码（主要是图片上传）：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
namespace EditorDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        /// <summary>
        /// 定义图片上传数据返回实体
        /// </summary>
        public class OutUploadImgStatus
        {
            public int errno { get; set; }
            public string[] data { get; set; }
        }
        /// <summary>
        /// 图片上传
        /// </summary>
        /// <returns></returns>
        public ActionResult UploadImg()
        {
            string path = @"C:/editimg/";//设定上传的文件路径

            if (!Directory.Exists(path))//判断上传路径是否存在
            {
                Directory.CreateDirectory(path);//不存在则进行创建
            }

            HttpPostedFileBase file = Request.Files[0];
            string filenName = DateTime.Now.ToString("yyyyMMddhhmmss") + file.FileName;
            file.SaveAs(path + filenName);

            string[] str = new string[] { "http://imgnetworkcabin.com/Img/" + filenName };//定义文件下载地址（后期可定义为直接读webconfig）

            return Json(new OutUploadImgStatus() { errno = 0, data = str });
        }
    }
}

使用也非常简单：

editor.txt.html('<p>我是设置内容</p>')//设置内容
editor.txt.html()//读取内容

JS下载地址：评论留邮箱

版权声明：
作者：兴兴
文章：一个轻量简洁的富文本编辑器
链接：https://www.networkcabin.com/original/1367
文章版权归本站所有，未经授权请勿转载。

THE END

VS调试时提示无法启动IIS Express Web 服务器

<<上一篇

.NET实现电子邮件发送实例

下一篇>>