Closed isyoungxl closed 2 years ago
Most probably, the file-loader
handles CKEditor 5 icons. You need to exclude CKEditor 5 assets from this loader. But it's hard to say more as we don't see the full webpack config.
I think it may be the introduction of SVG or icon. I hope to see a more complete configuration
Most probably, the
file-loader
handles CKEditor 5 icons. You need to exclude CKEditor 5 assets from this loader. But it's hard to say more as we don't see the full webpack config.
Sorry to let you check in this way
Please see attachmentïŒ
The regular expression used for testing a path for the raw-loader
should be specified as patterns to exclude
for the file-loader
.
The regular expression used for testing a path for the
raw-loader
should be specified as patterns toexclude
for thefile-loader
.
Is it this way? `
{
test: /\.(svg)(\?.*)?$/,
exclude: [
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
],
use: [
{
loader: 'file-loader',
options: {
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
}
]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ['raw-loader']
}
`
Doing so does not seem to report an errorïŒBut the browser page cannot be refreshed, did I do something wrong?
Unless these codes are commented out, they cannot be refreshed.
Is it this way?
Almost, this /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
is not needed.
Is it this way?
Almost, this
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
is not needed.
I have tried it, and removing this sentence has the same effect.
This is my package.jsonïŒ
`
"@ckeditor/ckeditor5-build-classic": "^31.0.0",
"@ckeditor/ckeditor5-build-inline": "^31.0.0",
"@ckeditor/ckeditor5-dev-utils": "^26.1.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^26.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",
`
This situation occurs when I perform initialization.
`
initEditor() { MulitirootEditor.create( { header: document.querySelector('#header'), content: document.querySelector('#content'), footerleft: document.querySelector('#footer-left'), footerright: document.querySelector('#footer-right'), }, .....) }
`
Is there not just a simple way to include plugins... like:
... why does it have to be so hard... can't these plugins just be hosted on cdn?
@isyoungxl how did you ever fix this?
Hello, @isyoungxl! How did you fix it? I am trying to fix this in React but no luck
same+1
same problem here...I spend almost a week trying to solve this and my project is completly stoped. Please any help!
i have the same problem
i have the same problem
1ăclick href 2ăExpand collapse 3ăcopy code
i have the same problem
1ăclick href 2ăExpand collapse 3ăcopy code
I guess I can't use it. This doesn't work for me
i have the same problem
1ăclick href 2ăExpand collapse 3ăcopy code
I guess I can't use it. This doesn't work for me
ckeditor5-build-multiI uploaded an example
i have the same problem
1ăclick href 2ăExpand collapse 3ăcopy code
I guess I can't use it. This doesn't work for me
ckeditor5-build-multiI uploaded an example
Thanks, i reviewed it. I'm using Laravel with inertia/vuejs. Is there anything extra I need to do for this?
i have the same problem
1ăclick href 2ăExpand collapse 3ăcopy code
I guess I can't use it. This doesn't work for me
ckeditor5-build-multiI uploaded an example
Thanks, i reviewed it. I'm using Laravel with inertia/vuejs. Is there anything extra I need to do for this?
I don't continue to develop. If you need to use it, you can consider publishing build to NPM and then installing it Introduce the multi-root editor build
I have the same issue with vite. The debugger shows that it doesn't load the icons properly
@ilearnio do you use our Vite plugin?
Hello I have the same issue than @ilearnio
Im in a vitejs setup and Im using the Vite plugin:
plugins: [react(), ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })],
@Witoso Yes I was using the plugin
@ilearnio we would need some repo/code example. Right now I cannot reproduce it.
Hi! I have the same issue than @ilearnio đ€
Hi, I had the same problem with Vite and ckeditor, solution was move vite plugin vite-svg-loader after plugin ckeditor5 in vite. Here is my vite configuration.
import { createRequire } from 'node:module';
import { defineConfig } from 'vite';
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5";
const require = createRequire( import.meta.url );
export default defineConfig( {
plugins: [
vue(),
ckeditor5({ theme: require.resolve("@ckeditor/ckeditor5-theme-lark") }),
svgLoader(),
],
} );
Hi, I had the same problem with Vite and ckeditor, solution was move vite plugin vite-svg-loader after plugin ckeditor5 in vite. Here is my vite configuration.
import { createRequire } from 'node:module'; import { defineConfig } from 'vite'; import vue from "@vitejs/plugin-vue"; import svgLoader from "vite-svg-loader"; import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5"; const require = createRequire( import.meta.url ); export default defineConfig( { plugins: [ vue(), ckeditor5({ theme: require.resolve("@ckeditor/ckeditor5-theme-lark") }), svgLoader(), ], } );
Hi,I used your method and the editor loaded normally, but text cannot be entered in the editor.
Im in a new create react app.. The react ckeditor doesnt allow the 'editor-classic' editor. So i tried this in a useEffect but I see this error:
ClassicEditor.create(container, {
plugins: [
Essentials, Paragraph, Heading, BlockQuote
],
toolbar: ["heading", "blockQuote"]
})
The react ckeditor doesnt allow the 'editor-classic' editor.
Could you share your full setup?
The react ckeditor doesnt allow the 'editor-classic' editor.
Could you share your full setup?
// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
svgLoader()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
// App.vue
<template>
<div class="app-container">
<ckeditor :editor="InlineEditor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { InlineEditor } from '@ckeditor/ckeditor5-editor-inline'
import { Essentials } from '@ckeditor/ckeditor5-essentials'
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles'
import { Link } from '@ckeditor/ckeditor5-link'
import { Paragraph } from '@ckeditor/ckeditor5-paragraph'
const editorData = ref('<p>hello world</p>')
const editorConfig = ref({
plugins: [Essentials, Bold, Italic, Link, Paragraph],
toolbar: {
items: ['bold', 'italic', 'link', 'undo', 'redo']
}
})
</script>
<style lang="less" scoped></style>
I was able to fix by allowing the raw-loader for all svg
rules: [
{
test: /\.(svg)(\?.*)?$/,
// exclude: [
// /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
// ],
// use: [
// {
// loader: 'file-loader',
// }
// ]
// },
// {
// test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
},
đ Provide detailed reproduction steps (if any)
1.I use the Multi-root editor in vue2. Before that, the Inline editor can be used normally
The following error occurredïŒ
âïž Expected result
What is the expected result of the above steps? Can be used normally
â Actual result
Report an error What is the actual result of the above steps? Report an error
â Possible solution
If you have ideas, you can list them here. Otherwise, you can delete this section.
đ Other details
If you'd like to see this fixed sooner, add a đ reaction to this post.