Adding text in CKEditor with Angular while preserving the existing formatting

To add my merge field text at the current selection, I use this code:

editor.model.change(writer => {
    var position = editor.model.document.selection.getFirstPosition();

    // trying to connect with the last node
    position.stickiness = 'toPrevious';
        
    writer.insertText(text_to_insert, position);
});

Unfortunately, this method doesn't preserve the styling of the previous node and defaults to the default styling. I checked the CKEditor documentation and tried adjusting the stickiness property of the position object, but it didn't make a difference.

https://i.sstatic.net/gE5z5.png

I'm trying to figure out how to insert text at the current position while maintaining the styling of the prior nodes. Any advice or suggestions are greatly appreciated!

Answer №1

After spending some time experimenting, I finally got a solution up and running. I found some helpful documentation that guided me through the process, although I encountered some unexpected behavior related to selection.

editor.model.change(writer => {

    var selection = editor.model.document.selection;
    var position = selection.getFirstPosition();

    // copy attributes of selected element
    var attributes = {};
    if (position.parent.childCount > 0) {
        var element = position.parent.getChild(0);
        attributes = element.getAttributes();
    }

    writer.insertText(text_to_insert, attributes, position);

});

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

The module rxjs/operators cannot be located

When trying to import rxjs/operators in my Angular project, I use the following syntax: import { map } from 'rxjs/operators'; However, this results in the following error message: map is declared but its value is never read. Cannot find modu ...

Encountered an issue during the installation of react router - in need of assistance to resolve the error

Encountering an Error Error Message when Installing React Router DOM: npm WARN: The use of global `--global` and `--local` is deprecated. Use `--location=global` instead. npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:\ npm ERR! errno -404 ...

When updating the data in a datatables.net table within Angular 7, the previous data from the initial table load is retained

I'm currently working on a project that involves live reporting from a REST API request using the datatables.net library in Angular 7. When I update data in the database, the table reflects these changes accurately. However, if I interact with the tab ...

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb? I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solu ...

Unable to interpret Python/Django-generated JSON object on client side

I'm encountering an issue while passing a data object from a Python/Django application to the frontend using AJAX in JSON format. Despite everything appearing to be functioning correctly, I am unable to properly parse the JSON object within JavaScript ...

Running Python in React using the latest versions of Pyodide results in a malfunction

As someone who is new to React and Pyodide, I am exploring ways to incorporate OpenCV functionality into my code. Currently, I have a working piece of code that allows me to use numpy for calculations. However, Pyodide v0.18.1 does not support OpenCV. Fort ...

Unable to display image on React page using relative file path from JSON data

Greetings, this is my initial post so please forgive me if I have missed any important information. I'm currently in the process of creating a webpage using react. My goal is to display content on the page by iterating over a relatively straightforwa ...

Experimenting with code within a window event listener function

I have a component in my AngularJS application that is functioning correctly. However, when it comes to test coverage, everything after the 'window.addEventListener('message',' part is not being covered. Should I create a mock object f ...

What is the process of setting up various initialization parameters for a DataTable?

Here is a snippet of JavaScript code I have been using to initialize a DataTable: $(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copyHtml5', &a ...

The issue I am facing is with the post_logout_redirect_uri not functioning properly when using localStorage in an OIDC Auth

authority: 'yyy', client_id: this.'yyy', redirect_uri: 'http://localhost:4200/login', response_type: 'token', scope: 'yyy', post_logout_redirect_uri: & ...

What is the process for downloading the array of images' responses?

Currently, my setup involves Angular 5 on the front end and Spring Boot on the backend. I am facing the challenge of downloading the JSON response of images. Can anyone provide guidance on how to achieve this? ...

The inline style fails to take effect on input elements that are generated dynamically

Consider: $( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() { var q = $( this ).html(); $( this ).html( "<input type='number' style='text-align:right width:50px' min='1' value='" + q + " ...

Can you explain the distinction between the controls and get methods used with the FormGroup object?

I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome: this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value; this.data.affiliateLinkUrl = this.bookLinkForm.get(' ...

How can I implement a feature to automatically close a drawer in a React application using the Material UI

Currently, I am utilizing a React material design theme However, I am facing an issue where the drawer navigation button on mobile view does not close automatically upon clicking I need something like (onClick={handleClose}) to resolve this problem Does ...

Guide for displaying a React Bootstrap modal within a function

Currently, I am integrating a React Bootstrap modal popup into my project. The goal is to have the modal display when a user submits a form. The specific modal component I am using is called SaveConfirmationModal. import { Button, Modal} from "react- ...

Attempting to integrate a three.js OBJLoader within an HTML canvas

My issue is quite straightforward: I attempted to connect a three.js script with an HTML canvas, but I was unsuccessful and now I'm unsure how to proceed. Here is the code I have (I've already loaded the necessary scripts in the HTML head): wi ...

Failure to load image logo when refreshing the page

There's something peculiar happening in my App.vue. Imagine I have a route link, let's say it's localhost/tools or any similar route. The logo image will display on this route. Take a look at the image here https://i.stack.imgur.com/6HaXI.p ...

Discovering the process of extracting information from an individual object within a local JSON file on a detailed page using Angular 9

Here is a JSON object I am working with: [ { "products": [ { "id": "1", "name": "Apple", "price": "free", "imageURL": "assets/apples.jpg", "category": "Fruits" }, an ...

This as well as its parent node

I am looking to implement a function where an element is manipulated if a child of it is clicked (by adding a CSS class to it). My current approach is as follows: function mahlzeitRaus() { console.log("Out"); //this.className += " not"; this. ...

Solving the error message: "Objects cannot be used as a React child (found: object with keys {})"

I am currently in the process of developing a full stack website that utilizes React, Express, Sequelize, and mySQL. The site is operational with features like registration and login implemented successfully. However, I encountered an issue when trying to ...