Issue #2878💬 AnsweredOpened July 6, 2020by fedulovivan0 reactions

Its not possible to make part of H1 non-bold

快速解答by robsonsobral

This looks like a flaw of logic to me. <Hn> elements aren't bold, but titles. As you mentioned, even the browser native execCommand, used on built-in editor, doesn't know what to do. @fedulovivan, do you have a suggestion of a possible HTML markup for the situation?

Read full answer below ↓

Question

Steps:

Expected:

  • Selected text became non-bold

Actual:

  • Text remains bold

Those steps above are for CKE editor, which is now enabled on newsletter demo.

For built-in editor behaviour is a bit different: Selected word is changing its style to non-bold while the editing is activated. Generated html is also contains correct styles. But canvas renders it as bold again, once editing of H1 is finished.

See demo: making-non-bold-title

Answers (3)

robsonsobralJuly 7, 2020

This looks like a flaw of logic to me. <Hn> elements aren't bold, but titles. As you mentioned, even the browser native execCommand, used on built-in editor, doesn't know what to do.

@fedulovivan, do you have a suggestion of a possible HTML markup for the situation?

fedulovivanJuly 8, 2020

Hi, @robsonsobral An html, generated by built-in RTE is correct: Original: <h1>Insert title here</h1> After making word "title" non-bold: <h1>Insert <span style="font-weight: normal">title</span> here</h1>

The problem is it's not rendered properly on the canvas. The whole text remains bold.

robsonsobralJuly 10, 2020

I dig a little into this. After the blur event, the markup changes from <span style="font-weight: normal">title</span> to <span data-gjs-type="default"><span data-gjs-type="text">title </span></span>. If I try again, it becomes <span data-gjs-type="default"><span data-gjs-type="default"><span data-gjs-type="text">title </span></span></span>.

It's hard to have a simple, but functional built-in editor other than markdown.

I couldn't reproduce the error on the newsletter demo. It worked fine.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.