wangEditor 轻量级富文本框编辑器使用方法

首先第一步先去wangEditor官网下载所需要的脚本文件！

http://www.wangeditor.com/

接下来先在你的项目的HTML标签里加上这样一段标签：

 1 <body>
 2      <form id="newspost" method="post" action="newspost" enctype="multipart/form-data">
 3 
 4     <input type="hidden" id="content" name="content"/>
 5     <div style="padding: 5px 0; color: #ccc"></div>
 6     <div id="editor"></div>
 7     <br/>
 8  
 9     </form>
10     <button id="btn1">获取html</button>
11 </body>

标签代码

然后在你下载的文件里找到 wangEditor.min.js 这个脚本并引入项目

接下来脚本写上这样一段代码：

 1 <script type="text/javascript">
 2     //下面这两行脚本就是弹出文本框
 3     var E = window.wangEditor
 4     var editor = new E('#editor')
 5     // 上传图片（举例）
 6     editor.customConfig.uploadImgServer = '/upload.ashx'
 7 
 8     //将网络图片隐藏掉
 9     editor.customConfig.showLinkImg = false
10 
11     // 将 timeout 时间改为 3s
12     editor.customConfig.uploadImgTimeout = 1000 * 10;
13 
14     document.getElementById('btn1').addEventListener('click', function () {
15         // 读取 html
16         alert(editor.txt.html())
17     }, false)
18 
19     editor.create();
20 </script>

脚本代码

这样文本框也就显示出来，获取内容脚本注释里也有，图片上传的脚本也写在里面。

接下来就是图片上传所需要的代码了，由于我是用WebForm做的。所以我保存图片的代码写在一般处理程序里面，接下来看看一般处理程序的代码：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.IO;
 4 using System.Linq;
 5 using System.Web;
 6 
 7 namespace WebApplication1
 8 {
 9     /// <summary>
10     /// upload 的摘要说明
11     /// </summary>
12     public class upload : IHttpHandler
13     {
14 
15         public void ProcessRequest(HttpContext context)
16         {
17             context.Response.ContentType = "text/plain";
18             context.Response.Charset = "utf-8";
19 
20             var files = context.Request.Files;
21             if (files.Count <= 0)
22             {
23                 return;
24             }
25 
26             HttpPostedFile file = files[0];
27 
28             if (file == null)
29             {
30                 context.Response.Write("error|file is null");
31                 return;
32             }
33             else
34             {
35                 string Url = "http://192.168.0.20:8099/IMG/";
36 
37                 string path = context.Server.MapPath("/Upader/Img/");  //存储图片的文件夹
38                 if (!Directory.Exists(path))
39                 {
40                     Directory.CreateDirectory(path);
41                 }
42 
43                 string originalFileName = file.FileName;
44                 string fileExtension = originalFileName.Substring(originalFileName.LastIndexOf('.'), originalFileName.Length - originalFileName.LastIndexOf('.'));
45                 string currentFileName = (new Random()).Next() + fileExtension;  //文件名中不要带中文，否则会出错
46                                                                                  //生成文件路径
47                 string imagePath =  path + currentFileName;
48 
49                 //保存文件
50                 file.SaveAs(imagePath);
51 
52                 //获取图片url地址
53                 string imgUrl = "./Upader/Img/" + currentFileName;
54 
55                 string Json = "{\"data\": [\"../../" + imgUrl.Replace(@"\", @"/") + "\"],\"errno\":\"0\"}";
56 
57                 //返回图片url地址
58                 context.Response.Write(Json);
59                 return;
60             }
61         }
62 
63         
64 
65         public bool IsReusable
66         {
67             get
68             {
69                 return false;
70             }
71         }
72     
73     }
74 }

一般处理程序代码

里面需要注意的是下面这几点：

返回的图片格式必须是它官网规定的Json格式返回出去！不然图片会无法接收！

你上传完图片之后所需要做的就只是把图片的名字加上相对路径给返回出去就好！它这个文本框会自动去帮你做完这一切并把图片显示出来！

我当时用这个文本框需要用到的地方就是这些，至于你要想要更多的功能就去他的官网去看它的文档吧！

它一共有两个文档：

https://www.kancloud.cn/wangfupeng/wangeditor2/113961 这个文档说的比较详细

https://www.kancloud.cn/wangfupeng/wangeditor3/332599 这个是它的官网文档

两个文档还是有很大的区别的，建议你两个都看看！

wangEditor 轻量级富文本框编辑器使用方法

猜你喜欢