富态文本框--小例 ---UMEditor

最新推荐文章于 2023-01-04 17:14:27 发布

原创最新推荐文章于 2023-01-04 17:14:27 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UMEditor

C#学习笔记同时被 3 个专栏收录

25 篇文章

订阅专栏

我的文章

10 篇文章

订阅专栏

UMEditor

1 篇文章

订阅专栏

本文介绍了如何从UMEditor官网下载并部署.NET版本的编辑器，包括页面引用和后台图片上传处理代码的简单说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网下载地址;http://ueditor.baidu.com/website/download.html

---官网下载下后.net 版结构

1.页面引用：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<div id="tt" class="easyui-tabs" fit="true">
    <div title="商品详情">
    <table align="center" width="100%" border="0" class="datatable" cellspacing="1" cellpadding="0">
     <tr>
        <th style="width:70px">产品详情： <br /><a href="javascript:fnview()" style="color:Red">预览</a></th>
        <td style="position: relative;" colspan="4">
            <div id="txtContent"  style="min-height: 430px;max-height: 430px;" ></div>
        </td> 
        </tr>
    </table>
    <input  id="btn" type="button" value="提交" onclick="btnContent()"></input>
    </div> 
    
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="foot" runat="server">
 <link href="UMEditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<script src="UMEditor/umeditor.js" type="text/javascript"></script>
<script src="UMEditor/umeditor.config.js" type="text/javascript"></script>
<script src="UMEditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
<script type="text/javascript">
    var ueoption = { toolbar: [
            'source | undo redo | emotion | bold italic underline strikethrough | forecolor backcolor | removeformat |',
            'link unlink | selectall cleardoc | paragraph fontfamily fontsize |',
            'justifyleft justifycenter justifyright justifyjustify |',
            'image insertvideo  | map |',
            'fullscreen'],
        autoClearinitialContent: false,
        wordCount: false,
        minFrameHeight: 80,
        maxFrameHeight: 80,
        elementPathEnabled: false,
        zIndex: 1,
        charset: "utf-8",
        initialStyle: 'p{font-size: 12px;line-height:15px; }'
    };
    var ue = UM.getEditor('txtContent', ueoption);
    function btnContent() {
        var txt = ue.getContent();
        alert(txt);
    }
</script>
</asp:Content>

2.umeditor.config.js 文件修改图片路径

3.imageUp.cs 文件是上传图片后，后台代码，可配置保存图片地址，以及根据各自需求修改源码

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/html";

            //上传配置
            string pathbase = "upload/scpro/";                                                          //保存路径
            int size = 2;                     //文件大小限制,单位mb                                                                                   //文件大小限制，单位KB
            string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };                    //文件允许格式

            string type = context.Request["type"];
            string editorId = context.Request["editorid"];

            //上传图片
            Hashtable info = new Hashtable();
            Uploader up = new Uploader();
            info = up.upFile(context, pathbase, filetype, size); //获取上传状态

            if (type == "ajax")
            {
                HttpContext.Current.Response.Write(info["url"]);
            }
            else
            {
                HttpContext.Current.Response.Write("<script>parent.UM.getEditor('"+ editorId +"').getWidgetCallback('image')('" + info["url"] + "','" + info["state"] + "')</script>");//回调函数
                
            }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

4.也可以页面定义时，加载上传地址和图片位置：如下