Question

I am working on a light-weight inline content editor for my site. Similar to CushyCMS or SurrealCMS, the ‘editable’ elements of my page are defined with a class="editable".

I would like to pass 2 variables to php via AJAX:

$page The document to be written to (eg. ‘/path/index.html’)

$json A json string: {"0":"First Content","1":"Second Content","2":"Third Content"} where the key is the index of all elements with class="editable" and the value is each element’s innerHTML.

In PHP 5.3, how can I open $page and find/replace class="editable" elements?

$page = $_POST['page'];
$json = $_POST['json'];

$doc = new DOMDocument();
$doc = DOMDocument::loadHTMLFile($page);

// Detect DOM elements with class="editable"  & replace content with JSON data

// Save changes to designated file
$doc->saveHTMLFile($page); // Write to file eg, 'index.html'

echo ('Success');

Answer 1

You can use XPath to track down all editable elements in the DOM.

$xpath = new DOMXPath($doc);
$entries = $xpath->query('//*[@class="editable"]');
$edits = json_decode($json, true);
$num_edits = count($edits);

for($i=0; $i<$num_edits; $i++)
{
    $f = new DOMDocument();
    $edit = mb_convert_encoding($edits[$i], 'HTML-ENTITIES', "UTF-8"); 
    $f->loadHTML($edit);
    $node = $f->documentElement->firstChild;
    $entries->item($i)->nodeValue = "";
    foreach($node->childNodes as $child) {
        $entries->item($i)->appendChild($doc->importNode($child, true));
    }
}

Here it is again in the context of your original code:

$page = $_POST['page'];
$json = $_POST['json'];

$doc = new DOMDocument();
$doc = DOMDocument::loadHTMLFile($page);

// Detect DOM elements with class="editable"  & replace content with JSON data
$xpath = new DOMXPath($doc);
$entries = $xpath->query('//*[@class="editable"]');
$edits = json_decode($json, true);
$num_edits = count($edits);

for($i=0; $i<$num_edits; $i++)
{
    $f = new DOMDocument();
    $edit = mb_convert_encoding($edits[$i], 'HTML-ENTITIES', "UTF-8"); 
    $f->loadHTML($edit);
    $node = $f->documentElement->firstChild;
    $entries->item($i)->nodeValue = "";
    foreach($node->childNodes as $child) {
        $entries->item($i)->appendChild($doc->importNode($child, true));
    }
}

// Save changes to designated file
$doc->saveHTMLFile($page); // Write to file eg, 'index.html'

echo ('Success');