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 своей веб-части - вам придется написать еще несколько проверок. Однако принцип тот же.)