Customize CKEditor by automatically changing the font family when the page is loaded

How can I change the font-family of CKEditor to Meiryo based on a JavaScript boolean?

I attempted this code in my custom JS within an if condition, but it did not successfully change the font-family:

config.font_style =
{
    element     : 'span',
    styles      : { 'font-family' : '#Meiryo' },
    overrides   : [ { element : 'font', attributes : { 'face' : null } } ]
};

I also tried adding the following in my custom script:

config.font_defaultLabel = 'Meiryo';
config.fontSize_defaultLabel = '12px'; 

Unfortunately, neither of these methods worked. Can someone assist me in identifying what I may be doing incorrectly?

Thank you for your help!

Answer №1

The correct code snippet is provided below:

config.font_style =
    {
        element     : 'span',
        styles      : { 'font-family' : '#(Meiryo)' },
        overrides   : [ { element : 'font', attributes : { 'face' : null } } ]
    };

Instead of:

config.font_style =
{
    element     : 'span',
    styles      : { 'font-family' : '#Meiryo' },
    overrides   : [ { element : 'font', attributes : { 'face' : null } } ]
};

All accepted font names are as follows:

145 CKEDITOR.config.font_names =
146     'Arial/Arial, Helvetica, sans-serif;' +
147     'Comic Sans MS/Comic Sans MS, cursive;' +
148     'Courier New/Courier New, Courier, monospace;' +
149     'Georgia/Georgia, serif;' +
150     'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
151     'Tahoma/Tahoma, Geneva, sans-serif;' +
152     'Times New Roman/Times New Roman, Times, serif;' +
153     'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
154     'Verdana/Verdana, Geneva, sans-serif';

Source:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Running a Node.js script on an Express.js server using an HTML button

I've got an HTML button: <button id="save" type="button" onclick="save()">Save</button> and in my JavaScript code, I want it to execute something on the server side using node.js Here's what I have in mind: function save() { / ...

Guide on integrating a jQuery method for validating a value using regular expressions

I'm currently using the Jquery validation plugin to validate form fields. One of the fields I am validating is for academic years, which should be in the format of 2013-2014. To achieve this validation, I have created a custom Jquery method as shown b ...

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

Is there a way to format the text for "Guest signed up" and "Guests attended" in bold while keeping the values normal? Here is my current code: <li class="list-group-item">Guests signed up: <%= guestSignups %></li> < ...

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

Creating a dynamic dropdown menu to display nested arrays in Vuejs

I have some important data Challenge I'm facing difficulty in accessing the tubes array within my data Solution script data() { return { types: [] } }, methods: { handleChange ...

Modify the color of the components in Select from Material-UI

After reviewing numerous questions and answers on this topic, I have yet to find a suitable solution for my issue. Seeking guidance from the community for assistance. Utilizing the Select component from @mui/material to showcase the number of records per ...

Can you explain the conflict between using float and setting the height to 100% for divs?

Check out the following HTML code example: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> html, body { padding: 0; m ...

Creating a line break in a Vue.js confirmation dialog is a helpful feature that can be achieved with a

Is there a way to add a new line after the confirmation dialog question and insert a note below it? this.$dialog.confirm("Create Group","Would you like to create group "+ this.groupName +"?<br/>(NOTE: Selected project or empl ...

Encountered an error while attempting to complete the 'send' action with 'XMLHttpRequest'

I am currently developing a Cordova application that makes use of ajax. Everything works perfectly during debugging, but once I build the release version, I encounter this error: {"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute &ap ...

the function fails to run upon clicking the button again

Here is the current function in use: function beTruthful() { if (document.getElementById("about").style.opacity = "0") { document.getElementById("about").style.opacity = "1"; } else { document.getElementById("about").style.opacity ...

D3.js: Exploring the beauty of layered legends

I have a question regarding creating legends with triangle shapes. Specifically, I am trying to create two triangles representing "Yes" and "No". However, when I run the code below, the triangles end up overlapping each other. In an attempt to separate t ...

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Here is the code snippet I am using to manage login, logout, user retrieval, and token setting for all axios requests as an auth header. While this code works perfectly during client-side rendering - such as logging in, storing the token in cookies, etc. ...

EJS: Is there a way to display multiple populated collections from mongoose in EJS file?

Having trouble rendering multiple populated collections from mongoDB in EJS. To provide more context, I'll share snippets of my code: models, routes, and views. Model Schema var mongoose = require("mongoose"); var playerSchema = mongoose.Schema({ ...

Should position: absolute; be utilized in asp.net development?

I am just starting out in web development Would it be a good idea to utilize position: absolute; for controls? If not, can you explain why? ...

Building a bespoke search input for the DataTables JQuery extension

As the title indicates, I am in the process of developing a custom search box for the DataTables JQuery plugin. The default options do not suit my needs, and configuring the DOM is also not ideal as I aim to integrate it within a table row for display purp ...

Error in Redux app: Attempting to access the 'filter' property of an undefined value

I am currently encountering an issue with my reducer: https://i.stack.imgur.com/7xiHJ.jpg Regarding the props actual, this represents the time of airplane departure or arrival, and it is a property within my API. The API structure looks like this: {"body ...

Mastering Meteor: Techniques for Manipulating Mongodb Data in Real Time Display

Within my Meteor application, I have accomplished the successful publication of data from the server and its subscription on the client side. Instead of directly displaying raw data on the client's screen, I am interested in performing some calculatio ...

Trigger a function in JavaScript by clicking on an element and passing its class

I have written the following code: <?php $extCount = 0; foreach($this->externalReferal as $externalReferal) { $extCount++; ?> <div class='fieldtestPct' > <div class='fieldItemLabel'> < ...