任何人都知道我如何在 NuxtJs 中使用 CkEditor？

Question

I have been trying to implement an CkEditor, but i haven't made any success. I have created an online-builder from https://ckeditor.com/ckeditor-5/online-builder/ .

-I have instaled: "@ckeditor/ckeditor5-build-classic": "^25.0.0", "@ckeditor/ckeditor5-vue2": "^1.0.5",

picture of files organization that i use i

And here is my component:

***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>

and here is how use my component:

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

I have read the documentation from from CkEditor for vue2, and vue3, but didnt manage to make it work. Can anyone help me?

Answer 1

I have solved the problem!!

If you are searching for an RichText editor for Nuxt version 2.14 to 2.15, use Quilljs!!

Its awsome, and there is this tutorial for it: https://www.programmersought.com/article/4960245701/ ,

and its own git that is super helpful!! https://github.com/quilljs/quill

you can face problems with the seting up, depending on your component, and the solution to the last part of the tutorial is an example of component.

dont use the

  <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>

just use

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