WangEditer在WebForm上使用

小編下班後被同學大神灌輸了很多的前端知識,小編也是不甘落後啊,使用富文本也是.net中很重要的一個環節,小編通過大量搜索找到了一篇使用WangEditer在WebForm成功的博客,借花獻佛,獻給大家

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RachText.aspx.cs" Inherits="MyWebApplication1.PcItem.RachText" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://localhost:44308/Scripts/jquery-3.4.1.min.js"></script>
    <script src="https://localhost:44308/Scripts/wangEditor-3.1.1/release/wangEditor.min.js"></script>
   

</head>
<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>
     <script type="text/javascript">
         //下面這兩行腳本就是彈出文本框
         var E = window.wangEditor
         var editor = new E('#editor')
         // 上傳圖片(舉例)
         editor.customConfig.uploadImgServer = 'PcItemApi.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>
</html>

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace MyWebApplication1.PcItem
{
    /// <summary>
    /// PcItemApi1 的摘要說明
    /// </summary>
    public class PcItemApi1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            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 = "https://localhost:44308/Image/";

                string path = context.Server.MapPath("/Image/");  //存儲圖片的文件夾
                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 = "./Image/" + currentFileName;

                string Json = "{\"data\": [\"../../" + imgUrl.Replace(@"\", @"/") + "\"],\"errno\":\"0\"}";

                //返回圖片url地址
                context.Response.Write(Json);
                return;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

參考地址https://www.cnblogs.com/Scholars/p/8968838.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章