使用 CDN 的 ckeditor5 时如何访问 ckeditor5 功能 DropdownButtonView、createDropdown、addListToDropdown、DropdownView、ButtonView 等?

问题描述 投票:0回答:1

当使用 ckeditor5 作为节点模块时,可以导入功能,例如:

import {addListToDropdown, createDropdown} from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

但是当我们使用来自 CDN 的 ckeditor5 时如何访问这些功能。以下是来自一个地方的示例代码建议,但不起作用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKEditor 5 Customization</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
</head>
<body>
    <div id="editor">
        <p>This is the editor content.</p>
    </div>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor5/35.0.1/ckeditor.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor5/35.0.1/ckeditor5-basic-styles/ckeditor.js"></script>
    <!-- Add other necessary plugins CDN links here -->

    <script>
        ClassicEditor
            .create(document.querySelector('#editor'), {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        '|',
                        'link',
                        'bulletedList',
                        'numberedList',
                        'blockQuote',
                        'insertTable',
                        '|',
                        'undo',
                        'redo'
                    ]
                },
                language: 'en'
            })
            .then(editor => {
                console.log('Editor was initialized', editor);

                // Access necessary modules from the editor instance
                const dropdownButtonView = editor.ui.componentFactory.create('DropdownButtonView');
                const createDropdown = editor.ui.componentFactory.create('createDropdown');
                const addListToDropdown = editor.ui.componentFactory.create('addListToDropdown');

                console.log(dropdownButtonView, createDropdown, addListToDropdown);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>

还看到一个建议,例如:

const view = new editor.ui.button.ButtonView(locale);
const dropDownView= new editor.ui.dropdown.DropdownView(locale);

这似乎也不起作用并抛出错误“editor.ui.dropdown”未定义。有人可以建议一些吗?

javascript ckeditor5 grapejs
1个回答
0
投票

使用方法如下:

import {addListToDropdown, createDropdown, ...all other imports} from 'ckeditor5';
© www.soinside.com 2019 - 2024. All rights reserved.