Issue with updating content in Vue when using CKEDITOR 4 inline editor

I have encountered an issue where I am trying to update the content of an inline Vue CKEDITOR 4 component using v-model multiple times. The problem arises when the user enters text in the editor, as any subsequent updates through v-model get overwritten by the user input.

To provide further clarity, I have outlined the steps and code I am working with:

Steps to replicate:

  1. Set the editor value to 'aaa' explicitly through v-model (non-user change).
  2. Type 'bbb' in the editor to have 'aaabbb' (user change).
  3. Explicitly set the editor value to 'ccc' through v-model (non-user change).

Expected outcome:

  • 'ccc' should be successfully set and displayed in the editor.

Actual behavior:

  1. 'ccc' gets set in the editor.
  2. The value 'aaabbb' is displayed, overwriting the value from step 1.

Code Snippet:

<template>
    <div>
        <ckeditor
            v-model="editorData"
            type="inline"
        />
    </div>
</template>
export default class EditorWrapper extends Vue {
    // Property of the Vue component holding the data passed to the editor in steps 1 and 3.
    @Prop({ type: String, default: '' })
    externalData!: string;

    // Data variable in Vue bound two-way to the editor
    editorData: string;

    // Watch for changes in the 'externalData' property
    @Watch('externalData')
    onPropertyChange(externalData) {
        // Explicitly update the editor text in cases not changed by the user (steps 1 and 3).
        this.editorData = externalData;
    }

    // Watch for changes in the editor 'v-model' data (changes made by users and non-users)
    @Watch('editorData')
    onEditorDataChange(data) {
        // Incorrect output showing the editor text as 'ccc', then 'aaabbb'.
        console.log(data);
    }

}

Answer №1

To implement two-way data binding, you can use a computed setter in your code:

https://example.com/code-example

@Prop({ type: String, default: '' })
    value: string;

get _value() {
    return this.value
}

set _value(val) {
    this.$emit('input', val)
}

<ckeditor
    v-model="_value"
    type="inline"
/>

Then, update the value in your parent component:

<editor-wrapper v-model="updatableValue"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is tsconfig.json Utilized by Gatsby When Using Typescript?

Many blog posts and the example on Gatsby JS's website demonstrate the use of a tsconfig.json file alongside the gatsby-plugin-typescript for TypeScript support in Gatsby. However, it seems like the tsconfig.json file is not actually utilized for conf ...

Tips for displaying a form after clicking with a delay in Angular 7

I need to update some AngularJS code for Angular 7. There is a function that displays a new form below the main one when clicked. HTML <img [hidden]="!skillsToDelete" (click)="showFormDelete(skill)" title="Delete" class="cross" src="../../../assets/i ...

encryption storage for React Native with TypeScript and Redux

// store.ts export const createAppReducer = () => combineReducers({ system: systemReducer, posts: postsReducer, }); const reducer = createAppReducer(); export type RootState = ReturnType<typeof reducer>; export const createAppStore = ...

Using Typescript to import HTML files into a string with Express

My current challenge involves importing an HTML file using import template as "./template.html" as a string to be displayed to the user through Express's res.end(template); function. To facilitate this, I have set up an index.d.ts file in t ...

What exactly does the context parameter represent in the createEmbeddedView() method in Angular?

I am curious about the role of the context parameter in the createEmbeddedView() method within Angular. The official Angular documentation does not provide clear information on this aspect. For instance, I came across a piece of code where the developer i ...

What is the process for running a continuous stream listener in a node.js function?

I am currently working with a file called stream.ts: require('envkey') import Twitter from 'twitter-lite'; const mainFn = async () => { const client = new Twitter({ consumer_key: process.env['TWITTER_CONSUMER_KEY'], ...

Extending the functionality of constructors in a Date subclass

Wanting to create a custom Date subclass with an overridden constructor: export class MyDate extends Date { constructor(str: string) { super(str); } } However, when attempting to instantiate a MyDate object, it fails : var myDate = new MyDate("2 ...

Child component submission issue in edit form within Angular 2 application

Within my parent component, I've included a child component. When I click on the edit button, the edit form displays correctly and shows the previous data from the child component's select dropdown. However, if I choose not to select another opti ...

When an abstract method is invoked within the constructor of an abstract class, it does not have access to properties of

This code snippet is supposed to display 'Hello World!' on the screen, but instead it shows an error message: Error: Cannot read property 'id' of undefined. What could be the reason behind this issue? abstract class Parent { construc ...

Preventing Event Propagation in Angular HTML

I am encountering an issue with stopPropagation, and I need assistance with implementing it in HTML and TypeScript for Angular. The problem is that the dialog opens but also triggers a propagation. Below is my code snippet in HTML: <label for="tab-two ...

Utilizing React with Typescript to Implement useReducer with Action Interface Featuring Union Type Support

My current challenge involves creating a reducer using the useReducer hook. I have defined an interface named Action which includes a property that can hold either a string or a number: type Actions = 'update_foo' | 'update_bar'; inter ...

The VueJS Watcher fails to activate when monitoring changes within nested objects

I have created a codesandbox to demonstrate my issue: codesandbox example watcher not triggering. Currently, I am developing a component that depends on an object with dynamically added data. In a separate .js file, I export the following object: export d ...

Encountering a JS error while attempting to execute a basic HTTP request

I'm currently attempting to interact with a Gateway and decided to test out the https://www.npmjs.com/package/@types/request module. Below is the snippet of code I am trying to execute: export class OAuthAccessor { //some stuff public stat ...

Ending <div> tag dependent on condition in Vue.js

Having trouble with a conditional tag ending, can't seem to get it to work. Any suggestions for a workaround? <div class="container"> <template v-if="smallScreen"> </div> </template> <template v ...

Is it possible to utilize one of the parameters passed into a function as a type within the function itself in TypeScript?

Attempting to create a standard code template. How about this: Function processData(someTypeAlias: string, data: string){ Const mapper:someTypeAlias //Implementation details } I gave it a shot but couldn't get it to work. Any suggestions for someth ...

What is the most efficient way to identify the top n instances of a specific value within an array using Typescript or JavaScript?

Working with TypeScript, I am dealing with an array of objects that may contain the same values as other objects within the array. For example, the following array consists of objects with the value "intent". My goal is to identify the top 3 most commonly ...

Mastering the Art of Mocking Asynchronous Methods in Node.js Using Jest

I have the following files: |_ utils.js |_methods.js I am currently conducting unit testing for rest.js methods, where the content of the file is as follows: methods.js import Express from 'express' import { add_rec } from './utils' ...

Tips for implementing debounce functionality in mui Autocomplete

How can I debounce the onInputChange function within the MyAutocomplete component? export interface AutocompleteProps<V extends FieldValues> { onInputChange: UseAutocompleteProps<UserOrEmail, true, false, false>['onInputChange']; } ...

Ways to access the offspring of a heavily nested array in JavaScript

I am facing a data challenge with the following structure: const data = [ { name: "Car", id: "19", count: "20", depth: "1", children: [ { name: "Wheel", ...

What does Angular 5 offer in terms of functionality that is equivalent to?

I am working on my AngularJS 1.5 application where I have controllers directly calling service functions. What is the recommended approach to achieve this in Angular? $scope.permissions = ClockingMenuService.permissions; $scope.data = ClockingMenuService ...