[CKEditor 5]创建Multi-root editor时，不能正确初始化mathType插件
type:bug
## Description
当使用ckeditor5创建Multi-root editor时，mathType插件未能正确初始化，控制台报错toolbarview-item-unavailable {item: 'MathType'} toolbarview-item-unavailable {item: 'ChemType'}
## Environment
ckdeditor : 47.1.0
vue2: 2.7.16
mathtype-ckeditor5: 8.14.0
## Steps to reproduce
1、页面中创建带wiris公式的ck5多根编辑器
## Expected result
工具栏出现mathType公式，且插件能正常使用
## Actual result
工具栏上未出现mathType图标，且控制台报错
```
toolbarview-item-unavailable
{item: 'MathType'}
toolbarview-item-unavailable
{item: 'ChemType'}
```
## Other details
```
<style lang="scss" scoped>
.editor {
border: #ccced1 1px solid;
margin-top: 10px;
}
.boxes {
margin-top: 10px;
display: flex;
}
.box {
margin-top: 0px;
width: 50%;
}
/*
Make the editable "fill" the whole box.
The box will grow if the other box grows too.
This makes the whole box "clickable".
*/
.box .ck-editor__editable {
height: 100%;
}
.box-left {
margin-right: 10px;
}
/*
When toolbar receives this class, it becomes sticky.
If the toolbar would be scrolled outside of the visible area,
instead it is kept at the top edge of the window.
*/
#toolbar.sticky {
position: sticky;
top: 0px;
z-index: 10;
}
</style>
<template>
<div>
<div id="toolbar"></div>
<div contenteditable="true">
<div contenteditable="false">
<div class="editor">
<div id="header">
Header content is inserted here.
</div>
</div>
<div class="editor">
<div id="content">
Main content is inserted here.
</div>
</div>
<div class="boxes">
<div class="box box-left editor">
<div id="left-side">
Left-side box content is inserted here.
</div>
</div>
<div class="box box-right editor">
<div id="right-side">
Right-side box content is inserted here.
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';
import {
MultiRootEditor,
Essentials,
Bold,
Italic,
Heading,
Link,
Table,
MediaEmbed,
List,
Indent
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
export default {
data() {
return {
}
},
methods: {
initEditor() {
this.$nextTick(() => {
MultiRootEditor
.create(
// Define roots / editable areas:
{
header: document.querySelector('#header'),
content: document.querySelector('#content'),
leftSide: document.querySelector('#left-side'),
rightSide: document.querySelector('#right-side')
},
// Editor configration:
{
licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
plugins: [
Essentials,
Heading,
Bold,
Italic,
Link,
Table,
MediaEmbed,
List,
MathType,
Indent
],
toolbar: {
items: [
'undo', 'redo',
'|', 'heading',
'|', 'bold', 'italic',
'|', 'link', 'insertTable', 'mediaEmbed',
'|', 'bulletedList', 'numberedList', 'outdent', 'indent', 'MathType', 'ChemType'
]
}
}
)
.then(editor => {
window.editor = editor;
// Append toolbar to a proper container.
const toolbarContainer = document.querySelector('#toolbar');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
// Make toolbar sticky when the editor is focused.
editor.ui.focusTracker.on('change:isFocused', () => {
if (editor.ui.focusTracker.isFocused) {
toolbarContainer.classList.add('sticky');
} else {
toolbarContainer.classList.remove('sticky');
}
});
})
.catch(error => {
console.error('There was a problem initializing the editor.', error);
});
})
}
},
created() {
this.initEditor()
}
}
</script>
```
0 条评论