Angular8 with the [tinymce] library for customizing editor elements and configuring multiline options

I am currently working with Angular 8 and in the template, we have the following code snippet:

<editor
              required
              class="research-modal__control__input research-modal__control__input__description"
              formControlName="description"
              id="description"
              [inline]="false" //trying something out
              placeholder="Description"
              [init]="{
                      base_url: '/tinymce',
                      suffix: '.min',
                      inline: true,
                      height: 500,
                      menubar: false,
                      toolbar:
                        'subscript superscript'
                    }"
            ></editor>

Does anyone know how to enable multiline mode? For instance, if I type the following in the textarea field:

line1
line2
line3

and the value with line breaks is saved in the database (Postgres), but when I reopen my popup window with the <editor> tag, everything is displayed in one line like this:

line1 line2 line3

I have searched online for a solution but couldn't find one. How can I enable multiline support?

angulartypescripttinymce

Answer №1

When using TinyMCE, remember that it is designed for editing HTML content. It is important to ensure that the content you input is in valid HTML format. If you enter plain text without any markup, TinyMCE will automatically enclose it within a paragraph element (<p>...</p>). Additionally, carriage returns and line breaks do not hold significance in HTML and will be disregarded or removed.

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

Retrieve user information by their unique user ID from a MongoDB database using a Node, Express, and TypeScript API

Currently, I am working on a Node JS and Express with TypeScript API project. In this project, I need to retrieve data stored by a specific user from MongoDB based on their user ID. This is a snippet from my DataRouter.ts: router.get('/:userId', ...

node.jsmongodbtypescriptexpressoauth

Learn how to generate specific error messages based on the field that caused the failure of the @Column({ unique: true }) Decorator. Error code 23505

Hey there! I'm currently facing an issue while trying to handle Sign Up exceptions in my code. I want to inform the user if their username OR email is already in use. Although using the decorator @Column({ unique: true}) allows me to catch error 23505 ...

typescriptpostgresqlerror-handlingnestjstypeorm

Validate the presence of a value in AngularFire and if not found, proceed to create it

I recently started using AngularFire, and since the update to AngularFire5, I've been encountering some issues. My goal is to create a 'room' with a unique id: name pair. When a user inputs a name, I need to check if that name already exists ...

angularfirebase-realtime-databaseionic3angularfireangularfire5

Angular device redirection allows you to automatically redirect users based on the device

Currently in my Angular project, I am attempting to dynamically redirect users based on their device type. For example, if the user is on a Web platform, they will be redirected to www.web.com. If they are on an Android device, they should go to www.androi ...

angulartypescript

The Angular material datepicker is not functioning properly

I've been struggling to make this work for nearly an hour now, but all I see is a blank screen. Everything else seems to be functioning properly except for this particular issue. I've scoured both StackOverflow and Github for solutions, but unfor ...

angularangular-material

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

I have a scenario where I need to add a new method to a prototype, specifically to a class created using TypeScript. Here is an example: declare module "./MyClass" { interface MyClass { myNewMethod(); } } MyClass.prototype.myNewM ...

typescript

Discover the solution for seamless integration of TypeScript with the novel `exports` and `main` field

I am currently utilizing Node.js version 16.10.0 along with TypeScript 4.5.5. As part of my development process, I am in the midst of publishing a library and have implemented the following configuration: "main": "./dist/index.js", ...

node.jstypescriptjestjs

Experimenting with TypeScript code using namespaces through jest (ts-jest) testing framework

Whenever I attempt to test TypeScript code: namespace MainNamespace { export class MainClass { public sum(a: number, b: number) : number { return a + b; } } } The test scenario is as follows: describe("main test", () ...

javascriptunit-testingtypescriptnamespacesjestjs

Passing variable values in Angular 6

Is there a way to transfer the value of a variable from Component1 to a variable in Component2 without using any template binding? I have two components, Header and Footer. In the Header component, there is a boolean variable called test that I need to pa ...

angulartypescript

The setInterval function continues executing even after the page has been changed

I'm encountering an issue with my function where it continues to run even after the page has changed, resulting in an error. How can I go about stopping this behavior? Thank you! componentDidMount() { var current = 0; var slides = document.g ...

javascriptreactjstypescript

Angular2: Ensuring Sequential Execution Line by Line - A Comprehensive Guide

I have a designed an Angular2 Navbar Component that features a logout button: import { Component, OnInit } from '@angular/core'; import { LoginService } from '../login.service'; import { Router } from '@angular/router'; @Co ...

angulartypescript

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...

htmlcssangularclassng-style

Implementing setState callback in TypeScript with React Hooks

Hello everyone! I am currently working on defining my component types using TypeScript, and I am faced with a challenge. I am trying to set it up so that I can either pass an array of objects or a callback function containing the previous state. Below is t ...

reactjstypescriptcallbacksetstate

Angular function is executed ahead of the designated schedule

I am working with Angular components that execute two functions during initialization. The first function populates an array, and the second function takes values from that array and calls a service. The issue I am facing is that the second function execu ...

angulartypescriptrxjs

Is there a way to update the data on a view in Angular 9 without the need to manually refresh the page?

Currently, I am storing information in the SessionStorage and attempting to display it in my view. However, there seems to be a timing issue where the HTML rendering happens faster than the asynchronous storage saving process. To better illustrate this com ...

javascriptangulartypescript

Incorporate a personalized Cypress function for TypeScript implementation

I'm in the process of developing a custom cypress command that will enable me to post a file using formData, as the current cy.request does not yet support formData. For the actual POST operation, I am utilizing request-promise-native. To begin with ...

typescriptcypress

Troubleshooting Issue with Filtering Nested Object Array Based on Property

At the core of my data structure lies an array of orders, each containing an array of line items. These line items, in turn, are associated with their respective categories. I am currently attempting to filter the order array based on the category ID of th ...

javascriptarraystypescriptfilterfiltering

Angular library modules for node packages

After developing my latest library, I noticed some red underlines: https://i.stack.imgur.com/ffAjI.png In this package, I plan to incorporate other npm packages like ionic and crypto. I attempted to update the package.json within the library: { "name ...

javascriptnode.jsangularnpm

Ensure Angular2-DatePicker starts as empty when first displayed

I have integrated the angula2-datetimepicker into my application by using the instructions from this source. Initially, I need to display an empty datepicker. Below is the code I am currently using: HTML: <angular2-date-picker [(ngModel)]="Model.Sele ...

angulardatepicker

Mapping an array based on its individual values

How can I sum values in an array of objects based on a specific condition? [{amount:100, prefix:'a'},{amount:50, prefix:'b'},{amount:70, prefix:'a'},{amount:100, prefix:'b'}] Is there a method to map and calculate t ...

typescript