"Lockable" Templates

[Andy Stephens]

Hi

I like the idea of FCKEditor templates, but there is nothing to stop the user from ignoring/overriding the template they have just selected. Templates are more of a time-saving feature for users, rather than a way of enforcing a particular content/layout.

It would be nice if parts of a template could be "locked", i.e. the user could only edit certain regions of the template. This would be useful for CMS applications, where you want to enforce a particular page layout.

Taking this idea one step further (which might be more difficult!): let's say I select your sample "Image and Title" template. I would be able to change the title text, the main text, and certain properties (e.g. the image src), but I wouldn't be able to delete the image, or change the text styles (for example). This kind of functionality would be invaluable to developers who work with CMS sites.

Thanks in advance Andy Stephens

[Frederico Caldeira Knabben]

#3264 has been marked as DUP

[Frederico Caldeira Knabben]

The fact is that it's not technically possible to properly (and reliably) protect areas inside the editor in this way. Actually, and usually, the opposite is done, by creating pages with "editable blocks", which open the editor at click.

I'll leave this open for still some research.

[Alfonso Martínez de Lizarrondo]

I had to file tickets for Firefox, Safari and Opera about this (none of them has been fixed so far). If the page is made editable with designMode, then they don't respect contentEditable=false, so this can't be fixed without lots of work.

[Matti Järvinen]

Any ideas or views on this?

[Jakub Ś]

As discussed on dev channel this may be really hard to achieve.

1. One approach is that such locked template could be customisable by a dialog box.
   For example, suppose you write a plugin where, in a dialog, you set a title, and image and a description. It renders this in the editor as a single selectable unit, with a bold title at the top, and image in the middle and the description at the bottom. Then, at any moment, you can make changes through the dialog window, without breaking the widget structure.

2. Second approach that came to my mind is the other way around. Why not using inline editing feature on template that is displayed in browser and not in CKEditor content area.

[Matti Järvinen]

Replying to j.swiderski:

Since responsive and complex layouts are less and less an exception these days something has to happen. I believe that most of webdevs would like to have an editor with a lot of the same features as CreateSend and MailChimp are having with their mail editors. Working on this issue could help with HTML5 video and responsive image standard (Well it is a mess, isn't it?) too.

Option 1.

Have you checked out Mercury Editor ​http://jejacks0n.github.com/mercury/ it has some snippets (special editable contents) within so this concept could be explored somewhat easily?

This option could end up as solution where actual template data is separated from the widget structure while editing enabling changing the template while preserving contents (if "placeholders" have similar "names"). Would be awesome IMHO.

Option 2.

Could end up as solution where clicking image with content-editable="true" would open up img dialog. And clicking h1 or any other tag would give html-editor.

<h1 content-editable="true">Some text here</h1>
<img content-editable="true" src="foo.png" />

Could it be possible to use option 2 with bindings to dialog / edit -types with data-attributes? This would enable forcing an input type to editable region.

<h1 content-editable="true" data-ckeditor-edittype="text">Some text here</h1>
<img content-editable="true" data-ckeditor-edittype="img" src="foo.png" />
<div class="ingress" content-editable="true" data-ckeditor-edittype="textarea">
Article summary here.
</div>
<div content-editable="true" data-ckeditor-edittype="html">
<p>Some text here</p>
</div>

[Piotrek Koszuliński]

Implemented in #9764.