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

Its not possible to make part of H1 non-bold

Quick answerby 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:open newsletter demo at https://grapesjs.com/demo-newsletter-editor.htmlclean the canvasdrop "Text Section"select any word within H1, e.g. word "title"press Bold modifier once or twice 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:

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-...

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.