Jump to content
  • 0

Set CSS inside Text Area that has HTML editor


JohnM

Question

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!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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
 

Link to comment
Share on other sites

  • 0

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

 

Link to comment
Share on other sites

  • 0
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);
});
Link to comment
Share on other sites

  • 0

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

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.

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

Loading...
×
×
  • Create New...