网站后台可视编辑是怎么实现保存数据的
现在用的网站可视化编辑都是用html+js做出来的，比如先用Html写一个Div层，然后在层的“按下”事件里加入一个JS函数，这个函数是让DIV的位置随鼠标的移动而动，放开鼠标后再“放开”事件里用一个函数判断DIV当前的位置（离TOP和Left的距离），然后保存在变量里，在用户点保存按钮后把位置数据保存到数据库，然后在前台调用位置数据。
请问是怎么保存数据的？
或者谁那里有此类的代码可以发给我一下，代码可用，保证200分送上
php确实不怎么懂，只会看不会写
js实现拖拽和拉伸我已经有代码了，可不知道怎么再原来的基础上创建并记录数据
186044说的是可以，但是我想让拖拽更随意一点，如不限制在三列里面，在全部页面里都可以放置 展开
你的意思我不太明白，你所谓的可视化编辑是否指的是 所见即所得 模式呢？
我的理解是这样的，那么我要告诉你，现在各种系统都是内嵌的编辑器，最常用的就是“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
博阳精讯
2024-07-25 广告
具体xmlhttp组件的使用，你自己百度搜“js xmlhttp”
可以找到大量的资料参考，当然，也有现成的组件，
很多人直接使用ajax框架用起来很简单，这里就不多说了，
我说的这些你自己百度即可找到大量资料。
要把数据保存到数据库，必须用服务器语言。像php jsp这些语言。用php实现这个很容易。
保存完，以后读取，也是从数据库读取。
通过楼主的问题，我认为，楼主对php 等的服务器编程不太了解。 学会php对于js中的变量保存应很容易。
php后台的建立，不是几行代码可搞定。学会后你会知道。
最后一次修改了哈，几乎是重写的：
<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>
当然这些都是用JS完成的。
核心是现在的浏览器都提供了一种模式（document.designMode），允许客户修改，就像word等的格式化文件编辑器一样。
包括论坛等富文本编辑器都是基于该原理的，甚至能插入表格等。
|
广告 您可能关注的内容 |
