SharepointFramework

Question

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

这是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 部件 class。您可能会也可能不会在这里做 - 我没有深入研究它。

我认为最简单的解决方案是，在 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 部件代码设置为初始值

SharepointFramework - how to set the actual webpart code as initial value in PropertyFieldCodeEditor

spfx