Jump to content
  • 0

Set CSS inside Text Area that has HTML editor



It does not seem possible to change the font inside a Text Area that uses the cke editor.

Is that right?

Setting .cke-editable in the Style CSS has no effect, I presume because the editor is in an iFrame. 

Any way to change the font in there? Maybe using JavaScript?


Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Hi John!

Here is a soluition that might work.

document.addEventListener('DataPageReady', _=> {

let interval = window.setInterval(  _=> { // using interval function, because right after data page is loaded, iframe is not available yet
if(document.querySelector("iframe") == null) { // if you have more than 1 iframe, you would need to use more specific selector
else {
let iframeDocument = document.querySelector("iframe").contentDocument;
iframeDocument.querySelector('body').style  = 'font-size: 3rem; color: blue;' // just configure selector and style to your needs


}, 300)



Let me know if it solves your issue

Link to comment
Share on other sites

  • 0

You can add next line of code inside else:

iframeDocument.querySelector('head').insertAdjacentHTML('beforeend', `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">`)

But then, you would need to explicitly say which element(s) on the page should use this font, by defining 'font-familiy' CSS property, e.g.:

iframeDocument.querySelector('body').style  = 'font-family: "Open Sans"; font-size: 3rem; color: blue;'


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...