在 Web 组件中使用 Wiris 编辑器 [英] Using the Wiris editor within a Web Component

问题描述

我创建了一个托管 Wiris 的 Web 组件.然而，当组件被渲染时，Wiris 编辑器的格式(非常)很糟糕:

I have created a Web Component which hosts Wiris. However when the component is rendered the Wiris editor is (very) badly formed:

您可以在此处实时查看问题.

You can see the issue live 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 组件.

Note that I've tried this in Chrome which does have full support for web components.

知道是什么问题吗?问题是否与这个问题中的样式问题有关?

Any idea what the problem is? Is the problem related to the styling issue found in this issue?

推荐答案

不要使用 Shadow DOM:随库导入的样式无法使用它.

Don't use a Shadow DOM: the styles imported with your library are not working with it.

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>

这篇关于在 Web 组件中使用 Wiris 编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！