The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content.

Below is the HTML code snippet:

<div id="postCommentEditor" class="postCommentEditor ql-align-right ql-direction-rtl"></div>

For the JavaScript part:

const quillEditor = new Quill('#postCommentEditor', {
    modules: {
        toolbar: true,
    },
    theme: 'snow',
});

quillEditor.format('direction', 'rtl');
quillEditor.format('align', 'right');

And here's the CSS style for the post editor:

.postCommentEditor {
    height: 100px;
    margin-bottom: 5px;
}

When attempting to alert the input in the editor:

let $contentOBJ = $(quillEditor.root).children()[0].innerHTML;
alert($contentOBJ);

Typing:

aaaa
test

Results in only aaaa being displayed in the alert message.

javascripthtmlcssquill

Answer №1

The issue arises from the fact that Quill renders HTML, and in this particular situation, it appears like this:

<p>aaaa</p>
<p>test</p>

Therefore, when you try to access the content using the following code:

let $contentOBJ = $(quillEditor.root).children()[0].innerHTML;

You will only retrieve the content of the first child element, which is aaaa

To retrieve all text content, you can use either 

let $contentOBJ = $(quillEditor.root).innerHTML;
or quillEditor.getText()

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

Having npm start is causing an error to be displayed

I am encountering an issue when I try to start 'npm' on my mean.js application. The error message is related to a missing file called '.csslintrc'. Below, I have included the terminal output as well as the snippet of code where the erro ...

javascriptnpmmeanjsnpm-start

Passing an array from JavaScript to PHP and then storing it as a .json file

Query I am trying to pass an array to PHP and save it in a data.json file. However, the data.json file is being created but showing Null as output. I have spent about 2 hours on this code, checked numerous solutions on SO, but nothing seems to work. As I ...

javascriptphparraysjsonajax

What is the reason for the checkboxes in vuejs not being rendered with the checked attribute set

When working on an edit form, I encountered a situation where I had multiple options to choose from. These options were fetched via ajax using axios and assigned to the variable permisos in the component. Later, these options are rendered through a v-for l ...

javascriptvue.jsvuejs2

Enhance a React component by including additional properties when passing it into another component through props

I have a parent element with a dynamically changing height that I need to pass down to its child elements. To get and set the height of the parent element, I am utilizing a ref. The challenge lies in passing this height value from the parent component to ...

javascriptreactjs

Can you explain the purpose of the search_/> tag used in this HTML code?

I came across this code snippet while working on creating a customized new tab page for Firefox. <input class="searchBar search_google" type="text" name="q" placeholder="Google" search_/> However, I'm confused about the search_ ...

htmlformssearchwebinput

Accessing information from a json response using an ajax request

Currently, I am making an ajax call to fetch the longitude and latitude based on a pin code. Here is how I approached it: $(document).ready(function () { $.ajax({ type: "GET", url: "http://maps.googleapis.com/ma ...

javascriptjqueryjsonajaxgoogle-maps

Geocomplete Plugin without Google Branding

I've implemented the jQuery Geocomplete Library. This is what I have accomplished so far- $(function() { $("#find_product_location").geocomplete( { map: "#product_location", mapOptions: { mapTypeId : 'roadmap',//roadmap, satellite,hybrid ...

javascriptjquerygoogle-mapsgoogle-maps-api-3geocomplete

Ways to Conceal <div> Tag

I need help with a prank .html page I'm creating for a friend. The idea is that when the user clicks a button, a surprise phrase pops up. I have managed to hide and unhide the phrase successfully using JavaScript. However, my issue is that when the pa ...

javascripthtmljquery

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am tr ...

javascriptcssreactjs

Sending JavaScript/jQuery variables to a different PHP page and navigating to it

For a while now, I've been working on: Executing a .js file on the client side (successful). Passing the returned object (the variables returned) as an array to another php page for further processing (successful but with issues). The first point, ...

javascriptphpjqueryajax

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

htmlcssflexbox

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

pretending to make an ajax call using jQuery

To enhance the user experience of file upload, I have implemented a fake ajax request. When the user clicks submit, the form disappears, a loading graphic appears, and after a few seconds, the page refreshes to display the newly uploaded image. However, e ...

phpjavascriptjqueryajaxcodeigniter

Is there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

javascriptjqueryhtml

Employ the power of a static force layout to forge an intricate web of connections within the realm of

I have found a great network that works really well. It automatically updates the node position when the size of the window changes. Now, I want to make it fixed. What I mean by this is that I want to compute a certain number of ticks (let's call it ...

javascriptd3.jssvelte

What is the best way to extract text from a list item in an unordered list (

I am trying to search a ul list that populates a ddSlick dropdown box. ddSlick adds pictures to list items, making it a visually appealing choice. To see more about ddSlick, you can visit their website here: Here is the code I am using to loop through the ...

javascriptjqueryhtmlhtml-lists

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

javascriptcsshtmlcanvas

Toggle switch with active state

I'm currently using Ionic 2 alongside Angular 2 beta 11. Is there a way to turn off the toggle switch? The Ionic documentation suggests using the checked attribute, but I've tried that and also attempted ng-checked with no luck. Any advice on t ...

javascriptangularjsangularionic-frameworkionic2

Combine several objects into one consolidated object

Is there a way to combine multiple Json objects into one single object? When parsing an array from AJAX, I noticed that it logs like this: 0:{id: "24", user: "Joe", pass: "pass", name: "Joe Bloggs", role: "Technical Support", ...} 1:{id: "25", user: "Jim ...

javascriptarraysjsonjavascript-objects

retrieve information from a URL's OpenGraph metadata

Does anyone know of any comprehensive tutorials that demonstrate how to retrieve opengraph data from a URL using JavaScript, similar to the functionality seen on Facebook when pasting a link into a post or on Yahoo Mail when inserting a URL into an email? ...

javascriptfacebook-opengraphyahoo-mail