将CKEditor 5与nuxtjs一起使用

Question

我正试图在我的Nuxtjs项目中导入CKEditor 5的自定义版本，我已经尝试了各种可能的方法来正确导入它，但都不适用，这就是其中之一：

let ClassicEditor
let CKEditor
if (process.client) {
ClassicEditor = require('./../../static/js/ckeditor')
CKEditor = require('@ckeditor/ckeditor5-vue')
}else{
CKEditor = { component : {template:'<div></div>'}}
}

data() {
return {
editor: ClassicEditor,
}
}

components:{
ckeditor: CKEditor.component
},

<client-only><ckeditor :editor="editor" /></client-only> 

每次我改变不同错误的出现方式时，例如Window is not Defined，当我使用不同的方式时，会显示不同的错误，所以我想知道在通用模式下使用CKEditor和Nuxtjs最正确的方式是什么，考虑到我什么都没做，并从安装开始帮助我找到正确的方式

Answer 1

尝试这个

npm安装-保存@blowstack/ckeditor nuxt

Answer 2

您可以通过在客户端导入包来使用。

创建Editor.vue组件

<template>
<ckeditor
:editor="editor"
:config="editorConfig"
/>
</template>
<script>
let ClassicEditor
let CKEditor
if (process.client) {
ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
CKEditor = require('@ckeditor/ckeditor5-vue2')
} else {
CKEditor = { component: { template: '<div></div>' } }
}
export default {
components: {
ckeditor: CKEditor.component
},
data () {
return {
editor: ClassicEditor,
editorConfig: {}
}
}
</script>

用法：

<client-only placeholder="Loading Text Editor...">
<editor v-model="textInput"/>
</client-only>

Answer 3

窗口未定义

如果在nuxt.config.js中设置ssr: true，并将自定义VCKEditor.vue放入components文件夹中，Nuxt将按服务器端扫描components文件夹，但它不知道window关键字，即@ckeditor/ckeditor5-vue2中的JavaScript对象。

您可以查看有关组件文档的更多信息。

我不喜欢用process.client来检查ssr模式。

我有两个解决方案，只需选择一个

• 在nuxt.config.js中设置components: false
• 将您的自定义VCKEditor.vue移到外部的组件文件夹中

最后，将自定义VCKEditor.vue注册为插件，并在nuxt.config.js中设置插件ssr: false。

这是一个示例项目。

代码片段

• nuxt.config.js

const path = require('path')
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")
const CKEditorStyles = require("@ckeditor/ckeditor5-dev-utils").styles
export default {
// ignore other settings...
ssr: true,

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{
src: '~/plugins/ckeditor.js', ssr: false
},
],

// set false to disable scan the components folder
components: false,

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: [/ckeditor5-[^/\]+[/\]src[/\].+.js$/],
plugins: [
// If you set ssr: true that will cause the following error. This error does not affect the operation.
// ERROR  [CKEditorWebpackPlugin] Error: No translation has been found for the zh language.
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: "zh",
additionalLanguages: 'all',
addMainLanguageTranslationsToAllAssets: true,
})
],
// If you don't add postcss, the CKEditor css will not work.
postcss: CKEditorStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
},
minify: true
}),
extend(config, ctx) {
// If you do not exclude and use raw-loader to load svg, the following errors will be caused.
// Cannot read property 'getAttribute' of null
const svgRule = config.module.rules.find(item => {
return /svg/.test(item.test);
})
svgRule.exclude = [path.join(__dirname, 'node_modules', '@ckeditor')];
// add svg to load raw-loader
config.module.rules.push({
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/,
use: ["raw-loader"]
})
}
}
}

• 组件/编辑器/VCKEditor.vue

<template>
<ckeditor
v-model="editorData"
:editor="editor"
:config="editorConfig"
></ckeditor>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue2'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js'
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
// less Heading + Essentials plugin can't input the text
import Heading from '@ckeditor/ckeditor5-heading/src/heading'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage'
import Image from '@ckeditor/ckeditor5-image/src/image'
import ImageResizeEditing from '@ckeditor/ckeditor5-image/src/imageresize/imageresizeediting'
import ImageResizeHandles from '@ckeditor/ckeditor5-image/src/imageresize/imageresizehandles'
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'
export default {
name: 'VCKEditor',
components: { ckeditor: CKEditor.component },
props: {
value: {
type: String,
},
},
computed: {
editorData: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
},
},
},
data() {
return {
editor: ClassicEditor,
editorConfig: {
plugins: [
Bold,
Italic,
Underline,
Strikethrough,
Heading,
Essentials,
ImageUpload,
ImageInsert,
AutoImage,
Image,
ImageResizeEditing,
ImageResizeHandles,
Base64UploadAdapter,
],
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'|',
'insertImage',
],
},
language: 'zh',
},
}
},
}
</script>

• 插件/ceditor.js

import Vue from 'vue';
import VCKEditor from "../components/editor/VCKEditor.vue";
Vue.component('v-ckeditor', VCKEditor);

• pages/index.vue

<template>
<client-only>
<v-ckeditor v-model="text" />
</client-only>
</template>
<script>
export default {
data() {
return {
text: 'Hello World!!',
}
},
}
</script>

Answer 4

使用@blowstack/ckeditor nuxt包。这是上传程序的编辑器配置。使用@blowstack/ckeditor nuxt包。这是上传程序的编辑器配置。

editorConfig: {

simpleUpload: {
uploadUrl: `${process.env.apiUrl}/api/console/uploads/single_file`,
headers: {
authorization: `Bearer ${_.get(
this.$store,
"state.agency.global.token"
)}`,
},
},
removePlugins: ["Title"],
}

上传API的响应数据如下：

{
url: ".../image.png"
}

参考文献：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#passing-响应的附加数据

editorConfig: {

simpleUpload: {
uploadUrl: `${process.env.apiUrl}/api/console/uploads/single_file`,
headers: {
authorization: `Bearer ${_.get(
this.$store,
"state.agency.global.token"
)}`,
},
},
removePlugins: ["Title"],
}