[Bug Report]: Editor（富文本编辑器）使用 ToolbarContent 报错

[kx500]

Masa.Blazor version

1.7.4

Describe the bug

Editor（富文本编辑器）使用 ToolbarContent 报错，不使用ToolbarContent时正常，ToolbarContent是直接复制的官方的示例
提示 TypeError: moduleClass is not a constructor
跟踪发现是加载 'emoji-toolbar' 时报错的

报错的代码段 quill.js

value: function addModule(name) {
var moduleClass = this.quill.constructor.import('modules/' + name); 备注 name = emoji-toolbar
this.modules[name] = new moduleClass(this.quill, this.options.modules[name] || {});
return this.modules[name];
}

moduleClass 结果为空

Expected Behavior

No response

Steps To Reproduce

<script src="https://cdn.masastack.com/npm/quill/1.3.6/quill.js"></script> <script src="https://cdn.masastack.com/npm/quill/1.3.6/quilljs-markdown.js"></script> <script src="https://cdn.masastack.com/npm/quill/1.3.6/quill-emoji.js"></script>

Reproduction code

No response

.NET version

8.0

What browsers are you seeing the problem on?

Microsoft Edge

Additional context

No response

[capdiem]

@kx500 摘自文档toolbar的示例，并没有报错。

<MEditor>
    <ToolbarContent>
        <select class="ql-header">
            <option selected=""></option>
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
        </select>
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
            <select class="ql-color"></select>
            <select class="ql-background"></select>
        </span>
        <span class="ql-formats">
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
        </span>
        <span class="ql-formats">
            <button class="ql-link"></button>
        </span>
        <span class="ql-formats">
            <button class="ql-image"></button>
        </span>
    </ToolbarContent>
</MEditor>

[kx500]

编辑器初始化时JS文件还没有加载完毕导致的问题

[kx500]

你刷新一下页面就会报错

[capdiem]

@kx500 仍然没有复现。我测试使用的代码没有复杂的逻辑，没有嵌套，仅在 Blazor Server 上测试。如果你是Blazor Web App，还需要开启交互。

[kx500]

Blazor Web App InteractiveAuto模式下测试的

<script src="https://cdn.masastack.com/npm/quill/1.3.6/quill.js"></script>
<script src="https://cdn.masastack.com/npm/quill/1.3.6/quilljs-markdown.js"></script>
<script src="https://cdn.masastack.com/npm/quill/1.3.6/quill-emoji.js"></script>

外部js文件时通过HeadContent添加进去的，因为这个编辑器我只需要在后台使用，所以选择性的添加的

[capdiem]

@kx500 那是有可能的，组件肯定不会等待script下载完再去渲染。在组件实现层面上也不好去内置一个轮询去初始化组件。我建议你设一个bool类型标记，等待多少秒后给标记赋值为true后再去渲染组件。或者你用MErrorHandler包裹组件，报错时显示一个按钮去重新初始化组件。

[github-actions]

This issue is stale because it has been open for 4 days with no activity.

[github-actions]

This issue is closed because it has been open for 3 days with stale.