首先第一步先去wangEditor官網下載所需要的腳本文件！
接下來先在你的項目的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 這個是它的官網文檔
兩個文檔還是有很大的區別的，建議你兩個都看看！