现在的位置: 首页 > 综合 > 正文

c# .net 编写 HTML 编辑器的核心技巧 by shawl.qiu

2013年04月09日 ⁄ 综合 ⁄ 共 2489字 ⁄ 字号 小 中 大 ⁄ 评论关闭

c# .net 编写 HTML 编辑器的核心技巧 by shawl.qiu

说明:
之前我写过一个 纯 js 的 HTML 编辑器 sqEditor.
这里: http://blog.csdn.net/btbtd/archive/2007/01/16/1484070.aspx
那时是在使用 asp/vbs, asp/js 的脚本语言.

现在俺需要自己的 .net 版 HTML 编辑器,
其实不难写, 不外乎与 iframe 的数据读取, 然后再加个 submit 的 EventHandler
至于其他的操作, 跟我上次写的 纯 JS HTML 编辑器 没多大区别.

广告时间, sqEditor for .net 不日推出.

目录:
1. x.aspx
2. ac/sqEditor.ascx

shawl.qiu
2007-02-28
http://blog.csdn.net/btbtd

内容:
1. x.aspx

  1. <%@ Page Language="C#" AutoEventWireup="True" %>
  2. <%@ Reference Control="ac/sqEditor.ascx" %>
  3. <script runat="server">
  4.  void Page_Load(Object s, EventArgs e)
  5.  {
  6.   Control sqEditor = LoadControl("ac/sqEditor.ascx");
  7.   sqEditorPlaceHolder.Controls.Add(sqEditor);
  8.  } // end Page_Load
  9. </script>
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  11. <html xmlns="http://www.w3.org/1999/xhtml">
  12. <head>
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  14. <title>shawl.qiu template</title>
  15. </head>
  16. <body>
  17.  <form runat="server">
  18.   <asp:PlaceHolder id=sqEditorPlaceHolder runat=server 
  19.    />
  20.  </form>
  21. </body>
  22. </html>
  23.  

2. ac/sqEditor.ascx

  1. <%@ Control Language="C#" AutoEventWireup="True" className="sqEditor" %>
  2. <script runat="server">
  4.  void Page_Load(Object s, EventArgs e)
  5.  {
  6.   edSubmit.Attributes["onclick"] = 
  7.    "return fSetInnerHtml('"+ifm.ClientID+"','"+t.ClientID+"')";
  8.   
  9.   edSubmit.Click += new EventHandler(submit);
  10.  } // end Page_Load
  11.  
  12.  private void submit(Object s, EventArgs e)
  13.  {
  14.   Response.Write("<li/>~~~~~~~~"+t.Text);
  15.  }
  16. </script>
  18. <style type="text/css">
  19. /* <![CDATA[ */
  20.  .dspHd {display:none!important;}
  21. /* ]]> */
  22. </style>
  24. <script type="text/javascript">
  25. //<![CDATA[
  26.  onload=function()
  27.  {
  28.   fIntiIframe("<% Response.Write(ifm.ClientID); %>", "temp");
  29.  }
  30.  
  31.  function fIntiIframe(sId, sTempContentId)
  32.  {
  33.   try{
  34.    var ifmWin=document.getElementById(sId).contentWindow;
  35.    var ifmDcu=ifmWin.document;
  36.  
  37.    var sCt=document.getElementById(sTempContentId)
  38.    if(sCt!=null) sCt=sCt.innerHTML;
  39.    
  40.    ifmDcu.designMode="on";
  41.    ifmDcu.contentEditable=true;
  42.    ifmDcu.open();
  43.    if(!sCt) ifmDcu.write('--------&nbsp;'); else ifmDcu.write(sCt);
  44.    ifmDcu.close(); 
  45.    } catch(e){}
  46.  }
  47.   
  48.  function fSetInnerHtml(sId, sDivId)
  49.  { 
  50.    var ifmWin=document.getElementById(sId).contentWindow;
  51.    var ifmDcu=ifmWin.document;
  52.    var html = ifmDcu.body.innerHTML;
  53.    
  54.    var ifm = document.getElementById(sDivId);
  55.    ifm.value = html;
  56.   try{
  57.    } catch(e){}
  58.    return true;
  59.  }
  60. //]]>
  61. </script>
  62. <iFrame id=ifm runat=server></iFrame>
  63. <br/>
  64. <asp:Button id=edSubmit runat=server
  65.  Text = "Submit"
  66.  />
  67. <asp:TextBox id=t runat=server
  68.  CssClass="dspHd"
  69. /> 

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞