参考：https://www.cnblogs.com/Scholars/p/8968838.html

下载：http://www.wangeditor.com/

前端代码：

  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 =  * ;
  13.  
  14.     document.getElementById('btn1').addEventListener('click', function () {
  15.         // 读取 html
  16.         alert(editor.txt.html())
  17.     }, false)
  18.  
  19.     editor.create();
  20. </script>
  21.  
  22. <body>
  23.      <form id="newspost" method="post" action="newspost" enctype="multipart/form-data">
  24.  
  25.     <input type="hidden" id="content" name="content"/>
  26.     <div style="padding: 5px 0; color: #ccc"></div>
  27.     <div id="editor"></div>
  28.     <br/>
  29.  
  30.     </form>
  31.     <button id="btn1">获取html</button>
  32. </body>

后端代码（一般处理程序）：

  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 <= )
  22.             {
  23.                 return;
  24.             }
  25.  
  26.             HttpPostedFile file = files[];
  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.         public bool IsReusable
  64.         {
  65.             get
  66.             {
  67.                 return false;
  68.             }
  69.         }
  70.  
  71.     }
  72. }
  73.  
  74. 一般处理程序代码

wangEditor 文本编辑器的更多相关文章

  1. 更加简洁易用——wangEditor富文本编辑器新版本发布

    1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...

  2. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  3. 重构wangEditor（web富文本编辑器），欢迎指正！

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  4. 富文本编辑器 - wangEditor 上传图片

    效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传< ...

  5. 【前端】wangEditor（富文本编辑器） 简易使用示例

    转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...

  6. 是时候选择一款富文本编辑器了（wangEditor）

    需要一款富文本编辑器,当然不能自己造轮子.本来想使用cnblog也在用的TinyMCE,名气大,功能全.但是发现TinyMCE从4.0开始,不再支持直接下载.所以还是决定选用wangEditor.遗憾 ...

  7. 基于jeesite的cms系统（五）：wangEditor富文本编辑器

    一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...

  8. 轻量级富文本编辑器wangEditor

    开发公司一个系统的时候需要一个富文本编辑器,找了几个,最后选择这个,蛮不错的. 百度搜索wangEditor,进入官网根据所介绍的使用进行开发就可以了,很不错的一个工具.

  9. wangEditor - 轻量级web富文本编辑器（可带图片上传）

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

随机推荐

  1. Windows 进入上帝模式窗口

    Win10上帝模式如何启用? 默认情况下,Win10的上帝模式是隐藏的,如果要开启的话,操作步骤也非常简单,下面就介绍两种方法. 方法一.直接运行命令行 1.使用[Win + R ]快捷键打开“运行” ...

  2. touch 创建空文件或改变文件的时间戳属性

    1.命令功能 touch 改变文件时间属性或创建空文件. 2.语法格式 touch  [option]  file touch 选项 文件名 3. 选项参数说明 参数 参数说明 -a 仅改变文件的访问 ...

  3. [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序

    Problems meet in the project: [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序((IM002) [Microso ...

  4. $[WC2018]$通道（虚树，边分练习）

    \([WC2018]\)通道(虚树,边分练习) 感受码题的快感 这段时间真的是忙忙忙忙忙,省选之前还是露个脸,免得以后没机会了. 但是我感觉我的博客真的没啥人看,虽然我挺想要有人看的,但是自己真的没啥 ...

  5. bzoj5118 Fib数列2 二次剩余+矩阵快速幂

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5118 题解 这个题一看就是不可做的样子. 求斐波那契数列的第 \(n\) 项,\(n \leq ...

  6. What are the differences between an LES-SGS model and a RANS based turbulence model?

    The biggest difference between LES and RANS is that, contrary to LES, RANS assumes that \(\overline{ ...

  7. js事件循环机制

    本文参考链接:https://www.jianshu.com/p/cf47bc0bf2ab 一.先搞懂两个东西:堆和栈 栈由操作系统自动分配释放,用于存放函数的参数值.局部变量等一些基本的数据类型,其 ...

  8. Listary安装+破解

    Listary 是 windows 下一个可以快速搜索所有程序,文件,并且可以快速启动程序和打开相应文件的这么一个工具,但这只是它的一个主要功能,还有其功能也是很屌的. 详细的介绍参考:[Listar ...

  9. flutter中的按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  10. 循序渐进实现仿QQ界面（二）：贴图按钮的三态模拟

    开始之前先说一下RingSDK的编译问题,这里演示的程序需要用到最新版本的RingSDK,请务必用SVN到svn://svnhost.cn/RingSDK更新到最新版本,推荐用TortoiseSVN. ...