Блог

Главная - Вопросы по программированию - Кто-нибудь знает, как я могу использовать CKEditor в NuxtJs?

Кто-нибудь знает, как я могу использовать CKEditor в NuxtJs?

#javascript #node.js #vue.js #ckeditor #nuxt.js

#javascript #node.js #vue.js #ckeditor #nuxt.js

Вопрос:

Я пытался реализовать CKEditor, но я не добился никакого успеха. Я создал онлайн-конструктор из https://ckeditor.com/ckeditor-5/online-builder /.

-Я установил: «@ckeditor / ckeditor5-build-classic»: «^ 25.0.0», «@ckeditor / ckeditor5-vue2»: «^ 1.0.5»,

изображение организации файлов, которое я использую, я

И вот мой компонент:

 ***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, но мне не удалось заставить ее работать. Кто-нибудь может мне помочь?

Комментарии:

1. Удалось ли вам сначала заставить его работать с Vue2?

2. Нет… не работает с Vue2 или Vue3, я думаю, это может быть проблемой с моим nuxt.config.js . Раньше у меня были проблемы с модулями из boostrapVue, которые мне приходилось устанавливать в модулях после перед всем в этом nuxt.config. Вы сталкивались с подобными проблемами раньше?

Ответ №1:

Я решил эту проблему!!

Если вы ищете текстовый редактор для Nuxt версии с 2.14 по 2.15, используйте 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>