Modify the font style in the designated blank space of the Tinymce editor

I'm currently using Rails with tinymce 5.0, but I can't seem to change the font style in the highlighted blank line. Here's an example scenario with two lines as shown below: https://i.sstatic.net/CYdzf.png

If you try to select everything and change the font style: https://i.sstatic.net/npGrB.png

The empty line remains in the default Arial 11 font size: https://i.sstatic.net/ZftrS.png

Below is my current tinymce configuration setup:

 selector: "textarea.tinymce",
  fontsize_formats: "8pt 9pt 10pt 11pt 12pt 13pt 14pt 18pt 24pt 36pt",
  language: "pt_BR",
  toolbar: ["undo redo | fontselect fontsizeselect | bold italic underline subscript superscript",
    "backcolor forecolor removeformat | editimage imageoptions | bullist numlist table |  alignleft alignjustify aligncenter alignright | searchreplace | save "],
  menubar: false,
  plugins: "table, image, imagetools, searchreplace, lists, media, textcolor, autosave, save, paste",
  content_css: ["<%= asset_url 'tinymce-content.css' %>"],
  media_live_embeds: true,
  branding: false,
  width: "767",
  resize: false,
  media_filter_html: false,
  media_live_embeds: true,
  save_enablewhendirty: true,
  paste_retain_style_properties: "font-size,color,font-family",
  paste_webkit_styles: "font-size,color,font-family",
  save_onsavecallback: showPageCount,
  paste_word_valid_elements:"span,p,b,strong,i,em,h1,h2,h3,h4,h5,h6",  
  extended_valid_elements : "video[controlslist|draggable|controls|id|src|data-id|preload|width|height|data-setup],source[src|type]"

Is there a way to ensure that the empty line also follows the selected font style?

javascriptjquerycsstinymcetinymce-4

Answer №1

When TinyMCE applies fonts, it wraps the selected text with <span> elements that have style attributes. However, if there is an empty line between the text, TinyMCE does not wrap any content around it.

For example, using the code plugin, the following HTML is generated:

<p><span style="font-family: 'comic sans ms', sans-serif;">Test line 1</span></p>
<p>&nbsp;</p>
<p><span style="font-family: 'comic sans ms', sans-serif;">Test line 2</span></p>

In this case, the empty line is shown as a <p> tag and the non-breaking space acts as a placeholder for the cursor. Since these are not considered user-generated content, TinyMCE does not apply font spans to them.

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

Voice input does not refresh search text area

At the moment, my search function utilizes cordova-based voice recognition. Here is the HTML code: <div class="bar bar-header item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-ios-search placeholder-icon"> ...

javascriptangularjscordova

Trouble Aligning Email in Outlook's Center Position

I'm grappling with a persistent issue that has me stumped. Despite my best efforts and numerous attempted fixes, I can't seem to get my email content centered properly in most versions of Outlook and on the iPad Pro. The goal is to achieve proper ...

htmlcsshtml-email

The hierarchical structure in the DOM that mirrors an HTML table

While working on code to navigate the DOM for a table, I encountered an unexpected surprise. The DOM (specifically in FF) did not align with my initial expectations. Upon investigation, it appears that FF has automatically inserted a tbody along with sever ...

javascripthtmldom

Achieving Vertical Alignment of DIV and Text Using Bootstrap 4

After scouring through various questions, articles, and Bootstrap 4 documentation, I have yet to find the solution I am seeking. DEMO: https://jsfiddle.net/zxLLqsm0/ My goal is to create boxes with uniform height for all columns while vertically aligning ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

The browser unexpectedly cancelled the ajax call triggered by the beforeUnload event

Seeking advice on a web application that needs to save user input data through an ajax call when they leave the site. Currently using "Fetch" in a beforeunload event listener, but encountering issues with browsers cancelling the ajax call (specifically th ...

javascriptajaxonbeforeunload

Jquery is incapable of eliminating a div

I have a form where I am dynamically adding actions. Within a table, there are rows of positions that applicants have applied for. When users click on the offer position button, I want to insert offer fields for submission and updating. While I can success ...

javascriptjqueryhtmlcss

A div element floating next to another div element with a width of 100%

My goal is to align a div next to another div whose contents have a width: 100%. Here is the current markup: <div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div> <div id="outer_wrapper" style="position: relative; f ...

htmlcss

Leveraging MongoDB imported documents within DerbyJS

I am facing a challenge with my MongoDB collection which was not saved through my Derby app. My goal is to query that data and pull it into my Derby app. After figuring out the solution, I have written the following code snippet: get '/:year', ...

javascriptnode.jsmongodbderbyjs

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss

Encountering a Mongoose issue while attempting to load model files from a separate Mean.js project using the require function

I am currently working on a Mean.js project and in the process of familiarizing myself with this environment. To conduct some experiments, I created a parallel project for testing purposes in a separate folder where I am not using the Mean.js framework but ...

javascriptnode.jsmongoose

Adjust the color of the text alongside the checkbox

How can I change the text color and content next to a checkbox? <div style="float: left;"> <input type="checkbox" id="idCheckbox1" onClick="myCheckbox('idCheckbox1')" value=1><label>Checkbox 1</label></input>< ...

javascripthtmlcheckboxinputstyles

Avoiding additional empty lines between selectors when setting up Stylelint

Can anyone help me with configuring Stylelint options? Specifically, I want to enforce a rule that no empty lines are allowed between selectors in a list of selectors: &:focus, &:hover, &.active { color: #fb3a5e; text-align: left; text-de ...

cssfrontendstylelint

The chat text will automatically scroll down, displaying information loaded from the database

Is there a way to ensure that chat text always remains scrolled to the bottom of the chat? I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me. Currently, my chat text overflows the textarea when there are too m ...

javascriptjqueryhtmlcssajax

What is the process for storing image data from the front end into a Mongoose database using a Node.js server?

I am currently working on a project that involves a back end using node.js and a front end utilizing jquery, javascript, ajax, and bootstrap. My goal is to allow users to upload an image from the front end and save it to a mongoose database. The image will ...

javascriptjqueryajaxnode.jsmongodb

Arrange an array of objects based on boolean values first, followed by numerical values in JavaScript

I am facing a challenge where I have an array of objects that need to be sorted based on two rules, following a specific order: Firstly, objects with the "departeYet" property set to true should come first. Secondly, the objects must then be sorted numeri ...

javascriptjquerysorting

Shifting the position of personalized tabs using Jquery

I have created some basic HTML/CSS tabs and I want to move to the next tab by clicking a link at the bottom of every tab. HTML <ul class="tabs"> <li class="active"> <a href="#">Explainer (2mins)</a> <div class=" ...

javascriptjqueryhtmlcsstabs

Encountered a problem while trying to fetch over 1000 records from the server using $

When fetching records from a database using JSON in $.ajax and ASP.net, everything runs smoothly. However, if the number of records exceeds 1000, it crashes and displays a "500 (Internal Server Error)" message. Below is the jQuery code: $.ajax({ ...

javascriptjqueryasp.netajaxjson

Setting up Express routes in a separate file from the main one: a step-by-step

My goal is to organize my routes separately from the main app.js file using the following file structure. I attempted to create a api/user/ post API but encountered a 404 error. Any suggestions on how to resolve this issue with the given file structure? . ...

javascriptnode.jsexpressmiddleware

jQuery Form Submit Validation Fails to Trigger Submission

My form has a simple validation check that triggers when submitted to ensure the hidden input field has a value. If the hidden input is empty, an alert is displayed: $("form").submit(function(event) { event.preventDefault(); if ($('#productID&apo ...

javascriptjqueryhtmlforms

Managing the URLs of single page applications

Typically in a Single Page App (SPA), there is usually one main page that contains a side navigation menu with various anchor tags. These anchor tag URLs are managed by the angular/react/sammy js router, and the content of the main section is updated based ...

jqueryangularjsreactjssingle-page-applicationsammy.js