参考：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. PyCharm使用技巧总结

    PyCharm高频使用快捷键 快速修复:ALT + ENTER 搜索: 双击Shif 垂直分隔窗口: ALT + V 另起一行: SHIFT + ENTER 删除当前插入符所在的行: Ctrl + Y ...

  2. Tomcat部署虚拟主机

    使用Tomcat部署加密虚拟主机,实现: a.使用www.a.com域名访问的页面根路径为/usr/local/tomcat/a/base b.使用www.b.com域名访问的页面根路径为/usr/l ...

  3. MongoDB的应用

    一.MongoDB后台管理 # ./mongo MongoDB shell version v3.4.2 connecting to: mongodb://127.0.0.1:27017 MongoD ...

  4. tail 显示文件内容尾部

    1.命令功能 tail默认显示文件内容尾部10行. 2.语法格式 tail  option  file 参数说明 参数 参数说明 -n 显示指定行数 -f 实时输出文件变化后追加的数据 -s 监视文件 ...

  5. thinkphp获取目录的方法

    1.获取根目录 http://localhost/ 下面两种方法效果一样 $_SERVER['REQUEST_SCHEME']."://".$_SERVER['HTTP_HOST' ...

  6. 黑客教父郭盛华：提升家庭WiFi的10个方法

    中国黑客教父,知名网络安全专家郭盛华曾发博文表示:“WiFi是互联网发展过程中最重要的发展之一,虚拟世界没有百分百的安全,所以杀毒软件并不可以抵抗全部的黑客攻击.“ 用户WiFi密码尽量不要使用简单单 ...

  7. 详解JVM内存模型与JVM参数详细配置

    对于大多数应用来说,Java 堆(Java Heap)是Java 虚拟机所管理的内存中最大的一块.Java 堆是被所有线程共享的一块内存区域,在虚拟机启动时创建. JVM内存结构 由上图可以清楚的看到 ...

  8. window.onload()和$(document).ready的区别（ $(document).ready == $(function(){ }) ）

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

  9. Linux 系统参数优化

    修改系统所有进程可打开的文件数量 sysctl -w fs.file-max=2097152sysctl -w fs.nr_open=2097152 > vi /etc/sysctl.conff ...

  10. [CSP-S模拟测试96]题解

    以后不能再借没改完题的理由不写题解了…… A.求和 求$\sum \sum i+j-1$ 柿子就不化了吧……这年头pj都不考这么弱智的公式化简了…… 坑点1:模数不定,可能没有2的逆元,那么只要先把乘 ...