vuejs ckeditor TypeError: Cannot read properties of null (reading 'getAttribute')
vuejs ckeditor TypeError: Cannot read properties of null (reading 'getAttribute')
我用的是vuejs和ckeditor
当我使用 ckeditor 进入页面时出现错误。编辑器根本不显示在页面上。
你能帮帮我吗？
TypeError: Cannot read properties of null (reading 'getAttribute')
at IconView._updateXMLContent (app.js:89727:24)
at IconView.render (app.js:89703:8)
at IconView. (app.js:107630:32)
at IconView.fire (app.js:105106:30)
at IconView. [as render] (app.js:107634:16)
at ViewCollection._renderViewIntoCollectionParent (app.js:98321:9)
at ViewCollection. (app.js:98182:9)
at ViewCollection.fire (app.js:105106:30)
at ViewCollection.addMany (app.js:101049:9)
at ViewCollection.add (app.js:101014:15)
这是我的依赖项
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^27.1.0",
"@ckeditor/ckeditor5-autoformat": "^27.1.0",
"@ckeditor/ckeditor5-basic-styles": "^27.1.0",
"@ckeditor/ckeditor5-block-quote": "^27.1.0",
"@ckeditor/ckeditor5-dev-utils": "^24.4.2",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
"@ckeditor/ckeditor5-editor-classic": "^27.1.0",
"@ckeditor/ckeditor5-essentials": "^27.1.0",
"@ckeditor/ckeditor5-font": "^27.1.0",
"@ckeditor/ckeditor5-heading": "^27.1.0",
"@ckeditor/ckeditor5-highlight": "^27.1.0",
"@ckeditor/ckeditor5-image": "^27.1.0",
"@ckeditor/ckeditor5-indent": "^27.1.0",
"@ckeditor/ckeditor5-link": "^27.1.0",
"@ckeditor/ckeditor5-list": "^27.1.0",
"@ckeditor/ckeditor5-page-break": "^27.1.0",
"@ckeditor/ckeditor5-paragraph": "^27.1.0",
"@ckeditor/ckeditor5-paste-from-office": "^27.1.0",
"@ckeditor/ckeditor5-remove-format": "^27.1.0",
"@ckeditor/ckeditor5-table": "^27.1.0",
"@ckeditor/ckeditor5-theme-lark": "^27.1.0",
"@ckeditor/ckeditor5-typing": "^27.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",
"css-loader": "^5.2.4",
"es6-promise": "^4.2.8",
"npm": "^6.14.13",
"postcss-loader": "^3.0.0",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"vue": "^2.6.12",
"webpack-cli": "^4.6.0",
...
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.7.2",
"postcss": "^8.2.10",
"resolve-url-loader": "^3.1.2",
"sass": "^1.34.0",
"sass-loader": "^8.0.2",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.11",
"webpack": "^5.26.2",
...
},
这是我的 webpack 文件
const mix = require('laravel-mix');
const path = require('path');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const CKERegex = {
svg: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
css: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
};
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix
.webpackConfig({
resolve: {
alias: {
'@components': path.resolve(__dirname, 'resources/js/components/'),
'@pages': path.resolve(__dirname, 'resources/js/pages/'),
'@router': path.resolve(__dirname, 'resources/js/router/'),
'@store': path.resolve(__dirname, 'resources/js/store/')
}
},
plugins: [
new CKEditorWebpackPlugin({
language: 'fr',
additionalLanguages: 'all'
}),
],
module: {
rules: [
{
test: CKERegex.svg,
use: ['raw-loader'],
},
{
test: CKERegex.css,
use: [
{
loader: 'postcss-loader',
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
},
minify: true,
}),
},
],
}
],
}
});
mix
.js('resources/js/app.js', 'public/js')
.vue();
我遇到了同样的错误并设法找到了解决方案。你也可能解决问题，我来分享一下。
在您的 webpack 文件中（我假设它是 webpack.mix.js 在您的 laravel 项目根目录中），设置 targetSVG /(.(png|jpe?g|gif|webp|avif)$|^ ((?!font).).svg$)/ 而不是 /(.(png|jpe?g|gif|webp)$|^((?!font).) .svg$)/.
- const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
+ const targetSVG = /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/;
我通过在 for (let rule of rules) 循环中添加 console.log(rule.test.toString()) 通过调试找到了这个解决方案。
几年前，我将 Laravel7 与 Vue2 一起使用，并且可以将 CKEditor5 与旧版本设置（没有“avif”）一起使用。但是现在我将 Laravel8 与 Vue2 一起使用，并且 TypeError: Cannot read properties of null (reading 'getAttribute') 发生在旧版本设置中。
希望您能使用CKEditor5！
我用的是vuejs和ckeditor
当我使用 ckeditor 进入页面时出现错误。编辑器根本不显示在页面上。
你能帮帮我吗？
TypeError: Cannot read properties of null (reading 'getAttribute') at IconView._updateXMLContent (app.js:89727:24) at IconView.render (app.js:89703:8) at IconView. (app.js:107630:32) at IconView.fire (app.js:105106:30) at IconView. [as render] (app.js:107634:16) at ViewCollection._renderViewIntoCollectionParent (app.js:98321:9) at ViewCollection. (app.js:98182:9) at ViewCollection.fire (app.js:105106:30) at ViewCollection.addMany (app.js:101049:9) at ViewCollection.add (app.js:101014:15)
这是我的依赖项
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^27.1.0",
"@ckeditor/ckeditor5-autoformat": "^27.1.0",
"@ckeditor/ckeditor5-basic-styles": "^27.1.0",
"@ckeditor/ckeditor5-block-quote": "^27.1.0",
"@ckeditor/ckeditor5-dev-utils": "^24.4.2",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
"@ckeditor/ckeditor5-editor-classic": "^27.1.0",
"@ckeditor/ckeditor5-essentials": "^27.1.0",
"@ckeditor/ckeditor5-font": "^27.1.0",
"@ckeditor/ckeditor5-heading": "^27.1.0",
"@ckeditor/ckeditor5-highlight": "^27.1.0",
"@ckeditor/ckeditor5-image": "^27.1.0",
"@ckeditor/ckeditor5-indent": "^27.1.0",
"@ckeditor/ckeditor5-link": "^27.1.0",
"@ckeditor/ckeditor5-list": "^27.1.0",
"@ckeditor/ckeditor5-page-break": "^27.1.0",
"@ckeditor/ckeditor5-paragraph": "^27.1.0",
"@ckeditor/ckeditor5-paste-from-office": "^27.1.0",
"@ckeditor/ckeditor5-remove-format": "^27.1.0",
"@ckeditor/ckeditor5-table": "^27.1.0",
"@ckeditor/ckeditor5-theme-lark": "^27.1.0",
"@ckeditor/ckeditor5-typing": "^27.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",
"css-loader": "^5.2.4",
"es6-promise": "^4.2.8",
"npm": "^6.14.13",
"postcss-loader": "^3.0.0",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"vue": "^2.6.12",
"webpack-cli": "^4.6.0",
...
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.7.2",
"postcss": "^8.2.10",
"resolve-url-loader": "^3.1.2",
"sass": "^1.34.0",
"sass-loader": "^8.0.2",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.11",
"webpack": "^5.26.2",
...
},
这是我的 webpack 文件
const mix = require('laravel-mix');
const path = require('path');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const CKERegex = {
svg: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
css: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/,
};
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix
.webpackConfig({
resolve: {
alias: {
'@components': path.resolve(__dirname, 'resources/js/components/'),
'@pages': path.resolve(__dirname, 'resources/js/pages/'),
'@router': path.resolve(__dirname, 'resources/js/router/'),
'@store': path.resolve(__dirname, 'resources/js/store/')
}
},
plugins: [
new CKEditorWebpackPlugin({
language: 'fr',
additionalLanguages: 'all'
}),
],
module: {
rules: [
{
test: CKERegex.svg,
use: ['raw-loader'],
},
{
test: CKERegex.css,
use: [
{
loader: 'postcss-loader',
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
},
minify: true,
}),
},
],
}
],
}
});
mix
.js('resources/js/app.js', 'public/js')
.vue();
我遇到了同样的错误并设法找到了解决方案。你也可能解决问题，我来分享一下。
在您的 webpack 文件中（我假设它是 webpack.mix.js 在您的 laravel 项目根目录中），设置 targetSVG /(.(png|jpe?g|gif|webp|avif)$|^ ((?!font).).svg$)/ 而不是 /(.(png|jpe?g|gif|webp)$|^((?!font).) .svg$)/.
- const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
+ const targetSVG = /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/;
我通过在 for (let rule of rules) 循环中添加 console.log(rule.test.toString()) 通过调试找到了这个解决方案。
几年前，我将 Laravel7 与 Vue2 一起使用，并且可以将 CKEditor5 与旧版本设置（没有“avif”）一起使用。但是现在我将 Laravel8 与 Vue2 一起使用，并且 TypeError: Cannot read properties of null (reading 'getAttribute') 发生在旧版本设置中。
希望您能使用CKEditor5！