+++
title = "Устаревшие настройки по умолчанию и режим редактора"
aliases = ["/docs/harvest/latest/plugins/developing/defaults-and-editor-mode/"]
+++

# Устаревшие настройки по умолчанию и режим редактора

Большинство плагинов позволяют пользователям настраивать поведение, изменяя настройки на вкладке редактора. Эти поля настроек сохраняются в json панели инструментов.

## Значения по умолчанию

Мы определяем поля, которые будут сохранены в Harvest, создавая значения в объекте panel контроллера. Вы можете увидеть эти значения для любой панели, выбрав View JSON в меню настроек в Harvest. Вот выдержка из json панели часов (с удаленными некоторыми полями), данные панели сохраняются в массиве панелей:
```json
{
  "id": 4,
  "title": "Clock",
  ...
  "rows": [
    {
      ...
      "panels": [
        {
          "bgColor": "rgb(132, 151, 130)",
          "clockType": "24 hour",
```

Вы можете определить данные панели, сначала создав переменную со значениями по умолчанию для полей, а затем установив их в объекте панели:

```javascript
const panelDefaults = {
  clockType: '24 hour',
  fontSize: '60px',
  fontWeight: 'normal',
  bgColor: null
};

constructor($scope, $injector) {
  super($scope, $injector);
  _.defaults(this.panel, panelDefaults);

  this.updateClock();
}
```

Функция Lodash [по умолчанию](https://lodash.com/docs/4.17.4#defaults ), который вызывается в приведенном выше коде: '_.defaults', устанавливает значение по умолчанию только в том случае, если значение еще не задано. Таким образом, значения, которые были изменены пользователем, не будут перезаписаны.

Эти поля панели могут быть использованы в контроллере или module.html шаблон:

``html
<h2 style="размер шрифта: {{ctrl.panel.FontSize}};">{{ctrl.time}}</h2>
```

Если вы хотите, чтобы ваши пользователи могли изменять эти значения панели, вам необходимо предоставить их в редакторе Harvest.

## Режим редактора

Режим редактора - это когда пользователь нажимает кнопку Редактировать на панели. На каждой панели есть вкладка "Общие", где вы меняете заголовок и ширину, а на некоторых панелях есть дополнительные встроенные вкладки, такие как вкладка "Показатели" или вкладка "Временной диапазон". Плагин панели может добавлять свои собственные вкладки, чтобы пользователь мог настраивать панель.

Соглашения Harvest означают, что все, что вам нужно сделать, это подключить шаблон Angular с полями ввода, и Harvest автоматически сохранит значения в json панели инструментов и загрузит их при загрузке панели инструментов.

## Использование событий

Чтобы добавить вкладку редактора, вам необходимо подключиться к модели событий, чтобы вкладка добавлялась при срабатывании события *init-edit-mode*. Следующий код должен быть добавлен в конструктор класса плагина Ctrl:
```javascript
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
```

Затем вам нужно создать функцию-обработчик, которая привязана к событию. В приведенном выше примере обработчик вызывается onInitEditMode. Вкладка добавляется путем вызова функции контроллера *добавить вкладку редактора*. Эта функция имеет три параметра: имя вкладки, путь к html-шаблону для новой вкладки редактора и номер вкладки. Определить путь может быть немного сложно, имя пути будет основано на идентификаторе, указанном в файле plugin.json - например **harvest-clock-panel**. Приведенный ниже код подключает угловой шаблон, называемый editor.html который находится в каталоге `src/partials`.

```javascript
onInitEditMode() {
  this.addEditorTab('Options', 'public/plugins/harvest-clock-panel/editor.html', 2);
}
```

## Редактор HTML и CSS

Для html-вкладок редактора лучше всего использовать css-стили Harvest, а не пользовательские стили. Это делается для того, чтобы сохранить внешний вид других вкладок в Harvest.

Большинство вкладок редактора должны использовать [класс css gf-form](https://github.com/harvest/harvest/blob/master/public/sass/components/_gf-form.scss ) из Harvest. В приведенном ниже примере есть одна строка с парой столбцов, и каждый столбец заключен в div, подобный этому:

```html
<div class="section gf-form-group">
 ```

Затем каждая пара, метка и поле упаковываются в div с классом gf-form.

```html
<div class="gf-form">
  <label class="gf-form-label width-8">Font Size</label>
  <input type="text" class="gf-form-input width-4" ng-model="ctrl.panel.fontSize" ng-change="ctrl.render()" ng-model-onblur>
</div>
```

Обратите внимание, что здесь есть некоторые угловые атрибуты. *ng-model* обновит данные панели. *ng-change* отобразит панель при изменении значения. Это изменение произойдет в событии onblur из-за атрибута *ng-model-onblur*. Это означает, что вы можете видеть эффект ваших изменений на панели во время редактирования.

{{< класс рисунка="float-right" src="/assets/img/blog/clock-panel-editor.png" подпись="Редактор панели" >}}

На вкладке редактор мы используем выпадающий список для 12/24-часовых часов, поле ввода для размера шрифта и средство выбора цвета для цвета фона.

Выпадающий список / выбор имеет свой собственный css-класс *gf-form-select-wrapper* и выглядит следующим образом:

```html
<div class="gf-form">
  <label class="gf-form-label width-9">12 or 24 hour</label>
  <div class="gf-form-select-wrapper max-width-9">
    <select class="input-small gf-form-input" ng-model="ctrl.panel.clockType" ng-options="t for t in ['12 hour', '24 hour', 'custom']" ng-change="ctrl.render()"></select>
  </div>
</div>
```

Средство выбора цвета (или средство выбора спектра) - это компонент, который уже существует в Harvest. Мы используем его таким образом для цвета фона:

```html
<spectrum-picker class="gf-form-input" ng-model="ctrl.panel.bgColor" ng-change="ctrl.render()" ></spectrum-picker>
```

## Вкладка Редактора Завершена

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

Следует иметь в виду, что значения по умолчанию панели используются при первом создании панели для установки начальных значений свойств панели. После того, как панель будет сохранена, вместо нее будет использоваться сохраненное значение. Поэтому будьте осторожны, если вы обновите настройки панели по умолчанию, они не будут автоматически обновлять свойство в существующей панели. Например, если вы сначала установите размер шрифта по умолчанию на 60 пикселей, а затем в версии 2 плагина измените его на 50 пикселей, существующие панели по-прежнему будут иметь размер 60 пикселей, и только новые панели получат новое значение 50 пикселей.