网站后台可视编辑是怎么实现保存数据的

像QQ空间或者一些购物网站,后台都可以实现可视化编辑,直接在相应的层上修改设置即可的现在用的网站可视化编辑都是用html+js做出来的,比如先用Html写一个Div层,然... 像QQ空间或者一些购物网站,后台都可以实现可视化编辑,直接在相应的层上修改设置即可的
现在用的网站可视化编辑都是用html+js做出来的,比如先用Html写一个Div层,然后在层的“按下”事件里加入一个JS函数,这个函数是让DIV的位置随鼠标的移动而动,放开鼠标后再“放开”事件里用一个函数判断DIV当前的位置(离TOP和Left的距离),然后保存在变量里,在用户点保存按钮后把位置数据保存到数据库,然后在前台调用位置数据。
请问是怎么保存数据的?
或者谁那里有此类的代码可以发给我一下,代码可用,保证200分送上
php确实不怎么懂,只会看不会写
js实现拖拽和拉伸我已经有代码了,可不知道怎么再原来的基础上创建并记录数据
186044说的是可以,但是我想让拖拽更随意一点,如不限制在三列里面,在全部页面里都可以放置
展开
 我来答
cpuzer
2010-04-12 · TA获得超过279个赞
知道答主
回答量:217
采纳率:0%
帮助的人:109万
展开全部

你的意思我不太明白,你所谓的可视化编辑是否指的是 所见即所得 模式呢?

我的理解是这样的,那么我要告诉你,现在各种系统都是内嵌的编辑器,最常用的就是“ewebeditor”

"""""

eWebEditor是一个基于浏览器的在线HTML编辑器,WEB开发人员可以用她把传统的多行文本输入框<textarea>替换为可视化的富文本输入框。

  eWebEditor主功能不需要在客户端安装任何的组件或控件,操作人员就可以以直觉、易用的界面创建和发布网页内容。

  您可以通过eWebEditor自带的可视配置工具,对eWebEditor进行完全的配置。

  eWebEditor是非常容易与您现有的系统集成,简单到您只需要一行代码就可以完成eWebEditor的调用。

  您可以把eWebEditor应用于各种基于网页的应用系统中,如内容管理系统、邮件系统、论坛系统、新闻发布系统,等与内容发布相关的所有应用系统。

""""""""

这个编辑器各个平台下都有,ASP.PHP等。

使用时需要先去下载编辑器代码,下回RAR后解压,有很多文件,将整个复制到网页文件根目录下,在你的页面中需要使用编辑器的地方

先创建一个textarea域,

<textarea name="content" style="display:none"></textarea>

其中style="display:none" 决定了这个文本域是隐藏的.

在调用eWebEditer,示例:

<iframe ID="eWebEditor1" src="/ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

其中src="/ewebeditor.htm?id=content&style=coolblue"中id=后面的第一个参数必须和textarea域的name属性的值一致。

而textarea得value属性就是 编辑器内容的初始值。

我也慢慢才有这个认知,欢迎进一步交流 

w3SCHOOL,是学习网页技术的最佳地方.................................... 

JS PHP XMLHTTP AJAX PHP-API 

*********************************************************************************************************************************************

拖动的位置是靠边距来调整的,也与event对象的参数有关,数值可以在mousedown事件里面利用ajax发送出去,接受端再将数据利用SQL来写入到数据库。186044 在网上找的这些代码就很有代表性,你要懂得原理再进行完善,不然网上的代码对你也没什么作用。。。

参考资料: http://www.w3school.com.cn

黑睿
2010-04-10 · TA获得超过5962个赞
知道大有可为答主
回答量:2125
采纳率:56%
帮助的人:977万
展开全部
保存数据是ajax技术实现的,简单说就是利用js来创建xmlhttp组件,然后用xmlhttp组件POST或GET数据到服务器的接收页面。

具体xmlhttp组件的使用,你自己百度搜“js xmlhttp”

可以找到大量的资料参考,当然,也有现成的组件,

很多人直接使用ajax框架用起来很简单,这里就不多说了,

我说的这些你自己百度即可找到大量资料。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2010-04-10
展开全部
jquery有获取元素属性的函数。
要把数据保存到数据库,必须用服务器语言。像php jsp这些语言。用php实现这个很容易。
保存完,以后读取,也是从数据库读取。
通过楼主的问题,我认为,楼主对php 等的服务器编程不太了解。 学会php对于js中的变量保存应很容易。
php后台的建立,不是几行代码可搞定。学会后你会知道。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
186044
2010-04-15 · TA获得超过1966个赞
知道大有可为答主
回答量:848
采纳率:0%
帮助的人:1335万
展开全部
还有问题?

最后一次修改了哈,几乎是重写的:

<style>
body {
margin:0px;
padding:0px;
font-size:12px;
text-align:center;
}
body > div {
text-align:center;
margin-right:auto;
margin-left:auto;
}

.mo {

height:auto;
border:1px solid #CCC;
margin:3px;
background:#FFF;
width:200px;
position:absolute;
}
.mo h1 {
background:#ECF9FF;
height:18px;
padding:3px;
cursor:move
}
.mo .nr {
height:80px;
border:1px solid #F3F3F3;
margin:2px
}
h1 {
margin:0px;
padding:0px;
text-align:left;
font-size:12px
}
</style>
<script language="javascript">
function $(_sId){return document.getElementById(_sId);}

function moveStart (event, _sId){
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};

function mousemove(){ //鼠标移动时的方法
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
dragData = {x: oEvent.clientX, y: oEvent.clientY};
}

function mouseup(){ //放开鼠标键时的方法
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
oObj.style.left = backData.y;
oObj.style.top = backData.x;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}

function creatediv()
{

var newDiv=document.createElement("div");
var i=1;
while(1)
{
if(document.getElementById("m"+i)==null)
break;
else
i++;
}
newDiv.id="m"+i;
newDiv.className="mo";
newDiv.style.top=20+ i*5 +"px";
newDiv.style.left=100+i*5+"px";
newDiv.position = "absolute";
newDiv.innerHTML="<h1 onMouseDown=\"javascript:moveStart(event,'m" + i + "');\">dom"+i+"</h1><div class=\"nr\"></div>";

document.getElementById("dom").appendChild(newDiv);
}
function deletediv()
{
var div=document.getElementById(document.getElementById("DIVName").value);
if(div!=null)
div.parentNode.removeChild(div);
else
alert("该DIV不存在!");
}

function showall(a)
{
var arrAll0=document.getElementById("dom").all;
var s0="";
for(i=0;i <arrAll0.length;i++)
{
if(arrAll0[i].id!="" && arrAll0[i].id!=null)
s0+=arrAll0[i].id+" "+arrAll0[i].offsetTop+" "+arrAll0[i].offsetLeft+" "+arrAll0[i].offsetWidth+" "+arrAll0[i].offsetHeight+"\n";
}

document.getElementById("ids").value=s0;
if(a==1)
{ alert("详情:\n"+s0);}
}

</script>
<div id="dom">
<div class=mo id=m0 style="position:absolute;top:20px;left:100px;">
<h1 onMouseDown="javascript:moveStart(event,'m0');">dom0</h1>
<div class="nr"></div>
</div>
</div>

<div>

<br><br> 请输入DIV的ID:<input type="text" name="DIVName" size="5" value="m1"> <input type="button" value="删除指定DIV" onclick="deletediv()">
<font color=red>注意:dom0的ID为m0,dom10的ID为m10,以此类推……</font>

<!-- 在submit.asp页面用ASP代码:request("leftid")、request("centerid")、request("rightid")接收变量 -->
<form name="form1" action="submit.asp" method="post">
<input type="button" value="显示Top等数据" onclick="showall(1);">
<input type="button" value="添加DIV" onclick="creatediv();">
<input type="submit" value="将Top等数据提交到其他页面" onclick="showall(0);">
<input type="hidden" value="" name="ids" id="leftid">
</form>
</div>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
乜帅红0Q
2010-04-10 · TA获得超过906个赞
知道小有建树答主
回答量:693
采纳率:100%
帮助的人:478万
展开全部
原理是这样的,在网页中增加一个iframe,设置其document.designMode属性为ON,然后就用JS改变iframe的内容,最后定稿后,将iframe的内容(就是HTML源代码)以POST方式提交到到服务器上保存起来。
当然这些都是用JS完成的。
核心是现在的浏览器都提供了一种模式(document.designMode),允许客户修改,就像word等的格式化文件编辑器一样。
包括论坛等富文本编辑器都是基于该原理的,甚至能插入表格等。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式