Cannot read properties of null (reading 'getAttribute')

[myNameCao]

Hi - I'm looking to build my editor form source 。

When no plugin is added, it runs normally. When adding a plugin, it starts to report errors

These plugins have MathType 、LineHeight 、math

I checked the issues in the repository and I did not successfully handle the error of my project

Here's the error

environment

node v16.14.0 npm v8.3.1

Here's my vue file

<template>
  <div class="edite">
    <ckeditor
      v-model="valuedata"
      :config="editorConfig"
      class="ckeditor"
      :editor="editor"
      @focus="onEditorFocus"
      @blur="onEditorBlur"
      @ready="onReady"
    />
  </div>
</template>
<script>
  import Mathematics from 'ckeditor5-math/src/math'

  import CKEditor from '@ckeditor/ckeditor5-vue2'
  // import MathType from '@wiris/mathtype-ckeditor5'
  // import LineHeight from 'ckeditor5-line-height'

  import DecoupledDocumentEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor.js'
  // import DecoupledDocumentEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js'
  import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js'
  import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js'
  import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js'
  import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js'
  import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js'
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js'
  import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js'
  import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js'
  import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js'
  import Image from '@ckeditor/ckeditor5-image/src/image.js'
  import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js'
  import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js'
  import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js'
  import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js'
  import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js'
  import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js'
  import Link from '@ckeditor/ckeditor5-link/src/link.js'

  import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'
  import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js'
  import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters.js'
  import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical.js'
  import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js'
  import Table from '@ckeditor/ckeditor5-table/src/table.js'
  import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'
  import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'
  import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js'
  import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js'
  import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js'

  export default {
    name: 'Ckeditor5',
    directives: {},
    components: {
      ckeditor: CKEditor.component
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 10
      }
    },

    data() {
      return {
        editor: DecoupledDocumentEditor,
        valuedata: this.value,
        editorConfig: {
          fontFamily: {
            options: [
              '宋体',
              '楷体GB2312',
              '新宋体',
              '黑体',
              '隶书',
              '幼圆',
              '微软雅黑',
              'Aria'
            ]
          },
          fontSize: {
            options: ['5mm', '6mm', '7mm', '8mm', '9mm', '10mm', '11mm', '12mm']
          },
          image: {
            toolbar: [
              'imageTextAlternative',
              'imageStyle:inline',
              'imageStyle:block',
              'imageStyle:side'
            ]
          },
          table: {
            contentToolbar: [
              'tableColumn',
              'tableRow',
              'mergeTableCells',
              'tableCellProperties',
              'tableProperties'
            ]
          },
          math: {
            engine: 'mathjax', // or katex or function. E.g. (equation, element, display) => { ... }
            lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
            outputType: 'script', // or span
            forceOutputType: false, // forces output to use outputType
            enablePreview: true, // Enable preview view
            previewClassName: [], // Class names to add to previews
            popupClassName: [] // Class names to add to math popup balloon
          },
          alignment: {
            options: ['left', 'right']
          },
          lineHeight: {
            // specify your otions in the lineHeight config object. Default values are [ 0, 0.5, 1, 1.5, 2 ]
            options: [0.5, 1, 1.5, 2, 2.5]
          },
          plugins: [
            Mathematics,
            // MathType,
            // LineHeight,
            Alignment,
            Autoformat,
            BlockQuote,
            Bold,
            CKFinder,
            CKFinderUploadAdapter,
            Essentials,
            FontColor,
            FontFamily,
            FontSize,
            Image,
            ImageCaption,
            ImageResize,
            ImageStyle,
            ImageToolbar,
            ImageUpload,
            Italic,
            Link,
            Paragraph,
            PasteFromOffice,
            SpecialCharacters,
            SpecialCharactersMathematical,
            Strikethrough,
            Table,
            TableCellProperties,
            TableProperties,
            TableToolbar,
            TextTransformation,
            Underline
          ],
          toolbar: [
            'fontSize',
            'fontFamily',
            'fontColor',
            'alignment',
            '|',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'lineHeight',
            '|',
            'imageUpload',
            'insertTable',
            '|',
            'specialCharacters',
            'ChemType',
            'MathType',
            'math'
          ],

          ckfinder: {
            // Upload the images to the server using the CKFinder QuickUpload command.
            uploadUrl:
              'https:'
          }
        }
      }
    },
    watch: {
      // 监听prop的变化，更新ckeditor中的值
      valuedata: {
        handler(newValue) {
          if (newValue !== this.value) {
            this.$emit('input', newValue)
          }
        }
      }
    },

    // 销毁组件前，销毁编辑器
    methods: {
      onReady(editor) {
        // Insert the toolbar before the editable area.
        editor.ui
          .getEditableElement()
          .parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
          )
        // fix 直接css   对其方式的弹框 有问题
        editor.ui.view.toolbar.element.style.display = 'none'
      },
      onEditorBlur(e, editor) {
        editor.ui.view.toolbar.element.style.display = 'none'
      },
      onEditorFocus(e, editor) {
        editor.ui.view.toolbar.element.style.display = 'block'
      }
    }
  }
</script>
<style lang="less" scoped>
  .edite {
    width: 100%;
    height: 100%;
    position: relative;
    .ckeditor {
      position: absolute;
      top: 0;
      line-height: 10mm;
      width: 100%;
      height: 100%;
    }
  }
  /deep/ .ck-toolbar {
    position: absolute;
    top: -41px;
    z-index: 99999;
  }

  /deep/ .ckeditor p {
    margin: 0 !important;
    /* Fix for missing scrollbars with RTL texts. (#10488) */
    overflow: hidden;
    font-family: 'Times New Roman';
    white-space: nowrap;
  }
</style>

and my vue.config.js

// const vueEnv = process.env.VUE_APP_STRUCTURE
// const Timestamp = new Date().getTime()
const path = require('path')
// const env = process.env.VUE_APP_ENV
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')

const { styles } = require('@ckeditor/ckeditor5-dev-utils')

const { name } = require('./package')
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    disableHostCheck: true
  },
  transpileDependencies: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],
  productionSourceMap: false, // vueEnv === 'Beta' || process.env.NODE_ENV !== 'production',
  publicPath: '/',

  configureWebpack: {
    plugins: [
      // CKEditor needs its own plugin to be built using webpack.
      new CKEditorWebpackPlugin({
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: 'en',

        // Append translations to the file matching the `app` name.
        translationsOutputFile: /app/
      })
    ],
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`
    }
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // Then you can either:
    //
    // * clear all loaders for existing 'svg' rule:
    //
    // svgRule.uses.clear()
    //
    // * or exclude ckeditor directory from node_modules:
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'))

    // Add an entry for *.svg files belonging to CKEditor. You can either:
    //
    // * modify the existing 'svg' rule:
    //
    // svgRule.use('raw-loader').loader('raw-loader')
    //
    // * or add a new one:
    config.module
      .rule('cke-svg')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      // .test(/theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader')

    // (2.) Transpile the .css files imported by the editor using PostCSS.
    // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
    config.module
      .rule('cke-css')
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap(() => {
        return {
          postcssOptions: styles.getPostCssConfig({
            themeImporter: {
              themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
            },
            minify: true
          })
        }
      })
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('@view', path.resolve(__dirname, 'src/views'))
      .set('@lib', path.resolve(__dirname, 'src/lib'))
      .set('@conf', path.resolve(__dirname, 'src/utils/@conf'))
      .set('@static', path.resolve(__dirname, 'src/assets'))
      .set('@utils', path.resolve(__dirname, 'src/utils'))
      .set('@comp', path.resolve(__dirname, 'src/components'))
  },
  css: {
    extract: false,
    sourceMap: false,
    loaderOptions: {
      // 向 CSS 相关的 loader 传递选项
      less: {
        javascriptEnabled: true
      }
    }
  }
}

package.json

 "dependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "^32.0.0",
    "@ckeditor/ckeditor5-alignment": "^32.0.0",
    "@ckeditor/ckeditor5-autoformat": "^32.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^32.0.0",
    "@ckeditor/ckeditor5-block-quote": "^32.0.0",
    "@ckeditor/ckeditor5-ckfinder": "^32.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^28.0.2",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^28.0.2",
    "@ckeditor/ckeditor5-editor-decoupled": "^32.0.0",
    "@ckeditor/ckeditor5-essentials": "^32.0.0",
    "@ckeditor/ckeditor5-font": "^32.0.0",
    "@ckeditor/ckeditor5-link": "^32.0.0",
    "@ckeditor/ckeditor5-paragraph": "^32.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^32.0.0",
    "@ckeditor/ckeditor5-special-characters": "^32.0.0",
    "@ckeditor/ckeditor5-table": "^32.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^32.0.0",
    "@ckeditor/ckeditor5-vue2": "^1.0.5",
    "@wiris/mathtype-ckeditor5": "^7.27.2",
    "ant-design-vue": "^1.7.2",
    "axios": "^0.21.0",
    "ckeditor5-line-height": "^0.3.1",
    "ckeditor5-math": "^32.0.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.0.0",
    "eslint-plugin-vue": "^8.4.1",
    "js-cookie": "^2.2.1",
    "postcss-loader": "4",
    "raw-loader": "4",
    "store": "^2.0.12",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vue-ueditor-wrap": "^2.4.4",
    "vuex": "^3.4.0",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-image": "^32.0.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "conventional-changelog-cli": "^2.1.1",
    "eslint": "^6.7.2",
    "husky": "^4.3.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "lint-staged": "^10.4.2",
    "vue-template-compiler": "^2.6.11"
  },

What have I done wrong!!!

Thanks

[FilipTokarski]

Hi, it looks like svg files are not loaded properly. Please check this comment, it should fix the issue.

[pomek]

Closing due to lack of activity.