如何解决如何使用nuxt在vue中的ckeditor5中添加自定义工具栏按钮
我尝试将按钮作为插件添加到 ckeditor 工具栏 使用这个 guide 并创建了一个简单的插件。 但我的代码有错误 这是我尝试将按钮添加到 ckeditor 工具栏的代码 并返回错误
[Vue warn]: Failed to resolve async component: function HelperCkeditorNuxt() {
return Promise.all(/*! import() | components/helper-ckeditor-nuxt */[__webpack_require__.e("vendors/components/helper-ckeditor-nuxt/components/helper-my-custom-plugin"),__webpack_require__.e("vendors/components/helper-ckeditor-nuxt"),__webpack_require__.e("components/helper-ckeditor-nuxt")]).then(__webpack_require__.bind(null,/*! ../../components/helper/CkeditorNuxt.vue */ "./components/helper/CkeditorNuxt.vue")).then(function (c) {
return Object(_utils__WEBPACK_IMPORTED_MODULE_4__["wrapFunctional"])(c.default || c);
});
}
Reason: CKEditorError: ckeditor-duplicated-modules
<template>
<ckeditor
:editor="editor"
:value="value"
:config="config"
:tag-name="tagName"
:disabled="disabled"
@input="(event) => $emit('input',event)"
/>
</template>
<script>
let ClassicEditor
let CKEditor
let EssentialsPlugin
let Boldplugin
let LinkPlugin
let MyCustomPlugin
if (process.client) {
ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
CKEditor = require('@ckeditor/ckeditor5-vue2')
EssentialsPlugin = require('@ckeditor/ckeditor5-essentials/src/essentials')
Boldplugin = require('@ckeditor/ckeditor5-basic-styles/src/bold')
LinkPlugin = require('@ckeditor/ckeditor5-link/src/link')
MyCustomPlugin = require('../helper/MyCustomPlugin')
} else {
CKEditor = { component: { template: '<div></div>' } }
}
export default {
components: {
ckeditor: CKEditor.component,},props: {
value: {
type: String,required: false,default: '',tagName: {
type: String,default: 'div',disabled: {
type: Boolean,uploadUrl: {
type: String,// config: {
// type: Object,// required: false,// default: function () {},// },data() {
return {
editor: ClassicEditor,config: {
plugins: [EssentialsPlugin,Boldplugin,LinkPlugin],extraPlugins: [MyCustomPlugin],toolbar: {
items: ['bold','link','myCustomPlugin'],}
},}
</script>
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
class MyCustomPlugin extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'myCustomPlugin',locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert image',icon: imageIcon,tooltip: true
} );
view.on( 'execute',() => {
console.log('dispatch some event');
} );
return view;
} );
}
}
export default MyCustomPlugin;
我为 ckeditor 安装了这个包 package.json 看起来像这样:
"@ckeditor/ckeditor5-build-classic": "^29.0.0","@ckeditor/ckeditor5-vue2": "^1.0.5",
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。