zoukankan      html  css  js  c++  java
  • [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[""]。
  • 相关阅读:
    springboot自定义消息转换器HttpMessageConverter
    fastJson的feature和SerializerFeature属性的解释
    ThreadLocal
    复习面向对象 -- 继承
    复习面向对象--创建对象
    js实现二分查找算法
    SVN问题解决--Attempted to lock an already-locked dir
    封装cookie设置和获取的简易方法
    JS判断客户端是否是iOS或者Android手机移动端(转载)
    【Vue笔记】-- 详解vue生命周期
  • 原文地址:https://www.cnblogs.com/HD/p/101081.html
Copyright © 2011-2022 走看看