Edit-In-Place

Материал из Umicms
Перейти к:навигация, поиск

Что такое edit in place?

edit in place (редактирование на месте) - это возможность редактировать свойства объектов и страниц прямо на сайте (без входа в административный интерфейс), возможность наглядно видеть, как будет выглядеть редактируемая страница.

Условия работы

1. Пользователь должен быть авторизован и иметь права на использование edit in place 2. Шаблон должен быть сверстан по определенным правилам

Особенности верстки tpl-шаблона

1. В шаблоне необходимо объявить пространство имен umi: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
...
</html>

2. Подключить JavaScript'ы для панели быстрого редактирования и для edit in place: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
	<head>
		...
		%system includeQuickEditJs()%
		%system includeEditInPlaceJs()%
		...
	</head>
	<body>
		...
	</body>
</html>

3. Определить редактируемые области (поля), прописав тэгам определенные атрибуты. Смотрите описание пространства имен umi.

Особенности верстки xsl-шаблона

1. Необходимо определить пространство имен umi 2. Подключить JavaScript'ы для панели быстрого редактирования и для edit in place, используя протокол udata

Пример шаблона: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet  [
	<!ENTITY nbsp "&#160;">
	<!ENTITY middot "&#183;">
	<!ENTITY copy "&#169;">
]>

<xsl:stylesheet	version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:php="http://php.net/xsl"
	xmlns:date="http://exslt.org/dates-and-times"
	xmlns:udt="http://umi-cms.ru/2007/UData/templates"
	xmlns:umi="http://www.umi-cms.ru/TR/umi"
	extension-element-prefixes="php"
	exclude-result-prefixes="xsl php udt date">

	<xsl:output method="html" version="4.01"
		encoding="utf-8"
		doctype-public="-//W3C//DTD HTML 4.01//EN"
		doctype-system="http://www.w3.org/TR/html4/strict.dtd"
		indent="yes"
		cdata-section-elements="script noscript"
		undeclare-namespaces="yes"
		omit-xml-declaration="yes"/>

	<xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi">
			<head>
				<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes"/>
				<xsl:value-of select="document('udata://system/includeEditInPlaceJs')/udata" disable-output-escaping="yes"/>
			</head>
			<body>
				...
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

3. Определить редактируемые области (поля), прописав тэгам определенные атрибуты. Смотрите описание пространства имен umi.

Описание атрибутов из пространства имен umi

Атрибуты из пространства имен umi необходимы для указания редактируемых регионов.


Список атрибутов: umi:element-id - указывает идентификатор элемента (страницы), соответствующий редактируемой области. При наличии подключенной возможности "Виджеты" и если этот атрибут указан, создается редактируемый регион и появляется возможность удалить элемент из структуры.

umi:object-id - указывает идентификатор объекта, соответствующий редактируемой области. При наличии подключенной возможности "Виджеты" и если этот атрибут указан, создается редактируемый регион и появляется возможность удалить объект.

umi:field-name - указывает идентификатор свойства элемента или объекта (можно смотреть в шаблонах данных), с которым связана редактируемая область. Работает только в связке с umi:element-id или umi:object-id. Если umi:object-id и umi:element-id не указан, пытается взять его у первой родительской редактируемой области. Если этот атрибут указан и определен идентификатор объекта или элемента, создается редактируемый регион с возможностью править свойство.

umi:module и umi:method - указывает какому модулю и методу соответствует редактируемая область. Если оба атрибута указаны, создается редактируемый регион с возможностью добавлять объекты или элементы (при наличии подключенной возможности "Виджеты"). Если у области указан umi:element-id, то создаваемые элементы (страницы) будут создаваться дочерними от элемента, соответствующего идентификатору umi:element-id

Примеры назначения редактируемых регионов

1. Создаем редактируемый заголовок в tpl-шаблоне страницы: 

	<h1 umi:element-id="%pid%" umi:field-name="h1">%header%</h1>

2. Создаем редактируемый список пользователей с возможностью добавить, удалить пользователя и редактировать имя каждого пользователя. xsl - шаблон: 

	<xsl:template match="udata[@module='users'] and udata[@method='list_users']">
		<ul umi:module="users" umi:method="list_users">
			<xsl:apply-templates select="items/item" mode="viewuser">
		</ul>
</xsl:template>

<xsl:template match="item" mode="viewuser">
		<li umi:object-id="{@id}" umi:field-name="{fname}"><xsl:value-of select="document(concat('uobject://', @id, '.fname'))//value" /></li>
</xsl:template>

3. Создаем редактируемое меню в tpl-шаблоне. Получаем возможность добавлять в меню страницы на любую вложенность, удалять страницы и изменять имена пунктов меню. Модифицируем шаблон /tpls/content/menu/default.tpl: 

<?php

$FORMS = Array();


$FORMS['menu_block_level1'] = <<<END
			<div id="menu" umi:element-id="%id%" umi:module="content" umi:method="menu">
%lines%
			</div>

END;

$FORMS['menu_line_level1'] = <<<END
				<a href="%link%" umi:element-id="%id%" umi:field-name="name">%text%</a>

END;

$FORMS['menu_line_level1_a'] = <<<END
				<a class="active" href="%link%" umi:element-id="%id%" umi:field-name="name">%text%</a>

END;


?>
Источник — «https://wiki.umisoft.ru/index.php?title=Edit-In-Place&oldid=763»