wangeditor-team / wangEditor-plugin-upload-attachment

wangEditor upload-attachments plugin
https://www.wangeditor.com/
MIT License
35 stars 14 forks source link

CDN 引入报错 #4

Closed wangfupeng1988 closed 2 years ago

wangfupeng1988 commented 2 years ago

如题。

使用 CDN 上传附件会报错,如下图:

image

错误提示中的 createUploader 是从 @wangeditor/core 引入的 https://github.com/wangeditor-team/wangEditor-plugin-upload-attachment/blob/main/src/module/menu/helper.ts#L8 。但在 HTML 中引入 @wangeditor/core 的 CDN js ,浏览器也会报错。

源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        #container {
            margin: 0 10px;
            border: 1px solid #ccc;
        }
        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }
        #editor-container {
            height: 500px;
        }
    </style>
</head>
<body>
    <p>wangEditor demo</p>
    <div id="container">
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/core@latest/dist/index.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/plugin-upload-attachment@latest/dist/index.min.js"></script>
    <script>
        function create() {
            const E = window.wangEditor
            if (E == null) return

            // E.i18nChangeLanguage('en')

            E.Boot.registerModule(window.WangEditorPluginUploadAttachment.default)

            const editor = E.createEditor({
                selector: '#editor-container',
                config: {
                    placeholder: 'Type here...',
                    hoverbarKeys: {
                        attachment: {
                            menuKeys: ['downloadAttachment'],
                        },
                    },
                    MENU_CONF: {
                        uploadAttachment: {
                            server: 'http://106.12.198.214:3000/api/upload-video',
                            fieldName: 'custom-fileName',
                            onInsertedAttachment(elem) {
                                console.log('inserted attachment ---- ', elem)
                            },
                        }
                    }
                }
            })
            const toolbar = E.createToolbar({
                editor,
                selector: '#toolbar-container',
                config: {
                    insertKeys: {
                        index: 0,
                        keys: ['uploadAttachment'],
                    },
                }
            })
        }
        create()
    </script>
</body>
</html>
wangfupeng1988 commented 2 years ago

CDN 的问题我临时改了一下,把 core 的一些 API 通过 editor 导出了。先这样用。