Question

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

这是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，就可以将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为它分配了一些真相，它将无法完全正常工作-您将不得不进行进一步的检查。不过原理是相同的。）

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

1 个答案: