在 Web 组件中使用 Wiris 编辑器

Question

我创建了一个托管 Wiris 的 Web 组件。但是，当呈现组件时，Wiris 编辑器的格式（非常）错误：

您可以实时查看问题here。

代码如下：

class WirisComponent extends HTMLElement {
 constructor() {
  // Always call super first in constructor
  super();

  // Create a shadow root
  var shadow = this.attachShadow( { mode: 'open' } );

  // Create a div to host the Wiris editor
  var div = document.createElement('div');
  div.id = 'editorContainer';

  var wirisDefaultConfig = {
    'language': 'en'
  };

  var editor = com.wiris.jsEditor.JsEditor.newInstance(wirisDefaultConfig);

  // Insert the Wiris instance into the div
  editor.insertInto(div);      

  // Append it to the shadow route
  shadow.appendChild(div);
 }
}

// Define the new element
customElements.define('wiris-component', WirisComponent);

HTML 标记是：

<wiris-component></wiris-component>

请注意，我已经在 Chrome 中尝试过这个，它完全支持 Web 组件。

知道问题是什么吗？问题是否与this issue 中的样式问题有关？

Answer 1

不要使用 Shadow DOM：与您的库一起导入的样式不适用于它。

class WirisComponent extends HTMLElement {
  connectedCallback() {
    var wirisDefaultConfig = {
      'language': 'en'
    };

    var editor = com.wiris.jsEditor.JsEditor.newInstance(wirisDefaultConfig);
    editor.insertInto(this);
  }
}

// Define the new element
customElements.define('wiris-component', WirisComponent);

<script src="https://www.wiris.net/demo/editor/editor"></script>
<wiris-component></wiris-component>