当使用 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”未定义。有人可以建议一些吗?
使用方法如下:
import {addListToDropdown, createDropdown, ...all other imports} from 'ckeditor5';