ckEditor错误:编辑器-isreadonly-ckEditor

Question

我在nuxt项目中使用ckeditor5气球块模式。我使用了在线构建器并下载了构建文件，将构建文件添加到我的项目中，并将它们导入到我的编辑器组件中并使用它！唯一的问题是，当页面加载时，我会得到一个错误：editor-isreadonly-has-no-setter.我尝试将v-模型绑定到编辑器，但是值不会被更新！注意:我使用了ckeditor5的经典模式，与我使用Balloon的方式相同，没有发生什么事情！这是我的组成部分：

<template>
  <ckeditor
    :id="id"
    v-bind="$attrs"
    :editor="BalloonBlock"
    :config="editorConfig"
    v-on="$listeners"
  />
</template>

<script>
let BalloonBlock
let CKEditor

if (process.client) {
  BalloonBlock = require('@/plugins/ckeditor/ckeditor')
  CKEditor = require('@ckeditor/ckeditor5-vue2')
} else {
  CKEditor = { component: { template: '<div></div>' } }
}

export default {
  name: 'CKEditor',

  components: {
    ckeditor: CKEditor.component,
  },

  props: {
    fillErr: {
      type: Boolean,
      default: false,
      required: false,
    },
    minHeight: {
      type: String,
      default: '350px',
      required: false,
    },
    label: {
      type: String,
      default: '',
      required: false,
    },
  },

  data() {
    return {
      classicEditor: BalloonBlock,
      editorConfig: {
        language: 'fa',
        contentsLangDirection: 'rtl',
      },
      editorElement: null,
      id: null,
    }
  },

  computed: {
    value() {
      return this.$attrs.value
    },
  },

  created() {
    this.id = this.uuidv4()
  },

  mounted() {
    if (!document.getElementById('editorFaTranslate')) {
      const faScript = document.createElement('script')
      faScript.setAttribute('charset', 'utf-8')
      faScript.setAttribute('type', 'text/js')
      faScript.setAttribute('id', 'editorFaTranslate')
      faScript.setAttribute(
        'src',
        require('@@/plugins/ckeditor/translations/fa.js')
      )
      document.head.appendChild(faScript)
    }

    const intervalId = setInterval(() => {
      const ckEditor = document.getElementById(this.id)
      if (ckEditor) {
        clearInterval(intervalId)
        this.editorElement = ckEditor
      }
    })
  },

  methods: {
    uuidv4() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
        /[xy]/g,
        function (c) {
          const r = (Math.random() * 16) | 0
          const v = c === 'x' ? r : (r & 0x3) | 0x8
          return v.toString(16)
        }
      )
    },
    insertTextAtTheEnd(text) {
      function findCorrectPosition(htmlStr) {
        const lastIndexOfHTMLTag = htmlStr.lastIndexOf('</')
        const lastUlTag = htmlStr.lastIndexOf('</ul>')
        const lastOlTag = htmlStr.lastIndexOf('</ol>')
        if (
          lastUlTag === lastIndexOfHTMLTag ||
          lastOlTag === lastIndexOfHTMLTag
        ) {
          const lastLiTag = htmlStr.lastIndexOf('</li>')
          return lastLiTag
        }
        return lastIndexOfHTMLTag
      }
      const currentString = this.value
      const correctIndex = findCorrectPosition(currentString)
      const firstHalf = currentString.substring(0, correctIndex)
      const secondHalf = currentString.substring(correctIndex)
      const newString = `${firstHalf}${text}${secondHalf}`
      this.$emit('input', newString)
    },
  },
}
</script>

我欢迎任何想法！

Answer 1

我在我的依赖项中添加了“@ckeditor/ckeditor5-vue 2”：“github:ckeditor/ckeditor5-vue 2”，突然之间，我的问题消失了！