after upgrading to 1.0.3 from 0.0.6 "v-model" doesn't work!

[nekooee]

My project was working fine. Today I decided to upgrade your package from 0.0.6 to 1.0.3. After upgrading, I noticed that the bound value does not return anything and is empty. I replaced the ckeditor.js file with the latest version, but it still made no difference. My code is similar to the following code:

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

<script setup>
import { computed, defineComponent, ref } from "vue";
import { component as ckeditor } from "@mayasabha/ckeditor4-vue3";

const Ckeditor = defineComponent(ckeditor);

const editorData = ref("test");

const editorUrl = "/ckeditor/ckeditor.js?v1.1";

const editorConfig = {
  FillEmptyBlocks: false,
  removePlugins: "image",
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  extraPlugins: ["bidi", "editorplaceholder", "justify", "panelbutton", "floatpanel", "colorbutton", "colordialog", "font", "image2", "divarea"],
  toolbar: [
    ["Source", "Maximize"],
    ["Format", "FontSize"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Image", "Table", "HorizontalRule"],
    ["BidiLtr", "BidiRtl"],
    ["JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
    ["TextColor", "BGColor"],
  ],
  contentsCss: "/ckeditor/custom.css?v=1.4",
};
</script>

What is the problem that v-model no longer works for me and neither takes nor returns anything?

[apoorvpal01]

Can you try removing the line 7 from your code and attempting to run the application again? The defineComponent syntax is not required as the imported component as ckeditor is already a valid Vue component. The following code should work:

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

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

const editorData = ref("test");

const editorUrl = "/ckeditor/ckeditor.js?v1.1";

const editorConfig = {
  FillEmptyBlocks: false,
  removePlugins: "image",
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  extraPlugins: ["bidi", "editorplaceholder", "justify", "panelbutton", "floatpanel", "colorbutton", "colordialog", "font", "image2", "divarea"],
  toolbar: [
    ["Source", "Maximize"],
    ["Format", "FontSize"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Image", "Table", "HorizontalRule"],
    ["BidiLtr", "BidiRtl"],
    ["JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
    ["TextColor", "BGColor"],
  ],
  contentsCss: "/ckeditor/custom.css?v=1.4",
};
</script>

[nekooee]

const Ckeditor = defineComponent(ckeditor);

No, it still doesn't work. I have tried it before. I added it so that Phpstorm does not warn and recognize the editor. I didn't make any changes in my code and just updated from version 0.0.6 to the new version and now v-model doesn't work anymore. It has taken me several hours, but it cannot be fixed. When I give it a "value", it works, of course, one way. But when I delete it and put "v-model", it neither takes nor gives value.

Also, I just tested and when I downgrade the package to version 0.0.6, everything works fine without any changes! There is a problem with the 1.0.3

[apoorvpal01]

Can you confirm if it works without specifying the editorUrl prop?

[nekooee]

Can you confirm if it works without specifying the editorUrl prop?

Yes, I tested and it still doesn't work after removing the editorUrl.

[apoorvpal01]

@nekooee After further testing, the ES6 imports were not found as the cause. I am still unable to replicate the issue on a sample Vue app. Please setup a repository to replicate the issue, as it may be specific to the customized config.js file or plugins.

[nekooee]

@nekooee After further testing, the ES6 imports were not found as the cause. I am still unable to replicate the issue on a sample Vue app. Please setup a repository to replicate the issue, as it may be specific to the customized config.js file or plugins.

@apoorvpal01 Thank you for taking the time to solve my problem. I first created a new raw project but there was no such problem! I tried to install all the dependencies of the main project here as well. But still no problem. I still could not understand why this problem occurs in the main project. If I get more information I will share it with you. Thank you again.

[nekooee]

I deleted the folder node-module and .yarn. After I ran yarn install fortunately the problem was solved. I don't know what the problem was.

[apoorvpal01]

It must have been related to the local cache in that case. Thanks for the update. I am closing this issue now.

[nekooee]

Hello, I updated from version 1.0.3 to 1.0.5 and the same problem occurred again. Although there is no problem with the raw project that I installed. This time, deleting the node-module folder did not solve the problem. In the raw project in devtools, when I click on the ckeditor component, "modelValue" is in the props section. But in the main project, "modelValue" went to the attrs section, and instead in the props section, there is "value" which has an empty, and that is what caused the problem. I don't know what to do, can you help me? In the main project, I created a component named myCkEditor entered the ck-editor component in it applied the settings, and used myCkEditor in other components. This is the code of my myCkEditor page:

<template>
  <div>
    <ckeditor :editor-url="editorUrl" @namespaceloaded="onNamespaceLoaded" v-model="editorData" :config="editorConfig" ref="editor"></ckeditor>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
const editor = ref(null);
import { component as ckeditor } from "@mayasabha/ckeditor4-vue3";
import { useQuasar } from "quasar";
const $q = useQuasar();
const props = defineProps({
  direction: { default: "ltr" },
  modelValue: { default: "armin" },
  locale: String,
  field: String,
});
const emit = defineEmits(["update:modelValue"]);
// let ckEditor = defineComponent(CKEditor.component);
const editorUrl = "/ckeditor/ckeditor.js";
const editorConfig = ref({
  FillEmptyBlocks: false,
  removePlugins: "image",
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  extraPlugins: ["bidi", "editorplaceholder", "justify", "panelbutton", "floatpanel", "colorbutton", "colordialog", "font", "image2", "divarea"],
  toolbar: [
    ["Source", "Maximize"],
    ["Format", "FontSize"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Image", "Table", "HorizontalRule"],
    ["BidiLtr", "BidiRtl"],
    ["JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
    ["TextColor", "BGColor"],
  ],
  contentsCss: "/ckeditor/custom.css?v=1.4",
});
const editorData = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emit("update:modelValue", newValue);
  },
});

// prettier-ignore
function onNamespaceLoaded(CKEDITOR) {
  CKEDITOR.plugins.addExternal('bidi', '/ckeditor/plugins/bidi/plugin.js')
  CKEDITOR.plugins.addExternal('editorplaceholder', '/ckeditor/plugins/editorplaceholder/plugin.js')
  CKEDITOR.plugins.addExternal('justify', '/ckeditor/plugins/justify/plugin.js')
  CKEDITOR.plugins.addExternal('panelbutton', '/ckeditor/plugins/panelbutton/plugin.js')
  CKEDITOR.plugins.addExternal('floatpanel', '/ckeditor/plugins/floatpanel/plugin.js')
  CKEDITOR.plugins.addExternal('colorbutton', '/ckeditor/plugins/colorbutton/plugin.js')
  CKEDITOR.plugins.addExternal('dialog', '/ckeditor/plugins/dialog/plugin.js')
  CKEDITOR.plugins.addExternal('colordialog', '/ckeditor/plugins/colordialog/plugin.js')
  CKEDITOR.plugins.addExternal('panel', '/ckeditor/plugins/panel/plugin.js')
  CKEDITOR.plugins.addExternal('listblock', '/ckeditor/plugins/listblock/plugin.js')
  CKEDITOR.plugins.addExternal('button', '/ckeditor/plugins/button/plugin.js')
  CKEDITOR.plugins.addExternal('richcombo', '/ckeditor/plugins/richcombo/plugin.js')
  CKEDITOR.plugins.addExternal('font', '/ckeditor/plugins/font/plugin.js')
  CKEDITOR.plugins.addExternal('image2', '/ckeditor/plugins/image2/plugin.js')
}
</script>

This is also a photo of devtools:

[nekooee]

I downgraded and upgraded again, the problem was solved by itself. I think there is a problem in this package that occurs every time when it is updated. I try not to update anymore so that I don't have to

[apoorvpal01]

That seems quite odd. The package manager would update the source code for the package completely so there shouldn't really be any difference between updating it and getting the latest version installed directly. I will try to find if this is a reported issue somewhere and if there's something I can do on the package to fix it. Thanks for informing me @nekooee