Page editing on the spot

[tdewolff]

True WYSIWYG with image insertion which can be resized on the spot too. Either use markdown, html or something else to save data to the database.

Should you still be able to use the admin panel for editing? What about other templates?

[s-p-n]

Here's my vision for the whole page-editing process:

I'm thinking we can completely remove admin-panel page-editing. Whenever a page is created, give a psuedo-page with lorem ipsum content- perhaps provided by the template. Pages can be modified on-the-fly. Images can be drag-n-dropped directly onto the site, and saved with the content as base64. This will reduce page requests, but also drop support for older browsers. Perhaps another solution is to detect base64 images with PHP, convert them into an image file, and replace the base64 src with the url to the image recreated by PHP.

Saving will be done via AJAX. We will set an event-listener (in javascript) when the content is changed. A 5 second timeout will be created. If the content is changed, the timeout is deleted, then created again- so the page will not update if the user is power-typing. Once the user haults editing for 5 seconds, then we send a POST request (via ajax) to some PHP file that will do the processing noted above- saving images and what-not into their own files for legacy browser support.

Here's the psuedo-JavaScript code I came up with:

(function (w, $) {
  var t = null;
  var ms = 5000;
  var url = 'some/url/to/updateContent.php';
  var content = $('["contenteditable"]');
  var updateContent = function updateContent() {
    $.post(url, {
      content: content.html()
    });
  };
  content.on('change', function () {
    w.clearTimeout(t);
    t = w.setTimeout(updateContent, 5000);
  });
}(window, jQuery));

I have no guarentees that the code above is correct, I just typed it up real quick.

[tdewolff]

Agreed. I would prefer the images to be uploaded to the assets/ dir. Then we can crush images and use the resize-and-cache functionality.

I would like to add another JS lib for resizing images on the spot aswell as editing title and alt attributes.

[s-p-n]

if contentEditable attribute is enabled, the HTML5 browsers have built-in support for resizing. So all we'd have to worry about is the alt-text and title. We can extend our content-editing library to support this feature. It should look similar to when text is highlighted- how it brings up a little box with Bold, Italics, and what-not.

[tdewolff]

Text editing works, todo:

• Insert local images and assets
• Upload images/assets
• Image resizing on the spot and attributes editing
• Insert links to local pages

[tdewolff]

Implemented my own inline editor: dexedit. TODO:

• Insert assets
• Insert image, upload image by dragging and resize on the spot
• Ability to amend link/asset/image properties
• Proper text symbol insertion much like smartypants
• Testing in all major browsers

[tdewolff]

All implemented, for the bugs a new issue is opened.