CODEWITHSUNDEEP
javascriptjqueryhtmlcssediting
steo
steo

Reputation: 4656

How Should I Send HTML/CSS Content To A Server?

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.com 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 "compiled"?) html page to the file-system?

Thanks in advance to all.

Upvotes: 2

Views: 6672

Answers (7)

shibualexis
shibualexis

Reputation: 4744

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 recommend 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! :-)

Upvotes: 0

BCDeWitt
BCDeWitt

Reputation: 4773

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.

Upvotes: 0

trinvh
trinvh

Reputation: 30

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

Upvotes: -1

Onur Yıldırım
Onur Yıldırım

Reputation: 33634

Creating an HTML editor is a very complicated 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.

Upvotes: 2

Guy Schalnat
Guy Schalnat

Reputation: 1717

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 comfortable 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.

Upvotes: 3

Lie Ryan
Lie Ryan

Reputation: 64855

I'd recommend 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 compiled HTML.

Upvotes: 1

Moddinu
Moddinu

Reputation: 185

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

Upvotes: 0

Related Questions