Folding at the start of sentences within a paragraph tag

Question

Folding at the start of sentences within a paragraph tag

Utilizing TinyMCE for my users to generate their own web pages is my current project. My main objective is to ensure that whatever content users type into the editor appears exactly as it does when published on the page. I am close to achieving this, however, TinyMCE automatically inserts a   if a user includes two spaces between their sentences. This causes issues because in the editor, the   collapses at the beginning of a line, aligning every line against the left side of the editor. When the page is published, it results in unnecessary spacing at the start of lines within 'p' tags. Removing the   entirely would solve the issue, but then the content would look different between the editor and the final page.

Is there a solution available to collapse a   at the beginning of lines specifically within a P tag? Alternatively, can TinyMCE be formatted differently to ensure consistency in appearance between the editor and the final page? Any assistance or insights on this matter are greatly appreciated!

javascript html css tinymce

Answer 1

Answer №1

Just like Diodeus mentioned earlier, it is not possible to collapse a single character and you will need to remove it if you want to eliminate it from the text. Most browsers automatically condense multiple consecutive spaces into just one space, resulting in only one visible space even if the user inputs several spaces. This is why tinymce includes a protected space - to ensure that all entered spaces are displayed while using a different type of space.

Update: Here is an example code snippet for inserting a span element and checking its position. Pay attention to the values summed up as "left", as they will be relevant to your needs:

var ed = this.editor, box = null;

if ($(ed.getBody()).find('p:first').css('line-height') != 'normal'){
    lineHeight = $(ed.getBody()).find('p:first').css('line-height');
}
else {
    lineHeight = $(ed.getBody()).find('p:first').css('min-height');
}

var lineHeight = lineHeight.substr(0, lineHeight.length -2);//box.height;

var rng = ed.selection.getRng();
rng.collapse(true);

bm = ed.selection.getBookmark();
$marker = $(ed.getBody()).find('#'+bm.id);
var elem = ed.getDoc().getElementById(bm.id+'_start');
box = elem.getBoundingClientRect();

var doc = ed.getDoc(),
    docElem = doc.documentElement,
    body = ed.getBody(),
    win = ed.getWin(),
    clientTop  = docElem.clientTop || body.clientTop || 0,
    clientLeft = docElem.clientLeft || body.clientLeft || 0,
    scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
    scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
    top  = box.top + scrollTop - clientTop,
    left = box.left + scrollLeft - clientLeft;

// set Bookmark
ed.selection.moveToBookmark(bm);

Answer 2

Just like Diodeus mentioned earlier, it is not possible to collapse a single character and you will need to remove it if you want to eliminate it from the text. Most browsers automatically condense multiple consecutive spaces into just one space, resulting in only one visible space even if the user inputs several spaces. This is why tinymce includes a protected space - to ensure that all entered spaces are displayed while using a different type of space.

Update: Here is an example code snippet for inserting a span element and checking its position. Pay attention to the values summed up as "left", as they will be relevant to your needs:

var ed = this.editor, box = null;

if ($(ed.getBody()).find('p:first').css('line-height') != 'normal'){
    lineHeight = $(ed.getBody()).find('p:first').css('line-height');
}
else {
    lineHeight = $(ed.getBody()).find('p:first').css('min-height');
}

var lineHeight = lineHeight.substr(0, lineHeight.length -2);//box.height;

var rng = ed.selection.getRng();
rng.collapse(true);

bm = ed.selection.getBookmark();
$marker = $(ed.getBody()).find('#'+bm.id);
var elem = ed.getDoc().getElementById(bm.id+'_start');
box = elem.getBoundingClientRect();

var doc = ed.getDoc(),
    docElem = doc.documentElement,
    body = ed.getBody(),
    win = ed.getWin(),
    clientTop  = docElem.clientTop || body.clientTop || 0,
    clientLeft = docElem.clientLeft || body.clientLeft || 0,
    scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
    scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
    top  = box.top + scrollTop - clientTop,
    left = box.left + scrollLeft - clientLeft;

// set Bookmark
ed.selection.moveToBookmark(bm);

Answer 3

Answer №2

You cannot simply "collapse" it. The only option is to eliminate it by utilizing REGEX or a string replacement technique.

Answer 4

You cannot simply "collapse" it. The only option is to eliminate it by utilizing REGEX or a string replacement technique.

Folding at the start of sentences within a paragraph tag

Answer №1

Answer №2

Similar questions

Is it possible to utilize JStestDriver for testing JavaScript code embedded within JSP files?

Unable to modify input box border

performing an action using vuex in a component's method

Error: No schema found for the specified "User" model

Achieve equal height columns when they are stacked vertically using Bootstrap 5

JavaScript error: "null or not an object" bug

Choose only ul elements up to a specific level of depth

How to get the initial item from an API using JavaScript mapping

Ways to stop a named anchor from causing a line break

Editable content <div>: Cursor position begins prior to the placeholder

Can different table headers be inserted under a Colspan?

BeautifulSoup: A guide on retrieving information following a designated HTML element

I require a modification in the style of every anchor element found within a div containing the designated class

Developing an HTML table with the power of JavaScript and JSON

modifying the appearance of the parent container of an input element

Enhance the axis functionality in c3.js

Using Selenium with Node.js to dynamically switch to a newly created tab

Tips for updating state and rendering in a function component in React Native:

Utilizing jQuery to append a new item to a list without using any identifiers and an excessive number of classes

The search bar on the screen does not span the entire width as expected using Bootstrap CSS styling