More than one <ckeditor></ckeditor> at same page

[lserio]

I have the same problem as @AhmedAliGad

This is my code:

vite.config.js

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {
  let baseConfig = {
    plugins: [vue({
      customElement: false,
      template: {
        compilerOptions: {
        }
      }
    })],
    build: {
      lib: {
        entry: './src/wc.js',
        name: 'job-wc',
        fileName: 'job-wc'
      },
      rollupOptions: {
        external: ['vue'],
        output: {
          globals: {
            vue: 'Vue3'
          }
        }
      },
      minify: true
    },
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    define: {
      'process.env.NODE_ENV': JSON.stringify(import.meta.env),
    },
  };

  if (mode === 'build') {
    return Object.assign(baseConfig, {
      appType: 'custom'
    });
  }

  return baseConfig;
});

main.js

import { h, createApp } from 'vue';
import router from './router';
import CKEditor from '@mayasabha/ckeditor4-vue3';
import App from './App.vue';

createApp(App)
  .use(router)
  .use(CKEditor)
  .mount('#app');

Test.Vue

<template>
  <div>
    <div class="form-group">
      <label for="editor1">Editor 1</label>
      <ckeditor v-model="editor1" :config="editorConfig"></ckeditor>
    </div>

    <div class="form-group">
      <label for="editor2">Editor 2</label>
      <ckeditor v-model="editor2" :config="editorConfig"></ckeditor>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    editorConfig: {
      language: 'en',
      height: 100,
    },
    editor1: null,
    editor2: null,
  }),
  watch: {
    'editor1': function () {
      alert('editor 1')
    },
    'editor2': function () {
      alert('editor 2')
    },
  }
};
</script>

and this is the result, also verified with the devtool:

What I noticed is that if I pass a different configuration to the second editor, then it works!

I hope I have been helpful.

Originally posted by @lserio in https://github.com/mayasabha/ckeditor4-vue3/issues/8#issuecomment-1896598035

[lserio]

The problem appears to be binding the same configuration between the two components.

[apoorvpal01]

Hey @lserio, thank you for adding this issue. While the ckeditor 4 vue 3 wrapper doesn't alter this functionality and the config is passed through to the underlying CKEditor as-is, I'll setup a deep copy for the config soon, and that should fix it.