做一个酷酷的在线编辑器（-）-IDC资讯中心

这里我将贴一个在线编辑（类似chinaasp）的实现方法
图片可以从xxx地方取，：）
————————————————————
edit.htm（编辑页面）
————————————————————
<style type="text/css">
table#tblcoolbar
    {
    background-color:threedface; padding:1px; color:menutext;
    border-width:1px; border-style:solid;
    border-color:threedhighlight threedshadow threedshadow threedhighlight;
    }
.cbtn
    {
    height:18;
    border-left: threedface 1px solid;
    border-right: threedface 1px solid;
    border-top: threedface 1px solid;
    border-bottom: threedface 1px solid;
    }
.txtbtn {font-family:tahoma; font-size:70%; color:menutext;}
</style>

var ishtmlmode=false

function document.onreadystatechange()
    {
      idcontent.document.designmode="on"
    }
function cmdexec(cmd,opt)
    {
      if (ishtmlmode){alert("please uncheck edit html");return;}
      idcontent.document.execcommand(cmd,"",opt);idcontent.focus();
    }
function setmode(bmode)
    {
    var stmp;
      ishtmlmode = bmode;
      if (ishtmlmode){stmp=idcontent.document.body.innerhtml;idcontent.document.body.innertext=stmp;}
    else {stmp=idcontent.document.body.innertext;idcontent.document.body.innerhtml=stmp;}
      idcontent.focus();
    }
function createlink()
    {
    if (ishtmlmode){alert("please uncheck edit html");return;}
    cmdexec("createlink");
    }
function insertimage()
    {
    if (ishtmlmode){alert("please uncheck edit html");return;}
    var simgsrc=prompt("insert image file (you can use your local image file) : ", "http://www.aspalliance.com/yusuf/article10/sample.jpg");
    if(simgsrc!=null) cmdexec("insertimage",simgsrc);
    }
function save()
    {
    if (ishtmlmode){alert("please uncheck edit html");return;}
      var simgtag = idcontent.document.body.all.tags("img");
      var oimg;
      for (var i = simgtag.length – 1; i >= 0; i–)
        {
        oimg = simgtag[i];
        alert("add your code to upload local image file here. image inserted : " + oimg.src );
          }
      alert("add your code to save document here");
      alert("your document : " + idcontent.document.body.innerhtml);
    }
function forecolor()
    {
    var arr = showmodaldialog("selcolor.htm","","font-family:verdana; font-size:12; dialogwidth:30em; dialogheight:34em" );
    if (arr != null) cmdexec("forecolor",arr);
    }
</script>

<p><strong><font size=3>在线编辑器</font></strong></p>

    <td colspan=16>
        <select onchange="cmdexec(formatblock,this[this.selectedindex].value);this.selectedindex=0">
            <option selected>style</option>
            <option value="normal">normal</option>
            <option value="heading 1">heading 1</option>
            <option value="heading 2">heading 2</option>
            <option value="heading 3">heading 3</option>
            <option value="heading 4">heading 4</option>
            <option value="heading 5">heading 5</option>
            <option value="address">address</option>
            <option value="formatted">formatted</option>
            <option value="definition term">definition term</option>
        </select>
        <select onchange="cmdexec(fontname,this[this.selectedindex].value);">
            <option selected>font</option>
            <option value="arial">arial</option>
            <option value="arial black">arial black</option>
            <option value="arial narrow">arial narrow</option>
            <option value="comic sans ms">comic sans ms</option>
            <option value="courier new">courier new</option>
            <option value="system">system</option>
            <option value="tahoma">tahoma</option>
            <option value="times new roman">times new roman</option>
            <option value="verdana">verdana</option>
            <option value="wingdings">wingdings</option>
        </select>
        <select onchange="cmdexec(fontsize,this[this.selectedindex].value);">
            <option selected>size</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="10">10</option>
            <option value="12">12</option>
            <option value="14">14</option>
        </select>

    </td>

</tr>
<tr>

做一个酷酷的在线编辑器（-）

相关推荐

热门标签

热门文章

分类目录