参考：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. Manjaro美化 配置教程

    Manjaro Linux的美化 切换源 sudo vi /etc/pacman.conf 加入arch源 [archlinuxcn] SigLevel = Optional TrustedOnly ...

  2. 【编码的法则】谨慎的使用static

    概述 static主要有三种使用方式,其中前两种在C/C++中使用,第三种只在C++语言中使用 1)静态局部变量 2)静态全局变量/函数 3)静态成员变量/函数 3 静态成员变量/函数 3.1静态成员 ...

  3. 怎样group by一列 select多列

    之前sql用的少 竟然不知道这个小技巧 1 将要查询的列 添加到group by后面(会影响查询结果) 2 使用聚合函数如 max select a.accounttitlecode, max(b.c ...

  4. centos 7 jdk

    1.去oracle官网下载 2.查看当前环境中安装了那些jdk,如果有那么卸载掉 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  5. RMQ Direct

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11792398.html RMQ Direct Project Directory Maven Depe ...

  6. 安装VueCli-3.0

    vue-cli 3.0 安装1 vue-cli 3.0 安装/卸载 npm install -g @vue/cli npm uninstall @vue/cli -g vue --version 查看 ...

  7. Vue的思考扩展

    1.Vue是如何实现数据双向绑定的 1.1.实现双向绑定的基本原理 数据驱动:Vue会通过Dircetives指令,对DOM做一层封装,当数据发生改变会通知指令去修改对应的DOM,数据驱动DOM变化, ...

  8. 20180824-Java Enumeration 接口

    Java Enumeration接口 Enumeration接口中定义了一些方法,通过这些方法可以枚举(一次获得一个)对象集合中的元素. 这种传统接口已被迭代器取代,虽然Enumeration 还未被 ...

  9. 20180816-Java 多态

    Java 多态 多态是同一个行为具有多个不同表现形式或形态的能力. 多态性是对象多种表现形式的体现. 比如我们说"宠物"这个对象,它就有很多不同的表达或实现,比如有小猫.小狗.蜥蜴 ...

  10. codeforces 380A Sereja and Prefixes （递归）

    题目: A. Sereja and Prefixes time limit per test 1 second memory limit per test 256 megabytes input st ...