时间戳

首页 > 解决方案 > SharepointFramework - 如何在 PropertyFieldCodeEditor 中将实际 Web 部件代码设置为初始值

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

问题描述

您好，我正在使用这个名为 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) {}

标签： spfxsharepointframework

解决方案

对于initialValue，您应该可以使用this.domElement.innerHTMLor 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.

不幸的是， inonPropertyPaneFieldChanged指向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- 您必须编写一些进一步的检查。但原理是相同的。）

推荐阅读