Set CSS inside Text Area that has HTML editor

[JohnM]

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?

Thanks!

[Volomeister]

Hi John!

Here is a soluition that might work.

<script>
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
return;
}
else {
window.clearInterval(interval);
let iframeDocument = document.querySelector("iframe").contentDocument;
iframeDocument.querySelector('body').style  = 'font-size: 3rem; color: blue;' // just configure selector and style to your needs

}

}, 300)


})

</script>

Let me know if it solves your issue
 

[telly]

Hi @JohnM,


I was able to change the font using the tool type "Advanced":







Hope this helps!

[JohnM]

Thanks @Volomeister. That is just what I needed!

@telly, this won’t work in my case, since I don’t want to give users the ability to change font.

Thanks!

[JohnM]

@Volomeister, how can I use a Google font? How and where would I inject the <link>?

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

 

[Volomeister]

Hi!
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;'

 

[JohnM]

That works! Thanks!

[futurist]

On 4/11/2022 at 6:14 AM, Volomeister said:

Hi John!

Here is a soluition that might work.

<script>
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
return;
}
else {
window.clearInterval(interval);
let iframeDocument = document.querySelector("iframe").contentDocument;
iframeDocument.querySelector('body').style  = 'font-size: 3rem; color: blue;' // just configure selector and style to your needs

}

}, 300)


})

</script>

Let me know if it solves your issue
 

Hi, sharing in here a script that I found that allows you to check if an element exists (followed by your code if that element in fact exists) instead of using a timer (setInterval):

 

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

 

 

 

 

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});