wangEditor 文本编辑器

参考: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 = 1000 * 10;

    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 <= 0)
            {
                return;
            }

            HttpPostedFile file = files[0];

            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;
            }
        }

    }
}

一般处理程序代码

原文地址:https://www.cnblogs.com/zhang1f/p/11104938.html

时间: 2024-10-11 17:07:56

wangEditor 文本编辑器的相关文章

使用wangEditor富文本编辑器

wangEditor官网地址:http://wangeditor.github.io/ 今天忽然想起来搞一下富文本编辑器的使用,本来想用百度的ueditor,但是貌似校园网给墙了.然后从知乎上发现了这个编辑器,优点是界面简洁,文档比较清楚.缺点也显而易见,比较简陋,要求不是很高的话,还是可以的 :) 下载解压完成之后,用到的只有dist这个文件. 作者在看云上发布的手册地址: http://www.kancloud.cn/wangfupeng/wangeditor2/113994 前台页面代码:

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

效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传</title> <link rel="stylesheet" href="wangEditor/css/wangEditor-1.3.0.min.css"> <style type="text/css"> .wrap{

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

1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.com/wangEditor/demo.html 下载(github):https://github.com/wangfupeng1988/wangEditor QQ群:164999061 从我发布wangEditor到现在,大概有七八个月了,随着近期增加的插入视频,表情,地图这三个功能,目前为止基本

重构wangEditor(web富文本编辑器),欢迎指正!

1. 前言 (下载源码.使用说明.demo,请参见:https://github.com/wangfupeng1988/wangEditor) 前段时间做过一个基于bootstrap的富文本编辑器--wangEditor,并发布到github上(https://github.com/wangfupeng1988/wangEditor),在博客园写了篇文章(http://www.cnblogs.com/wangfupeng1988/p/4088229.html)也受到了不少关注. 之所以有这次重构

wangEditor富文本编辑器

设置好了是这样的, 有一个ID问content的编辑框,方便获取,这里的富文本编辑器的版本是2.2 官方文档说3就不支持textarea了 导入一下css 记得css文件夹下应该又3个文件,虽然没有直接引用,但是我感觉应该都引用了,没有的话又报错!很皮 之后就是Jquery,和他给的一个js文件,还有加一段代码引用一下OK了 项目的源码https://files.cnblogs.com/files/wlphp/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%

富文本编辑器

1. https://github.com/xing/wysihtml5 2. https://github.com/neilj/Squire 3.可以试试这个wangEditor - 轻量级web富文本编辑器 生成表格还是会有一些样式,不过比百度的要少一些.以下是官方介绍: 与国产编辑器 百度ueditor和 kindeditor相比,它轻量.易用.UI设计精致漂亮. 与国外编辑器 bootstrap-wysiwyg和 simditor相比,它文档易读.交流方便,更接地气. 它还会根据使用者的

在 Vue 项目中引入 tinymce 富文本编辑器

项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

AngularJS集成富文本编辑器

最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: 首先大家可以在https://github.com/wangfupeng1988/wangEditor或者官网http://www.wangeditor.com/ 进行下载,里面文档内容也很容易理解,可以自行配置.下载后解压,我们需要用到的主要是wangEditor.js或者 wangEditor

富文本编辑器代码编辑实时高亮

最近想做一个富文本编辑器添加代码并且产生高亮的效果.首先寻找富文本编辑器插件,有如UEditor.kindeditor.xhEdito等等插件.网上有挺多介绍的博客,在这就不详细介绍这些了.这几款编辑器我都试过了,UEditor适用SyntaxHighlighter高亮插件,而kindeditor与xhEdito适用prettyprint.当然,这些插件都是开源的可以自己修改.我在这几款插件中换了又换,其中的代码编辑都不理想. UEditor: kindeditor: xhEdito: 尝试修改