Démonstration d'édition de contenu sans peine ! Ce mécanisme est intégrable aux sites NodeAtlas. Les sources ce trouvent sur ce répertoire GitHub ainsi qu'un Readme explicatif.

Vous pouvez éditer n'importe quelle zone convenue comme éditable dans la vue via l'interface d'édition de contenu. Pour éditer une valeur, appuyez sur les touches « ctrl + s » et cliquez sur une zone violette. Pour en éditer plusieurs, maintenez « ctrl + s » enfoncé ce qui vous permet d'empiler les valeurs sans appuyer sans arrêt sur la combinaison de touche. Vous pouvez déplacer votre fenêtre d'édition en restant le clique enfoncé dans une zone blanche et en déplaçant votre souris. Testons les syntaxes possibles dans cette page. Pour cette démo, vos valeurs ne seront pas enregistrées dans les fichiers de variations, donc, un coup de F5 remettra les valeurs d'origine. Cependant les modifications seront bien répercutées dans les autres fenêtres ouvertes chez tout les utilisateurs : ne vous étonnez donc pas si le contenu change comme par magie !

<p><?- editText(common.demo.example.hardText, ['common.demo.example.hardText', 'common.json']) ?></p>
<?- editHtml(common.demo.example.hardHtml, ['common.demo.example.hardHtml', 'common.json']) ?>
<p><a href="<?- editAttr(common.demo.example.hardAttr.url, ['common.demo.example.hardAttr.url', 'common.json', 'href']) ?>" title="<?- editAttr(common.demo.example.hardAttr.description, ['common.demo.example.hardAttr.description', 'common.json', 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- editAttr(common.demo.example.hardMulti.url, ['common.demo.example.hardMulti.url', 'common.json', 'href']) ?>" title="<?- editAttr(common.demo.example.hardMulti.description, ['common.demo.example.hardMulti.description', 'common.json', 'title']) ?>"><?- editText(common.demo.example.hardMulti.content, ['common.demo.example.hardMulti.content', 'common.json']) ?></a></p>
<div class="<?- editAttr(common.demo.example.hardMulti.class, ['common.demo.example.hardMulti.class', 'common.json', 'class']) ?>"><?- editHtml(common.demo.example.hardMulti.html, ['common.demo.example.hardMulti.html', 'common.json']) ?></div>

<p><?- editText(specific.demo.example.hardText, ['specific.demo.example.hardText', 'index.json']) ?></p>
<?- editHtml(specific.demo.example.hardHtml, ['specific.demo.example.hardHtml', 'index.json']) ?>
<p><a href="<?- editAttr(specific.demo.example.hardAttr.url, ['specific.demo.example.hardAttr.url', 'index.json', 'href']) ?>" title="<?- editAttr(specific.demo.example.hardAttr.description, ['specific.demo.example.hardAttr.description', 'index.json', 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- editAttr(specific.demo.example.hardMulti.url, ['specific.demo.example.hardMulti.url', 'index.json', 'href']) ?>" title="<?- editAttr(specific.demo.example.hardMulti.description, ['specific.demo.example.hardMulti.description', 'index.json', 'title']) ?>"><?- editText(specific.demo.example.hardMulti.content, ['specific.demo.example.hardMulti.content', 'index.json']) ?></a></p>
<div class="<?- editAttr(specific.demo.example.hardMulti.class, ['specific.demo.example.hardMulti.class', 'index.json', 'class']) ?>"><?- editHtml(specific.demo.example.hardMulti.html, ['specific.demo.example.hardMulti.html', 'index.json']) ?></div>

<p><?- editText(common.demo.example.hardText, ['common.demo.example.hardText', file]) ?></p>
<?- editHtml(common.demo.example.hardHtml, ['common.demo.example.hardHtml', file]) ?>
<p><a href="<?- editAttr(common.demo.example.hardAttr.url, ['common.demo.example.hardAttr.url', file, 'href']) ?>" title="<?- editAttr(common.demo.example.hardAttr.description, ['common.demo.example.hardAttr.description', file, 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- editAttr(common.demo.example.hardMulti.url, ['common.demo.example.hardMulti.url', file, 'href']) ?>" title="<?- editAttr(common.demo.example.hardMulti.description, ['common.demo.example.hardMulti.description', file, 'title']) ?>"><?- editText(common.demo.example.hardMulti.content, ['common.demo.example.hardMulti.content', file]) ?></a></p>
<div class="<?- editAttr(common.demo.example.hardMulti.class, ['common.demo.example.hardMulti.class', file, 'class']) ?>"><?- editHtml(common.demo.example.hardMulti.html, ['common.demo.example.hardMulti.html', file]) ?></div>

<p><?- editText(specific.demo.example.hardText, ['specific.demo.example.hardText', file]) ?></p>
<?- editHtml(specific.demo.example.hardHtml, ['specific.demo.example.hardHtml', file]) ?>
<p><a href="<?- editAttr(specific.demo.example.hardAttr.url, ['specific.demo.example.hardAttr.url', file, 'href']) ?>" title="<?- editAttr(specific.demo.example.hardAttr.description, ['specific.demo.example.hardAttr.description', file, 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- editAttr(specific.demo.example.hardMulti.url, ['specific.demo.example.hardMulti.url', file, 'href']) ?>" title="<?- editAttr(specific.demo.example.hardMulti.description, ['specific.demo.example.hardMulti.description', file, 'title']) ?>"><?- editText(specific.demo.example.hardMulti.content, ['specific.demo.example.hardMulti.content', file]) ?></a></p>
<div class="<?- editAttr(specific.demo.example.hardMulti.class, ['specific.demo.example.hardMulti.class', file, 'class']) ?>"><?- editHtml(specific.demo.example.hardMulti.html, ['specific.demo.example.hardMulti.html', file]) ?></div>

<p><?- editText(common.demo.example.hardText, ['common.demo.example.hardText', false]) ?></p>
<?- editHtml(common.demo.example.hardHtml, ['common.demo.example.hardHtml', false]) ?>
<p><a href="<?- editAttr(common.demo.example.hardAttr.url, ['common.demo.example.hardAttr.url', false, 'href']) ?>" title="<?- editAttr(common.demo.example.hardAttr.description, ['common.demo.example.hardAttr.description', false, 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- editAttr(common.demo.example.hardMulti.url, ['common.demo.example.hardMulti.url', false, 'href']) ?>" title="<?- editAttr(common.demo.example.hardMulti.description, ['common.demo.example.hardMulti.description', false, 'title']) ?>"><?- editText(common.demo.example.hardMulti.content, ['common.demo.example.hardMulti.content', false]) ?></a></p>
<div class="<?- editAttr(common.demo.example.hardMulti.class, ['common.demo.example.hardMulti.class', false, 'class']) ?>"><?- editHtml(common.demo.example.hardMulti.html, ['common.demo.example.hardMulti.html', false]) ?></div>

<p><?- editText(specific.demo.example.hardText, ['specific.demo.example.hardText', false]) ?></p>
<?- editHtml(specific.demo.example.hardHtml, ['specific.demo.example.hardHtml', false]) ?>
<p><a href="<?- editAttr(specific.demo.example.hardAttr.url, ['specific.demo.example.hardAttr.url', false, 'href']) ?>" title="<?- editAttr(specific.demo.example.hardAttr.description, ['specific.demo.example.hardAttr.description', false, 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- editAttr(specific.demo.example.hardMulti.url, ['specific.demo.example.hardMulti.url', false, 'href']) ?>" title="<?- editAttr(specific.demo.example.hardMulti.description, ['specific.demo.example.hardMulti.description', false, 'title']) ?>"><?- editText(specific.demo.example.hardMulti.content, ['specific.demo.example.hardMulti.content', false]) ?></a></p>
<div class="<?- editAttr(specific.demo.example.hardMulti.class, ['specific.demo.example.hardMulti.class', false, 'class']) ?>"><?- editHtml(specific.demo.example.hardMulti.html, ['specific.demo.example.hardMulti.html', false]) ?></div>

<p><?- et(common, ['demo.example.hardText', fc]) ?></p>
<?- eh(common, ['demo.example.hardHtml', fc]) ?>
<p><a href="<?- ea(common, ['demo.example.hardAttr.url', fc, 'href']) ?>" title="<?- ea(common, ['demo.example.hardAttr.description', fc, 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- ea(common, ['demo.example.hardMulti.url', fc, 'href']) ?>" title="<?- ea(common, ['demo.example.hardMulti.description', fc, 'title']) ?>"><?- et(common, ['demo.example.hardMulti.content', fc]) ?></a></p>
<div class="<?- ea(common, ['demo.example.hardMulti.class', fc, 'class']) ?>"><?- eh(common, ['demo.example.hardMulti.html', fc]) ?></div>

<p><?- et(specific, ['demo.example.hardText', fs]) ?></p>
<?- eh(specific, ['demo.example.hardHtml', fs]) ?>
<p><a href="<?- ea(specific, ['demo.example.hardAttr.url', fs, 'href']) ?>" title="<?- ea(specific, ['demo.example.hardAttr.description', fs, 'title']) ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?- ea(specific, ['demo.example.hardMulti.url', fs, 'href']) ?>" title="<?- ea(specific, ['demo.example.hardMulti.description', fs, 'title']) ?>"><?- et(specific, ['demo.example.hardMulti.content', fs]) ?></a></p>
<div class="<?- ea(specific, ['demo.example.hardMulti.class', fs, 'class']) ?>"><?- eh(specific, ['demo.example.hardMulti.html', fs]) ?></div>

<p><?- et(common, ['demo.example.hardText', fc, true]) ?></p>
<div><?- eh(common, ['demo.example.hardHtml', fc, true]) ?></div>
<p><a href="<?- ea(common, ['demo.example.hardAttr.url', fc, 'href', true]) ?>" title="<?- ea(common, ['demo.example.hardAttr.description', fc, 'title', true]) ?>">Ce texte et ses attributs sont éditable.</a></p>

<p><?- et(specific, ['demo.example.hardText', fs, true]) ?></p>
<div><?- eh(specific, ['demo.example.hardHtml', fs, true]) ?></div>
<p><a href="<?- ea(specific, ['demo.example.hardAttr.url', fs, 'href', true]) ?>" title="<?- ea(specific, ['demo.example.hardAttr.description', fs, 'title', true]) ?>">Ce texte et ses attributs sont éditable.</a></p>

<p class="add-text"><?- et(common, ['demo.example.hardText', fc, 'website.addText()']) ?></p>
<div class="add-text"><?- eh(common, ['demo.example.hardHtml', fc, 'website.addText()']) ?></div>
<p><a class="add-attr" href="<?- ea(common, ['demo.example.hardAttr.url', fc, 'href', 'website.addAttr()']) ?>" title="<?- ea(common, ['demo.example.hardAttr.description', fc, 'title', 'website.addAttr()']) ?>">Les attributs sont éditable.</a></p>

<p class="add-text"><?- et(specific, ['demo.example.hardText', fs, 'website.addText()']) ?></p>
<div class="add-text"><?- eh(specific, ['demo.example.hardHtml', fs, 'website.addText()']) ?></div>
<p><a class="add-attr" href="<?- ea(specific, ['demo.example.hardAttr.url', fs, 'href', 'website.addAttr()']) ?>" title="<?- ea(specific, ['demo.example.hardAttr.description', fs, 'title', 'website.addAttr()']) ?>">Les attributs sont éditable.</a></p>

<? for (var i = 0, l = common.demo.loop.length; i < l; i++) { ?>
<p class="add-text"><?- et(common, ['demo.loop[' + i + '].hardText', fc, 'website.addText()']) ?></p>
<div class="add-text"><?- eh(common, ['demo.loop[' + i + '].hardHtml', fc, 'website.addText()']) ?></div>
<p><a class="add-attr" href="<?- ea(common, ['demo.loop[' + i + '].hardAttr.url', fc, 'href', 'website.addAttr()']) ?>" title="<?- ea(common, ['demo.loop[' + i + '].hardAttr.description', fc, 'title', 'website.addAttr()']) ?>">Les attributs sont éditable.</a></p>
<? } ?>

<? for (var i = 0, l = specific.demo.loop.length; i < l; i++) { ?>
<p class="add-text"><?- et(specific, ['demo.loop[' + i + '].hardText', fs, 'website.addText()']) ?></p>
<div class="add-text"><?- eh(specific, ['demo.loop[' + i + '].hardHtml', fs, 'website.addText()']) ?></div>
<p><a class="add-attr" href="<?- ea(specific, ['demo.loop[' + i + '].hardAttr.url', fs, 'href', 'website.addAttr()']) ?>" title="<?- ea(specific, ['demo.loop[' + i + '].hardAttr.description', fs, 'title', 'website.addAttr()']) ?>">Les attributs sont éditable.</a></p>
<? } ?>

Ce HTML n'est...

...pas éditable.

<p>Ce texte <strong>n'est</strong> pas éditable.</p>
<div><p>Ce HTML n'est...</p> <p>...pas éditable.</p></div>
<p><a href="javascript:;" title="Title">Les attributs ne sont pas éditable.</a></p>
<p><a href="javascript:;" title="Title">Ce texte et ses attributs ne sont pas éditable</a></p>
<div class="class-multi"><p><strong>et ce HTML <br /> non plus</strong></p></div>

Ce HTML n'est...

... pas éditable.

<p><?- common.demo.example.hardTextNotEditable ?></p>
<?- common.demo.example.hardHtmlNotEditable ?>
<p><a href="<?= common.demo.example.hardAttrNotEditable.url ?>" title="<?= common.demo.example.hardAttrNotEditable.description ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?= common.demo.example.hardMultiNotEditable.url ?>" title="<?= common.demo.example.hardMultiNotEditable.description ?>"><?- common.demo.example.hardMultiNotEditable.content ?></a></p>
<div class="<?= common.demo.example.hardMultiNotEditable.class ?>"><?- common.demo.example.hardMultiNotEditable.html ?></div>

Ce HTML n'est...

...pas éditable.

<p><?- specific.demo.example.hardTextNotEditable ?></p>
<?- specific.demo.example.hardHtmlNotEditable ?>
<p><a href="<?= specific.demo.example.hardAttrNotEditable.url ?>" title="<?= specific.demo.example.hardAttrNotEditable.description ?>">Les attributs ne sont pas éditable.</a></p>
<p><a href="<?= specific.demo.example.hardMultiNotEditable.url ?>" title="<?= specific.demo.example.hardMultiNotEditable.description ?>"><?- specific.demo.example.hardMultiNotEditable.content ?></a></p>
<div class="<?= specific.demo.example.hardMultiNotEditable.class ?>"><?- specific.demo.example.hardMultiNotEditable.html ?></div>

<select name="country"
	data-val="true"
	data-rule-required="true"
	data-msg-required="<?- ea(specific, ['country.errors.required', fc, 'data-msg-required']) ?>">
	<option value=""<?- ea(common, ['country.label', fc, '$text']) + "</option" ?>>
	<? for (var i = 0; i < common.country.list.length; i++) { ?>
		<option value="<?- ea(common, ['country.list[' + i + '].value', fc, 'value']) ?>"<?- ea(common, ['country.list[' + i + '].text', fc, '$text']) + "</option" ?>>
	<? } ?>
</select>

<section$ class="component-example">
	<div class="ui">
		<h4$><?- et(common, ['demo.componentTitle', fc]) ?></h4$>
		<ul>
			<? if (component && component.components && component.components['item1']) { ?>
			<li>
				<div class="component-example--item">
					<?- et(specific, ['demo.component1', fs]) ?> <br>
					<?- et(common, ['demo.component1', fc]) ?> <br>
					<?- component.title1 ?> <br>
					<?- et(specific, [path + 'title1', fs]) ?> <br>
					<?- et(eval(component.variation), [path + 'title1', eval(component.file)]) ?> <br>
					<?- includeComponents('item1', component, path) ?>
				</div>
			</li>
			<? } ?>
			<? if (component && component.components && component.components['item2']) { ?>
			<li>
				<div class="component-example--item">
					<?- et(specific, ['demo.component2', fs]) ?> <br>
					<?- et(common, ['demo.component2', fc]) ?> <br>
					<?- component.title2 ?> <br>
					<?- et(specific, [path + 'title2', fs]) ?> <br>
					<?- et(eval(component.variation), [path + 'title2', eval(component.file)]) ?> <br>
					<?- includeComponents('item2', component, path) ?>
				</div>
			</li>
			<? } ?>
			<? if (component && component.components && component.components['item3']) { ?>
			<li>
				<div class="component-example--item">
					<?- et(specific, ['demo.component3', fs]) ?> <br>
					<?- et(common, ['demo.component3', fc]) ?> <br>
					<?- component.title3 ?> <br>
					<?- et(specific, [path + 'title3', fs]) ?> <br>
					<?- et(eval(component.variation), [path + 'title3', eval(component.file)]) ?> <br>
					<?- includeComponents('item3', component, path) ?>
				</div>
			</li>
			<? } ?>
		</ul>
	</div>
</section$>

<section$ class="component-example-loop">
	<div class="ui">
		<h4$><?- et(specific, ['demo.componentTitle', fs]) ?></h4$>
		<? if (component && component.components) { ?>
		<ul>
			<? component.i = 1; for (var placeholder in component.components) { ?>
			<? if (component.components.hasOwnProperty(placeholder)) { ?>
			<li>
				<div class="component-example--item">
					<?- eh(specific, ['demo.component1', fs]) ?>
					<?- eh(specific, ['demo.component2', fs]) ?>
					<?- eh(specific, ['demo.component3', fs]) ?>
					<?- eh(common, ['demo.component1', fc]) ?>
					<?- eh(common, ['demo.component2', fc]) ?>
					<?- eh(common, ['demo.component3', fc]) ?>
					<?- component['title' + component.i] ?>
					<?- eh(common, [path + 'title'+ component.i, fc]) ?>
					<?- eh(eval(component.variation), [path + 'title'+ component.i, eval(component.file)]) ?>
					<?- includeComponents(placeholder, component, path) ?>
				</div>
			</li>
			<? } component.i++ ?>
			<? } ?>
		</ul>
		<? } ?>
	</div>
</section$>