javascript - How Should I Send HTMLCSS Content To A Server? - Stack Overflow

admin管理员组

文章数量:1327849

The Situation

I have to create a web-application that allows me to, starting from a blank page, insert new html, images and so on, and allows to edit it with features like: resize, positioning and so on.

To figure out what I'm talking about, see: in its editor section.

My Question

How should I save the new html I create, with the CSS bound to it, to my server?

Should I use a JSON structure in which I put all my elements with something like:

 { 
   attributes: "",
   tag: "div",
   html: "some-html", 
   ..
 }

Or should I save the entire (maybe "piled"?) html page to the file-system?

Thanks in advance to all.

The Situation

I have to create a web-application that allows me to, starting from a blank page, insert new html, images and so on, and allows to edit it with features like: resize, positioning and so on.

To figure out what I'm talking about, see: https://www.scrollkit. in its editor section.

My Question

How should I save the new html I create, with the CSS bound to it, to my server?

Should I use a JSON structure in which I put all my elements with something like:

 { 
   attributes: "",
   tag: "div",
   html: "some-html", 
   ..
 }

Or should I save the entire (maybe "piled"?) html page to the file-system?

Thanks in advance to all.

• javascript
• jquery
• html
• css
• editing

Share Improve this question Follow edited Jun 3, 2014 at 21:28 BCDeWitt 4,78322 gold badges2323 silver badges3636 bronze badges asked May 21, 2014 at 9:54 steosteo 4,65622 gold badges3636 silver badges6666 bronze badges 1

• you have the right idea with json, id go the next step and use an mvc language. AngularJS is my favorite. That way, the page state is stored in JS, not DOM and is preserved for page life. To go further, you could save elements in HTML 5 localstorage. Then Page state can be preserved beyond page life. – Dave Alperovich Commented May 29, 2014 at 9:44

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3 +50

I see this as an architecture question more then a code question, especially since the asker didn't specify what server side technology they are using or are fortable with.

Here is how I would design this:

I'd have a div where all the content would go inside. I'd optionally have a style element (with an id) that all my custom css would be written into. I'd simply save the contents of the div and css style to the server, using ajax, when various things happened (user hit save button, perhaps auto-save every so many minutes, etc), and reload it when needed (on page load, reset button, maybe undo, etc.).

Hopefully, I'd be able to build all my insert/resize/position code to work just off of html. If I needed to, I'd put data- elements on my html to store information I needed to make all my manipulation work. I'd strongly hesitate to have a duplicate JavaScript structure in memory for all my elements, because it seems that nightmares could happen if they get out of sync. However, if you have to do so, I'd also save that to the server and reload it. I'd find a way to rebuild either the structure or the data- attributes if they don't exist.

That's a good enough start, I think. Feel free to ask questions.

Creating an HTML editor is a very plicated task. I would use one of existing controls that is actively maintained. But if you insist, you can use JSON and post the HTML and CSS data to an endpoint, then save it to a file or database. I don't believe keeping a node by node structure is necessary.

So, you could try the following:
(I assume, you're using an <iframe/> for this HTML editor)

var data,
    // since we're editing within an iframe, 
    // we'll get the iframe document to access HTML data
    iframe = document.getElementById('editor-iframe'),
    editorDoc = iframe.contentDocument || iframe.contentWindow.document;

// gathering post data from the edited document
data = {
    // get the full html from the editor document
    html: $(editorDoc).find('html').get(0).outerHTML,
    // since the user is editing a file on the fly, you can 
    // have a <style> element within the head and modify it when 
    // user edits the file. So we can get the style contents
    // and store it separately here. 
    css: $(editorDoc).find('head style').html(),
    // add some extra metadata here
    metadata: {
        user: 'onur'
    }
};

// finally, posting the data to the endpoint when the 
// user clicks a "save" button. And you should also auto-save
// periodically to prevent data loss.
$.post('/saveFile', data);

Here is a demo fiddle.

I'd remend using XML+XHTML. Browsers can render XHTML just as well as HTML, but unlike with HTML, XML processing rules allows namespaces so the browser will just ignore unrecognized elements and attributes as long as you put them in a separate namespace. Your editor can use namespaced elements and attributes to store editor metadata that wouldn't be in the piled HTML.

When I implementing something like this I saved the raw html as XML then I parsed the page accordingly.

To be more clear I used various xml blocks for different items eg:

<xml>
  <html>

  </html>
  <css>
  </css>
</xml>

Just build the structure you need. Hope this helps

This is how I'd do it to keep things simple:

{   
    filelist: [
        {
            filename: "style.css",
            contents: ""
        },
        {
            filename: "index.js",
            contents: ""
        },
        {
            filename: "index.html",
            contents: ""
        }
    ]
}

If it's pure HTML, I would just keep it as one string when passing to the server and use an iframe on the client side to preview it. This would make loading simple and you can just manipulate the HTML using the DOM when sent to the client. Is there a particular reason you would need the HTML tags in any other format? I suppose if you wanted to implement some kind of content management system with re-usable blocks, you would want to change things up a bit.

Steo, when you are developing an application which has a feature to insert HTML, make sure you have a good control to avoid persistent/non-persistent XSS attacks.

If the HTML/CSS depended features are manageable, I would remend you to go with JSON storage with proper server side validation, which may help you to keep your model clean and no technology dependent. So that you can parse the JSON and develop your application for mobile, tablet etc., later.

Having an array of JSON objects(CONFIG) copy will also help the application with undo or redo operations, which will be an important feature when working with editor.

Good luck! :-)

With html5 i think it's simple http://www.w3schools./html/html5_webstorage.asp

本文标签： javascriptHow Should I Send HTMLCSS Content To A ServerStack Overflow