您现在的位置: 365建站网 > 365学习 > web 页面在线直接编辑类

web 页面在线直接编辑类

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

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

   
    鼠标移上去了没,然后你可以看到编辑了,图片是链接到我们网站里的了。
    这里框架加不了,图片也加不上去,不过点了提交还是会给你个结果的,在初始化的时候我们可以设置'timeout',演示里我设置了10秒,所以过了10秒就会提示你上传超时
    然后你可以移到链接上面看看效果
    下面介绍下里面的参数(友情提示:如果你点不开下面的小加号,先去先点那个‘停止编辑’按钮把,如果想恢复再点'开始编辑就好了')
Code
   imgfilekey 就是你后台获取file的name
   然后我们在使用的时候这样初始化
var shuta = new shutaOnlineEditor({"editimgsrc":"img/editor.gif","upimgpage":"upimg.ashx","timeout":10});
   还有几个没给出,自己根据实际情况加就是了,然后要启动啦
shuta.start();

      

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

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

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

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

      第一次写这个东西,编辑了好久一个一个试一下,慢慢的改过来了,欢迎大家提出更好的意见和方法,一起学习
   
     点击下载代码
Tag标签: javascript,编辑html,编辑首页,在线编辑

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (187人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

快速入口

· 365软件
· 建站公司
· 杰创官网
· 建站工具

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2022 版权所有 鄂ICP备17013400号-1