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);
});

[ChrisCarlson]

I am using this one-line of code to set font size in Rich Text Editor text areas - I found it in CKEditor documentation:

<script>  CKEDITOR.addCss(".cke_editable { font-size: 18px!Important; }"); </script>

It works great on datapage submission forms, but when using it in a tabular report > details update page I run into this issue:

- On the first time the tabular report is loaded and details update form is loaded, it does not work.

- It then works on subsequent times when loading the details update page.

What is causing it to fail on the initial load? I tried wrapping it in a time delay script but that did not work. I suspect it has to do with AJAX loading.

Does anyone have any ideas how I could fix it? I tried the solutions above but could not get those to work for a tabular report > details update page (with responsive disabled).