• [JavaScript]手把手写Html编辑器



    不多说什么是Html编辑器了。就像Blog的发文章控件。
    看完就明白了!^o^
    =============================
    写HTML编辑器所用的都是Iframe。

    下面是.aspx代码:
    <HTML>
        
    <HEAD>
            
    <title>WebForm1</title>
            
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            
    <meta content="C#" name="CODE_LANGUAGE">
            
    <meta content="JavaScript" name="vs_defaultClientScript">
            
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            
    <script language="javascript">
                
    <!--
                    
    //页面初始化设置
                    function PageLoad()
                    {
                        HtmlEditor.document.designMode 
    = "on";
                        document.getElementById(
    "HtmlEditor").style.border = "1px solid #000000";
                        document.getElementById(
    "HtmlEditor").style.width = "100%";
                        document.getElementById(
    "HtmlEditor").style.height = "70%";
                    }
                    
                    
    //页面提交
                    function PageSubmit()
                    {
                        document.FormAction.inpContent.value 
    = HtmlEditor.document.body.innerHTML;
                    }
                    
                    
    //插入表情
                    function InnerFace( obj )
                    {
                        HtmlEditor.focus();
                        HtmlEditor.document.selection.createRange().pasteHTML(obj.innerHTML);
                    }
                    
                    
    //编辑所选
                    function SetSelect( strChange )
                    {
                        HtmlEditor.focus();
                        
    var strValue = HtmlEditor.document.selection.createRange().duplicate().text;
                        
    if ( strValue != "" && strValue != null )
                        {
                            HtmlEditor.document.selection.createRange().duplicate().pasteHTML( 
    "<" +strChange + ">" + strValue + "</" +strChange + ">" );
                        }
                    }
                
    -->
            
    </script>
        
    </HEAD>
        
    <body onload="PageLoad();">
            
    <form id="FormAction" method="post" runat="server">
                
    <iframe id="HtmlEditor" name="HtmlEditor" marginheight="1" marginwidth="1" frameborder="no">
                
    </iframe>
                
    <table cellpadding="0" cellspacing="0" width="100%" border="0">
                
    <tr>
                    
    <td onclick="InnerFace(this)"><img src="msn.gif" border="0"></td>
                    
    <td onclick="SetSelect('B')"><input type="button" value="加粗"/></td>
                
    </tr>
                
    </table>
                
    <p align="center">
                    
    <asp:Button id="btnSubmit" runat="server" Text="Submit" BorderStyle="Solid" BorderWidth="1px"
                        BackColor
    ="#E0E0E0"></asp:Button>
                
    </p>
                
    <input type="hidden" id="inpContent" name="inpContent">
            
    </form>
        
    </body>
    </HTML>

    这里是.CS代码:
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Text;

    namespace TestProject
    {
        
    /// <summary>
        
    /// Summary description for WebForm1.
        
    /// </summary>

        public class Default : System.Web.UI.Page
        
    {
            
    protected System.Web.UI.WebControls.Button btnSubmit;
        
            
    private void Page_Load(object sender, System.EventArgs e)
            
    {
                
    // Put user code to initialize the page here
                btnSubmit.Attributes.Add( "onClick","PageSubmit()" );
            }


            
    Web Form Designer generated code

            
    private void btnSubmit_Click(object sender, System.EventArgs e)
            
    {
                
    if ( Request.Form["inpContent"!= string.Empty && Request.Form["inpContent"!= null )
                
    {
                    Response.Write( Server.HtmlDecode( Request.Form[
    "inpContent"] ) );
                }

            }


        }

    }


    不多做说明了!
    代码很简单!只是一些Javascript操作。在后台得到数据主要是用一个隐藏input然后来个Request.Form[""]。
  • 相关阅读:
    一个网站需求说明书的示例
    产品设计与PRD介绍
    研发效能度量案例
    项目管理过程流程图
    变量 $cfg['TempDir'] (./tmp/)无法访问。phpMyAdmin无法缓存模板文件,所以会运行缓慢。
    wordpress函数大全列表整理
    PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
    通过写脚本的方式自动获取JVM内的进程堆栈信息等内容
    简单定位占用最高CPU的java进程信息
    使用linux上面powershell安装vm powercli 连接vcenter 通过计划任务自动创建部分虚拟机的快照以及自动清理过期快照的办法
  • 原文地址:https://www.cnblogs.com/HD/p/101081.html
Copyright © 2020-2023  润新知