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

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

前端代码：

<script type="text/javascript">

    //下面这两行脚本就是弹出文本框

    var E = window.wangEditor

    var editor = new E('#editor')

    // 上传图片（举例）

    editor.customConfig.uploadImgServer = '/upload.ashx'

    //将网络图片隐藏掉

    editor.customConfig.showLinkImg = false

    // 将 timeout 时间改为 3s

    editor.customConfig.uploadImgTimeout =  * ;

    document.getElementById('btn1').addEventListener('click', function () {

        // 读取 html

        alert(editor.txt.html())

    }, false)

    editor.create();

</script>

<body>

     <form id="newspost" method="post" action="newspost" enctype="multipart/form-data">

    <input type="hidden" id="content" name="content"/>

    <div style="padding: 5px 0; color: #ccc"></div>

    <div id="editor"></div>

    <br/>

    </form>

    <button id="btn1">获取html</button>

</body>

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

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

namespace WebApplication1

{

    /// <summary>

    /// upload 的摘要说明

    /// </summary>

    public class upload : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Charset = "utf-8";

            var files = context.Request.Files;

            if (files.Count <= )

            {

                return;

            }

            HttpPostedFile file = files[];

            if (file == null)

            {

                context.Response.Write("error|file is null");

                return;

            }

            else

            {

                string Url = "http://192.168.0.20:8099/IMG/";

                string path = context.Server.MapPath("/Upader/Img/");  //存储图片的文件夹

                if (!Directory.Exists(path))

                {

                    Directory.CreateDirectory(path);

                }

                string originalFileName = file.FileName;

                string fileExtension = originalFileName.Substring(originalFileName.LastIndexOf('.'), originalFileName.Length - originalFileName.LastIndexOf('.'));

                string currentFileName = (new Random()).Next() + fileExtension;  //文件名中不要带中文，否则会出错

                                                                                 //生成文件路径

                string imagePath =  path + currentFileName;

                //保存文件

                file.SaveAs(imagePath);

                //获取图片url地址

                string imgUrl = "./Upader/Img/" + currentFileName;

                string Json = "{\"data\": [\"../../" + imgUrl.Replace(@"\", @"/") + "\"],\"errno\":\"0\"}";

                //返回图片url地址

                context.Response.Write(Json);

                return;

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

一般处理程序代码

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. readlink 查看符号链接的文件的内容

    1. 命令功能 readlink 查看软链接文件里的真实内容. 2. 语法格式 readlink [option]  file 参数 参数说明 -f 后跟软链接文件 3. 使用范例 范例1 查看文件链 ...

  2. flask之Twitter Bootstrap

    一:Twitter Bootstrap是什么? 1.开源框架:提供用户页面组件. 2.可以创建整洁且具有吸引力的网站,并且网站能兼容所有现代的Web浏览器. 特点: Bootstrap 是客户端框架, ...

  3. ConversionService HttpMessageConverter

    ConversionService是属于spring core部分 所有spring管理的bean等等 都使用它进行类型转换,而它又需要注册一些converter 来完成类型转换. 这个可以看我博客 ...

  4. JDK1.8 红黑树

    序言 当在10亿数据中只需要进行10几次比较就能查找到目标时,不禁感叹编程之魅力!人类之伟大呀! —— 学红黑树有感. 红黑树的应用 红黑树的应用比较广泛,主要是用它来存储有序的数据,它的时间复杂度是 ...

  5. 如何从word中复制内容到网站后台编辑器中

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  6. stack1顺序栈

    顺序栈 #include<iostream> using namespace std; #define increasesize 10 template <class Object& ...

  7. Fiddler正则匹配调试接口示例

    Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...

  8. 不间断电源（UPS）

    UPS电源一般指不间断电源 UPS(Uninterruptible Power System/Uninterruptible Power Supply),即不间断电源,是将蓄电池(多为铅酸免维护蓄电池 ...

  9. Gradle查看Project中的所有 Task

    查看Project中所有的Task:$ gradle tasks 查看Project中所有的properties:$ gradle properties 如: 参照了: https://www.jia ...

  10. tr:hover变色的问题

    做表格隔行变色(高亮显示),可以通过设置css中的 tr:hover伪类属性达到效果, 但是,会出一点小问题.td的背景色会覆盖tr的背景色, 在tr:hover下边加上一句:tr:hover td{ ...