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

Posted 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 }
一般处理程序代码

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

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

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

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

它一共有两个文档:

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

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

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

以上是关于wangEditor 轻量级富文本框编辑器使用方法的主要内容,如果未能解决你的问题,请参考以下文章

vue+富文本编辑器wangEditor4的使用

ThinkPHP6.0使用富文本编辑器wangEditor3

PC/移动端的富文本编辑器wangEditor的使用

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量简洁易用开源免费

wangEditor上传图片

kindeditor富文本框使用方法