Save a page after editing it with Javascript?

Question

Now, everyone knows the cute little trick where you punch this Javascript code into your browser's URL bar:

document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

And El Presto! You can start freely editing a website just how you want it.

The only problem is - you can't save it!

After doing some quick research, I found that most likely, the best way to save this was by the method suggested here, which consists of somehow turning the page into a giant form and posting it to a MySQL database.

Sure, while doing this is great, it's going to end up saving my whole page - and not just the section or container that I want to edit - and that's a major problem because us developers need to preserve lines of code such as...

<?php include('header.php'); ?>

...that aren't outputted in the HTML. In other words: it's going to save my page as it appears in outputted HTML, overwriting what is in my original PHP file.

What I'm asking how to do, is how would I go about saving a website edited like this, but just to save or update one or two editable containers on the website (not the whole thing so my PHP code doesn't get overwritten)?

For example:

<p>This Won't get updated when the page is "saved"</p>
<div id="update-this-contianer">
   This area will be passed on to the MySql database, and then updated into the same section of the original file.
</div><!-- End Area To Update -->

I get what you are asking for perfectly. One thing you can do is, save the php file as a html file, make changes to it, save it, convert it back to php. Another thing is, how about using a tool _like_ dreamweaver that has a designer preview? — Prasanth, Aug 05 '12 at 12:33
Hi there. Thanks for your response! Great point, but using dreamweaver defeats the purpose - because I need it to be editable online for my clients. — Adam McArthur, Aug 05 '12 at 13:05

score 7 · Accepted Answer · answered Aug 05 '12 at 12:20

7

Instead of setting contentEditable on the entire body, just put it on the element you want to edit. Then, send the contents of that element to the server. When you want to get the data back again, you just include that section in the appropriate place.

answered Aug 05 '12 at 12:20

nickf

537,072
198
649
721

score 2 · Answer 2 · answered Aug 05 '12 at 12:26

2

...Not answering your question but maybe contributing to a solution...:

Even though it i sounds easy (putting contentEditable="yes" on an element and of you go) - It is not...

You will have to use javascript to catch the edited elements of your page and persist the existing/new/changed content to a database.

I decided not to reinvent the wheel and started using Aloha for one project in the past:

http://aloha-editor.org/

answered Aug 05 '12 at 12:26

madflow

7,718
3
39
54

Question, did you have some sort of system for then saving Aloha Edit changes? Because obviously its just an editor - not something that saves the content. – Adam McArthur Aug 06 '12 at 07:41
@AdamMcArthur Yes - you will have to write a small part that saves the content. I used Mysql and PHP. – madflow Aug 06 '12 at 08:03
Any chance I can... buy that off you haha? – Adam McArthur Aug 06 '12 at 09:23
These were dark days. – Adam McArthur May 29 '14 at 12:52

score 1 · Answer 3 · edited May 23 '17 at 11:58

1

I found the following description. It may helps.

contenteditable change events

http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/

edited May 23 '17 at 11:58

Community

1
1

answered Aug 05 '12 at 12:17

devanand

5,116
2
20
19

Thanks for those pages, really helped me :) – Adam McArthur Aug 05 '12 at 13:03

score 1 · Answer 4 · answered Aug 05 '12 at 12:25

1

Just create an object, grab all the data when you press a button and send it using jQuery post.

For example:

var val = $('#update-this-contianer').html()
$.post('/post-address', {value: val}, function(returnMsg){
console.log(returnMsg)
}

How you get it back and put it into the original file however is more complicated. In node i would edit the save to db function so it opens file X and appends it somewhere, or simply append it to the req variable or something and serve it up.

However, if this is a public facing page, don't do this whole idea, for security reasons.

answered Aug 05 '12 at 12:25

Andrew Plummer

1,150
1
12
21

mm I know what you mean, the first parts pretty self explanatory, but saving it to the actual file is where things start getting wacky :/ – Adam McArthur Aug 05 '12 at 13:01
Thanks for your help also by the way :) – Adam McArthur Aug 05 '12 at 13:02

score 0 · Answer 5 · answered Jun 02 '19 at 15:53

One dirty or clean way to do this would be to use both PHP and HTML in conjuncture together.

First, like one of the users said, don't re-invent the wheel.

Download and install Aloha-Editor at the root of your project.
Use an OOP approach to designing your pages. Disclaimer, if you prefer procedural PHP, you don't actually have to use OOP, if you don't want to. It is possible to code procedural-style while maintaining a certain OOP logic.
Save your whole HTML page to your database via ajax, then use ajax to GET the content of the page.

Example :

index.php

<?php 
//include your db parameters
include_once 'config.php';

//include your html page
include_once 'view/index.html';?>

index.html

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Getting Started with Aloha Editor</title>
    <link rel="stylesheet" href="index.css" type="text/css">
    <!-- Load Aloha Editor css and js -->
    <link rel="stylesheet" href="/javascripts/aloha/css/aloha.css" type="text/css">
    <script src="/javascripts/aloha/lib/require.js"></script>
    <script src="/javascripts/aloha/lib/aloha.js"
      data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script>
</head>
<body>
    <div id="main">
        <div id="content"><p>Getting started with Aloha Editor!</p></div>
    </div>
    <script type="text/javascript">
        Aloha.ready( function() {
            Aloha.jQuery('#content').aloha();
        });
    </script>
</body>

OR you can simply use PHP with PHP. So instead of index.html, insert say home.php and in home.php you can retrieve content by requesting the database with the content saved.

Example

index.php

<?php 
//include your db parameters
include_once 'config.php';

//include your html page
include_once 'view/home.php';?>

home.php

select webpage_content from aloha where page_name='index'

echo $webpage_content

There are of course thousands ways to solve this problem. Whatever rocks your both :-)

Save a page after editing it with Javascript?

5 Answers5