SharepointFramework -如何在PropertyFieldCodeEditor中将实际的webpart代码设置为初始值

Question

你好，我正在使用名为PropertyFieldCodeEditor的自定义属性窗格控件。我想要的是将实际的webpart代码显示为代码编辑器的初始值，然后单击“保存”，更改将反映在will部件上。

这是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转换为string的方法。

还有，我应该把什么放在里面

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，就可以完成将web部件代码复制到PropertyFieldCodeEditor中。现在，您需要将PropertyFieldCodeEditor内容(存储在属性htmlCode中)重新分配回this.domElement.innerHTML。

不幸的是，在onPropertyPaneFieldChanged中，this指向PropertyFieldCodeEditor，而不再指向web部件类。你在这里可能做不到，也可能做不到--我没有仔细研究过。

我认为，在render中，最简单的解决方案是像这样分配this.domElement.innerHTML：

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

这样，web部件最初将呈现在||之后的任何内容。但是，一旦您将更改保存到PropertyFieldCodeEditor，它就会开始呈现htmlCode。这只会起作用，因为最初htmlCode是undefined。(请注意，如果您通过web部件的preconfiguredEntries为它指定了一些真实的东西，它将不会完全像这样工作-您将不得不编写一些进一步的检查。但原则是一样的。)