Редактор контента на отдельной вкладке формы данных

У каждого динамического типа данных в админке есть своя форма для добавления данных.

Если у поля выбран виджет VisualXhtmlEditor, то на форме появляется кнопка "Edit HTML", при нажатии которой открывается окно редактора контента.

Если вы посмотрите добавление сообщения в блог в пакете Composite.Community.Blog, то вы увидите, что редактор контента там реализован более удобно - на отдельной вкладке.

Как вынести редактор контента для соответствующего поля на отдельную вкладку?

Немного теории. Для каждого динамического типа данных, система создает форму по умолчанию для добавления или редактирования данных. Но у вас есть возможность изменить эту форму. Именно так вы и сможете вынести редактор контента на отдельную вкладку.


Тип данных

Давайте сначала создадим очень простой глобальный тип данных:

• Название: Элементы контента
• Имя типа: Item
• Пространство имен типа: Demo.Content

А теперь добавим поля:

• Имя: Title, Надпись: Название, Тип поля: Строка
• Имя: Description, Надпись: Описание, Типа поля: Строка

Для поля Description укажем максимальную длину строки - "Неограниченная длина", и на вкладке "Расширенные" выберем виджет VisualXhtmlEditor.

Форма данных

Теперь самое главное: изменение формы.

1. Выбираем наш тип данных в разделе "Данные".
2. Нажимаем "Изменить разметку формы".
   
   
   
3. В открывшемся файле делаем такие изменения:
1. Элемент <FieldGroup/> помещаем в элемент <PlaceHolder/>, а сам элемент <PlaceHolder/> помещаем в элемент <TabPanels/>.
2. Элементу  <PlaceHolder/> добавляем атрибут Label со значением "Настройки" (или что вам нравиться).
3. Элемент <InlineXhtmlEditor/> перемещаем на уровень элемента  <PlaceHolder/>, чтобы они были дочерними для элемента <TabPanels/>.
4. У элемента  <InlineXhtmlEditor/> и его дочернего элемента  <InlineXhtmlEditor.Xhtml/> удаляем "Inline" из названия, чтобы получилось  <XhtmlEditor/> и   <XhtmlEditor.Xhtml/> соответственно.
4. Сохраняем нашу измененную форму.

У вас должно получиться такое:

<cms:formdefinition xmlns:cms="http://www.composite.net/ns/management/bindingforms/1.0" xmlns="http://www.composite.net/ns/management/bindingforms/std.ui.controls.lib/1.0" xmlns:ff="http://www.composite.net/ns/management/bindingforms/std.function.lib/1.0" xmlns:f="http://www.composite.net/ns/function/1.0">
 <cms:bindings>
  <cms:binding name="Id" type="System.Guid" optional="true" />
  <cms:binding name="Title" type="System.String" optional="true" />
  <cms:binding name="Description" type="System.String" optional="true" />
 </cms:bindings>
 <cms:layout>
  <cms:layout.label>
   <cms:read source="Title" />
  </cms:layout.label>
  <TabPanels>
   <PlaceHolder Label="Настройки">
    <FieldGroup>
     <TextBox Label="Название" Help="" SpellCheck="true">
      <TextBox.Text>
       <cms:bind source="Title" />
      </TextBox.Text>
     </TextBox>
    </FieldGroup>
   </PlaceHolder>
   <XhtmlEditor Label="Описание" Help="" ClassConfigurationName="common">
    <XhtmlEditor.Xhtml>
     <cms:bind source="Description" />
    </XhtmlEditor.Xhtml>
   </XhtmlEditor>
  </TabPanels>
 </cms:layout>
</cms:formdefinition>

(Если вы сделали что-то не так, то у вас могут возникнуть ошибки при сохранении разметки формы или при добавлении / редактировании данных этого типа.)

Можете проверять. Либо откройте существующий элемент данных этого типа, либо создайте новый.

Важные замечания

Первое. Когда вы сохраняете XML формы в первый раз, в папке App_Data\Composite\DynamicTypeForms\ создается файл именно с этим XML-кодом. В нашем случае это - \App_Data\Composite\DynamicTypeForms\Demo\Content\Item.xml

Второе. Если вы добавите или удалите поле в типе данных, или измените его виджет, вам нужно будет вручную добавить эти поля и/или изменить виджеты в этом файле.

Допустим, вы добавили еще одно поле "Summary" в наш тип данных (используйте виджет TextArea).

После этого:

1. Выбирите наш тип данных в разделе "Данные" и нажимите " Изменить разметку формы".
2. В элемент <cms:bindings/> добавляем <cms:binding name="Summary" type="System.String" optional="true" />
3. В элемент <FieldGroup/>  добавляем:
   
   
   <TextArea Label="Краткое описание" Help="" SpellCheck="true">
    <TextArea.Text>
     <cms:bind source="Summary" />
    </TextArea.Text>
   </TextArea>
4. Сохраняем.

Должно получится так:

<cms:formdefinition xmlns:cms="http://www.composite.net/ns/management/bindingforms/1.0" xmlns="http://www.composite.net/ns/management/bindingforms/std.ui.controls.lib/1.0" xmlns:ff="http://www.composite.net/ns/management/bindingforms/std.function.lib/1.0" xmlns:f="http://www.composite.net/ns/function/1.0">
 <cms:bindings>
  <cms:binding name="Id" type="System.Guid" optional="true" />
  <cms:binding name="Title" type="System.String" optional="true" />
  <cms:binding name="Summary" type="System.String" optional="true" />
  <cms:binding name="Description" type="System.String" optional="true" />
 </cms:bindings>
 <cms:layout>
  <cms:layout.label>
   <cms:read source="Title" />
  </cms:layout.label>
  <TabPanels>
   <PlaceHolder Label="Настройки">
    <FieldGroup>
     <TextBox Label="Название" Help="" SpellCheck="true">
      <TextBox.Text>
       <cms:bind source="Title" />
      </TextBox.Text>
     </TextBox>
     <TextArea Label="Краткое описание" Help="" SpellCheck="true">
      <TextArea.Text>
       <cms:bind source="Summary" />
      </TextArea.Text>
     </TextArea>
    </FieldGroup>
   </PlaceHolder>
   <XhtmlEditor Label="Описание" Help="" ClassConfigurationName="common">
    <XhtmlEditor.Xhtml>
     <cms:bind source="Description" />
    </XhtmlEditor.Xhtml>
   </XhtmlEditor>
  </TabPanels>
 </cms:layout>
</cms:formdefinition>

Подсказка. Иногда проще будет удалить XML-файл динамической формы и затем опять отредактировать форму как указано выше. Система создаст новый файл динамической формы с добавленными полями и вам нужно будет проделать в нем примерно те же шаги, что описаны выше.