web 页面在线直接编辑类

      我 现在做的爱社区网一 直在为首页如何编辑而思索,这个项目完全从零开始,之前我也没有接触到如何编辑首页,没操作过，更没设计过,根本不指定如何下手。后来设计了类似于编辑器 的东西,引用首页样式，加入div编辑与testarea,我自己用起来得心应手,可编辑们一用起来总是会把首页搞坏,主要是自己要去编辑html,一不 小心就丢了结束标签,没少为这样那样的错误而去恢复数据。

      为了节省时间，加强网站的操作性，我又开始重新设计一种思路。既然修改html会有问题的话,那就应该让编辑可以直接操作html内容，给个界面,填写点 东西就搞定,用代码控制标签,这样应该稳定多。之前做过一个电子地图,用js实现,可以点击这里查看,大概的 原理就是在document的onmousemove事件里检测鼠标移动到得元素,再去判断里面的内容,js代码在页面里,可以直接查看。所以这里我想也 可以通过判断元素的不同来实现。
      然后就根据tagName 来判断是图片还是链接,顺便说下只支持修改图片和链接,文本我大概尝试了下,由于本身设计的局限,还是觉得实现有点难度,不过我自己那个之前做了 html,设计切换的所以文本切换来就可以了,所以也就没深入了。图片上传是利用在页面中嵌入iframe来实现无刷新的,我看了下页面里的元素,代码中 的js 没能加入框架,估计是编辑器后台给过滤掉了,大家就不能尝试上传文件了,嘿嘿，你已经注意到可以编辑链接和图片了吧,这里我加个大点的图片,其实那些个小 家伙图片也是可以的

   
    鼠标移上去了没,然后你可以看到编辑了,图片是链接到我们网站里的了。
    这里框架加不了，图片也加不上去,不过点了提交还是会给你个结果的,在初始化的时候我们可以设置'timeout',演示里我设置了10秒,所以过了10秒就会提示你上传超时
    然后你可以移到链接上面看看效果
    下面介绍下里面的参数(友情提示:如果你点不开下面的小加号,先去先点那个‘停止编辑’按钮把,如果想恢复再点'开始编辑就好了')

this.options = {
                editimgsrc  : options.editimgsrc ? options.editimgsrc : "",  //编辑的图片路径
                upimgpage   : options.upimgpage ? options.upimgpage : "",  //图片上传路径
                imgfilekey  : options.imgfilekey ? options.imgfilekey : "shuta_fileimg" ,  //上传控件的名称
                timeout     : options.timeout ? options.timeout : 10,   //图片上传的超时时间
                autoresize  : options.autoresize ? options.autoresize : false,  //是否自动根据原来的图片调整上传的图片
                
                _currentobj  : null,   //存储当前操作的元素
                _timer      : 0       //计时器
                
            };

   imgfilekey 就是你后台获取file的name
   然后我们在使用的时候这样初始化

var shuta = new shutaOnlineEditor({"editimgsrc":"img/editor.gif","upimgpage":"upimg.ashx","timeout":10});

   还有几个没给出,自己根据实际情况加就是了,然后要启动啦

shuta.start();

      

     当然中间你也可以停止的,点下面这个按钮再试试看
      
       

     最后介绍下图片上传完后的completeup

completeup: function(callback) {  //完成上传后调用的函数,callback =& nbsp;{'file','','erro':''}  如果erro=="" 则成功& lt;/span>
        
            if(callback.erro == "")
                this.$("shuta_txtimgsrc").value = callback.file;
            else 
                alert(callback.erro);
                
            //设置那些操作的按钮可 用    
            this.$("shuta_btncancel").disabled = false;
            this.$("shuta_btnsubmit").disabled = false;
            this.$("shuta_btnupimg").disabled = false;
            this.$("shuta_btnupimg").value = "成功！";
            setTimeout(function(){ document.getElementById("shuta_btnupimg").value = "上传";},1000); //一秒后恢复原状
        },

     由于不同的后台可能返回不同的函数,框架里回发完成后要调用我们这个completeup，你写的东西可能不同，所以这里需要自己写个函数，例如我们这里的例子写的是function finishupimg(callback)
        {
            shuta.completeup(callback);
        }
      然后再后台调用这个脚本,具体怎么做好，大家可能有更好的方法，我这里能用就好，没太过纠缠了

     好啦，下面就给出具体运行的例子下载了，后台上传文件用的.net(c#)，大家可根据实际情况来修改。

      第一次写这个东西，编辑了好久一个一个试一下，慢慢的改过来了，欢迎大家提出更好的意见和方法，一起学习
   
     点击下载代码