有人知道我如何在 NuxtJs 中使用 CkEditor 吗？

Question

我一直在尝试实现一个 CkEditor，但我没有取得任何成功。我从 https://ckeditor.com/ckeditor-5/online-builder/.

创建了一个在线生成器

-我已经安装： "@ckeditor/ckeditor5-build-classic": "^25.0.0", "@ckeditor/ckeditor5-vue2": "^1.0.5",

picture of files organization that i use i

这是我的组件：

***in components/ckEditor***

<template>
  <div class="editor">
  </div>
</template>
<script src="/build/ckeditor.js"></script>
<script>

  ClassicEditor.create(document.querySelector('.editor'), {

    toolbar: {
      items: [
        'heading',
        '|',
        'undo',
        'redo',
        '|',
        'bold',
        'italic',
        '|',
        'fontColor',
        'fontBackgroundColor',
        'fontFamily',
        'fontSize',
        '|',
        'link',
        '|',
        'bulletedList',
        'numberedList',
        'indent',
        'outdent',
        '|',
        'imageUpload',
        'mediaEmbed',
        '|',
        'insertTable'
      ]
    },
    language: 'pt-br',
    image: {
      toolbar: [
        'imageTextAlternative',
        'imageStyle:full',
        'imageStyle:side',
        'linkImage'
      ]
    },
    table: {
      contentToolbar: [
        'tableColumn',
        'tableRow',
        'mergeTableCells'
      ]
    },
    licenseKey: '',

  })
    .then(editor => {
      window.editor = editor;
    })
    .catch(error => {
      console.error(error);
    });
</script>

<style scoped>
</style>

下面是如何使用我的组件：

*** in pages/index.vue***
<template>
  <div class="container grid">
    <CkCadastroLoja/>
  </div>
</template>

我已经从 CkEditor 中阅读了 vue2 和 vue3 的文档，但没有成功。谁能帮帮我？

Answer 1

我已经解决了问题！！

如果您正在搜索适用于 Nuxt 2.14 至 2.15 版的 RichText 编辑器，请使用 Quilljs！！

太棒了，有这个教程：https://www.programmersought.com/article/4960245701/,

和它自己的 git 非常有帮助！！ https://github.com/quilljs/quill

您可能会遇到设置问题，具体取决于您的组件，本教程最后一部分的解决方案是组件示例。

不要使用

  <section class="container">
    <div class="quill-editor" 
         :content="content"
         @change="onEditorChange($event)"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"
         v-quill:myQuillEditor="editorOption">
    </div>
  </section>

只需使用


    <div class="quill-editor container" 
         :content="content"
         @change="onEditorChange($event)"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"
         v-quill:myQuillEditor="editorOption">
    </div>

有人知道我如何在 NuxtJs 中使用 CkEditor 吗？

Anyone knows how i can use CkEditor in NuxtJs?

javascript

ckeditor

node.js

vue.js

nuxt.js