multi editors

[AhmedAliGad]

how can use more than one <ckeditor></ckeditor> at same page

[apoorvpal01]

You should be able to get two editors by just adding the component twice. This was tested on a sample Vue + Vite project

Sample Code:

<script setup>
import { ref } from 'vue'
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3/dist/ckeditor'

const editorData = ref("test");

const editorUrl = "https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js";

const editorConfig = {
  FillEmptyBlocks: false,
  removePlugins: "image",
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  toolbar: [
    ["Source", "Maximize"],
    ["Format"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Table", "HorizontalRule"],
  ],
};
</script>

<template>
  <main>
    <ckeditor v-model="editorData" :editorUrl="editorUrl" :config="editorConfig" :throttle="120"></ckeditor>
    <ckeditor :editorUrl="editorUrl" :config="editorConfig" :throttle="120"></ckeditor>
  </main>
</template>

[AhmedAliGad]

I already added two ckeditor components but when I change the content at any one it overwrites the other and be the same <ckeditor v-model="form.terms" :config="editorConfig" :throttle="120"></ckeditor> <ckeditor v-model="form.description" :config="editorConfig" :throttle="120"></ckeditor>

[apoorvpal01]

The following code has been confirmed to be working on a Vite project. Please share the full source code to replicate the issue you are facing.

<script setup>
import { ref } from 'vue'
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3/dist/ckeditor'

const form = ref({
  terms: "terms",
  description: "description"
})

const editorUrl = "https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js";

const editorConfig = {
  FillEmptyBlocks: false,
  removePlugins: "image",
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  toolbar: [
    ["Source", "Maximize"],
    ["Format"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Table", "HorizontalRule"],
  ],
};
</script>

<template>
  <main>
    <ckeditor v-model="form.terms" :editorUrl="editorUrl" :config="editorConfig" :throttle="120"></ckeditor>
    <ckeditor v-model="form.description" :editorUrl="editorUrl" :config="editorConfig" :throttle="120"></ckeditor>
  </main>
</template>

[AhmedAliGad]

`

`

[AhmedAliGad]

when I update values it returns the same values for two editors

[apoorvpal01]

There are quite a few other dependencies which may be the source of the issue. The editor in itself seems to be working fine, as shown in the demo code above. You may try to diagnose the issue via the DevTools or verbose logging. The editor will be emitting the update events and listen to prop changes only for the specific variable passed to it via the v-model

[apoorvpal01]

Closing this issue as it cannot be reproduced with the package directly and may have been caused due to other packages involved.

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