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

Posted 2020-11-01 Sir奔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 }