参考：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. JS合并两个函数

    /** * 合并两个函数 * @param functionA 先执行 * @param functionB 执行完 functionA 后返回 * @returns {*} */ function ...

  2. 1.Linux安装redis

    Linux安装redis 操作系统是Centos7 1.下载压缩包 2.解压 3.编译 4.启动redis 5.设置redis.conf和防火墙端口开放,外网可以访问 1.下载压缩包 下载地址:htt ...

  3. 百度ueditor新增的将word内容导入到富文本编辑框的功能.

    如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. JS大文件上传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  5. 如何添加筛选器 (Reporting Services)

    如果您希望在计算或显示时包含或排除特定值,可向数据集.数据区域或组添加筛选器.在运行时应用筛选器的顺序为:先对数据集,再对数据区域,最后对组,并按照组层次结构自上而下的顺序.在表.矩阵或列表中,对行组 ...

  6. 十二 windows临界区，其他各种mutex

    一.windows临界区 类似于互斥量 == 临界区. 二.多次进入临界区 进入临界区(加锁): 离开临界区(解锁): 同一个线程中windows中相同临界区变量代表的临界区进入(entercirti ...

  7. 2017数据科学报告：机器学习工程师年薪最高，Python最常用

    2017数据科学报告:机器学习工程师年薪最高,Python最常用 2017-11-03 11:05 数据平台 Kaggle 近日发布了2017 机器学习及数据科学调查报告,针对最受欢迎的编程语言.不同 ...

  8. ubuntu 16.4下hadoop配置伪分布式时出现的坑

    在ubuntu16.4下spark的单机/伪分布式配置我在此就不在一一赘述,详情请点击如下连接: Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04 我出现问题是 ...

  9. ubuntu python3相关

    安装pip3 sudo apt install python3-pipsudo apt-get install python3-virtualenv sudo pip3 install virtual ...

  10. JAVA数组的toString()方法不能直接输出数组内容？

    问题描述:我定义了一个类,类名是Job,当我输出Job.toString()是可以按我重载的toString方法输出的,但是如果输出jobs[]这个数组时,只会输出[Lmodel.Job;@45e22 ...