如何保存用户制作的HTML页面?

时间:2021-12-15 21:22:34

I made a drag and drop utility that make it possible for users to drag and drop elements directly on a workplace and create their page, I wound how can I save the user's work as HTML page!

我制作了一个拖放工具,使用户可以直接在工作场所拖放元素并创建他们的页面,我怎样才能将用户的工作保存为HTML页面!

8 个解决方案

#1


You mean the position of all elements? How about iterating through them and saving their position? If you use jQuery you could do something like this:

你的意思是所有元素的位置?如何迭代它们并保存它们的位置?如果你使用jQuery,你可以这样做:

var positions = new Array();
function savePositionOfAllDivs() {
 $('div').each( function(){
  $this = $(this);
  id = $this.attr('id');
  position = $this.position();
  left = position.left;
  top = position.top;
  positions[id] = new Array();
  positions[id]['left'] = left;
  positions[id]['top'] = top;
 }
}

And then send the positions array to some server side script which turns it into CSS which you can then embed into the HTML page that the user can download.

然后将位置数组发送到某个服务器端脚本,然后将其转换为CSS,然后将其嵌入到用户可以下载的HTML页面中。

(With more specefic information about what your trying to do this could be way more easy and effecient. Say it is a order drag 'n drop functionality then you only have to save the order of div s)

(有了更多关于你试图做什么的特定信息,这可能会更容易和有效。说它是一个命令拖放功能然后你只需要保存div的顺序)

#2


Uhhm,.. press the save button? Seriously though, I think you might want to put more information on your question, such as what's system that you're using, etc, etc..

嗯,..按下保存按钮?但是说真的,我想你可能想在你的问题上提供更多的信息,例如你正在使用的系统等等。

#3


document.getElementsByTagName("BODY")[0].innerHTML

#4


Most jQuery drag & drop libraries have the ability to serialize the elements that are being moved into an array that you can save. If you give me the link to the specific library you're using, I can tell you how to harness that.

大多数jQuery拖放库都能够序列化要移动到可以保存的数组中的元素。如果你给我链接到你正在使用的特定库,我可以告诉你如何利用它。

However, if you made it yourself, you're going to have to try one of the above suggestions.

但是,如果您自己制作,则必须尝试上述建议之一。

#5


Maybe using XPath. You may find useful this discussion on SO.

也许使用XPath。您可能会在SO上找到有用的讨论。

EDIT:Or maybe you could do sth with Node.childNodes. for more information check MDC here

编辑:或许你可以用Node.childNodes做某事。有关更多信息,请在此处查看MDC

#6


Are you trying to figure out the best way to transfer the HTML & CSS from the front end to the server or the best way to save the HTML on the server (as in DB or File)?

您是否正在尝试找出将HTML和CSS从前端传输到服务器的最佳方法,或者是在服务器上保存HTML的最佳方法(如在数据库或文件中)?

#7


I am using jquery , and I made a drag and drop utility that you can use to place some html elements inside the page , I need to know how to save the users work in HTML file that he can download , or can view his work after saving it

我正在使用jquery,并且我制作了一个拖放实用程序,您可以使用它来在页面中放置一些html元素,我需要知道如何将用户工作保存在他可以下载的HTML文件中,或者可以查看他的工作之后保存它

#8


I need the same solution that porta is looking for. My scenario is i'm building a drag and drop cms. Users can drag drop html elements to build their pages. Now how do i save these changes (to db or to a session var) and must be able to create a static page with all the above changes that the user made with php. Can someone shed some light. I'm totally new to jquery and wouldn't consider myself expert in php.

我需要porta正在寻找的相同解决方案。我的情况是我正在构建一个拖放cms。用户可以拖放drop html元素来构建他们的页面。现在我如何保存这些更改(到db或会话var),并且必须能够创建一个静态页面,其中包含用户使用php进行的所有上述更改。有人可以解释一下。我对jquery完全不熟悉,不会认为自己是php的专家。

#1


You mean the position of all elements? How about iterating through them and saving their position? If you use jQuery you could do something like this:

你的意思是所有元素的位置?如何迭代它们并保存它们的位置?如果你使用jQuery,你可以这样做:

var positions = new Array();
function savePositionOfAllDivs() {
 $('div').each( function(){
  $this = $(this);
  id = $this.attr('id');
  position = $this.position();
  left = position.left;
  top = position.top;
  positions[id] = new Array();
  positions[id]['left'] = left;
  positions[id]['top'] = top;
 }
}

And then send the positions array to some server side script which turns it into CSS which you can then embed into the HTML page that the user can download.

然后将位置数组发送到某个服务器端脚本,然后将其转换为CSS,然后将其嵌入到用户可以下载的HTML页面中。

(With more specefic information about what your trying to do this could be way more easy and effecient. Say it is a order drag 'n drop functionality then you only have to save the order of div s)

(有了更多关于你试图做什么的特定信息,这可能会更容易和有效。说它是一个命令拖放功能然后你只需要保存div的顺序)

#2


Uhhm,.. press the save button? Seriously though, I think you might want to put more information on your question, such as what's system that you're using, etc, etc..

嗯,..按下保存按钮?但是说真的,我想你可能想在你的问题上提供更多的信息,例如你正在使用的系统等等。

#3


document.getElementsByTagName("BODY")[0].innerHTML

#4


Most jQuery drag & drop libraries have the ability to serialize the elements that are being moved into an array that you can save. If you give me the link to the specific library you're using, I can tell you how to harness that.

大多数jQuery拖放库都能够序列化要移动到可以保存的数组中的元素。如果你给我链接到你正在使用的特定库,我可以告诉你如何利用它。

However, if you made it yourself, you're going to have to try one of the above suggestions.

但是,如果您自己制作,则必须尝试上述建议之一。

#5


Maybe using XPath. You may find useful this discussion on SO.

也许使用XPath。您可能会在SO上找到有用的讨论。

EDIT:Or maybe you could do sth with Node.childNodes. for more information check MDC here

编辑:或许你可以用Node.childNodes做某事。有关更多信息,请在此处查看MDC

#6


Are you trying to figure out the best way to transfer the HTML & CSS from the front end to the server or the best way to save the HTML on the server (as in DB or File)?

您是否正在尝试找出将HTML和CSS从前端传输到服务器的最佳方法,或者是在服务器上保存HTML的最佳方法(如在数据库或文件中)?

#7


I am using jquery , and I made a drag and drop utility that you can use to place some html elements inside the page , I need to know how to save the users work in HTML file that he can download , or can view his work after saving it

我正在使用jquery,并且我制作了一个拖放实用程序,您可以使用它来在页面中放置一些html元素,我需要知道如何将用户工作保存在他可以下载的HTML文件中,或者可以查看他的工作之后保存它

#8


I need the same solution that porta is looking for. My scenario is i'm building a drag and drop cms. Users can drag drop html elements to build their pages. Now how do i save these changes (to db or to a session var) and must be able to create a static page with all the above changes that the user made with php. Can someone shed some light. I'm totally new to jquery and wouldn't consider myself expert in php.

我需要porta正在寻找的相同解决方案。我的情况是我正在构建一个拖放cms。用户可以拖放drop html元素来构建他们的页面。现在我如何保存这些更改(到db或会话var),并且必须能够创建一个静态页面,其中包含用户使用php进行的所有上述更改。有人可以解释一下。我对jquery完全不熟悉,不会认为自己是php的专家。