SharepointFramework - как установить фактический код веб-части в качестве начального значения в PropertyFieldCodeEditor

Question

Здравствуйте, я использую этот пользовательский элемент управления панели свойств под названием PropertyFieldCodeEditor. я хочу отобразить фактический код веб-части в качестве начального значения редактора кода, а затем после нажатия кнопки Сохранить изменения будут отражены на веб-части.

это код PropertyFieldCodeEditor

PropertyFieldCodeEditor('htmlCode', {
    label: 'Edit Code',
    panelTitle: 'Edit Code',
    initialValue: "",
    onPropertyChange: this.onPropertyPaneFieldChanged,
    properties: this.properties,
    disabled: false,
    key: 'codeEditorFieldId',
    language: PropertyFieldCodeEditorLanguages.HTML
  })

я пытался поставить this.domElement по начальному значению, но он принимает только строку, также я могу найти способ конвертировать this.domelement нанизывать..

и что я должен положить внутрь

protected onPropertyPaneFieldChanged(path: string, newValue: string) {}

Answer 1

За initialValue, вы должны быть в состоянии использовать this.domElement.innerHTML или же this.domElement.outerHTML, Обе строки представляют собой содержимое domElement (нота, domElement на самом деле просто HTMLElement).

• outerHTML будет включать в себя все, в том числе один дополнительный div слой снаружи:

<div style="width: 100%;">
  <div class="helloWorld_d3285de8">
    ...
  </div>
</div>

• innerHTML только внутреннее содержимое этого div:

<div class="helloWorld_d3285de8">
  ...
</div>

Вы, вероятно, захотите innerHTML так как это то, что изначально используется в render метод.

Как только вы установите initialValue, вы бы завершили копирование кода веб-части в PropertyFieldCodeEditor, Теперь вам нужно будет получить PropertyFieldCodeEditor содержимое (которое хранится в вашей собственности htmlCode) назначен обратно в this.domElement.innerHTML,

К сожалению, в onPropertyPaneFieldChanged, this указывает на PropertyFieldCodeEditor больше не для класса веб-частей. Вы можете или не сможете сделать это здесь - я не слишком углубился в это.

Самое простое решение, которое я понял, было в render, назначить this.domElement.innerHTML вот так:

public render(): void {
  this.domElement.innerHTML = this.properties.htmlCode || `
    <div class="${styles.helloWorld}">
      ...
    </div>`;
}

Таким образом, веб-часть будет изначально отображать то, что следует после ||, Но как только вы сохраните изменения в PropertyFieldCodeEditor, он начнет рендеринг htmlCode вместо. Это работает только потому, что изначально htmlCode является undefined, (Обратите внимание, что это не будет работать именно так, если вы назначите что-то правдивое через веб-часть preconfiguredEntries - вам придется написать еще несколько проверок. Принцип тот же, хотя.)