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

Hover Effects on Facebook Tabs

I am currently facing an issue with implementing CSS-sprite for image-based rollovers within a Facebook Tab page. Strangely, the background images are getting removed by Facebook only when inside a Tab page and not in the main application itself. It seems ...

Issues with Ul List Alignment (CSS and HTML)

<div class="companies"> <ul class="logos"> <li><img src="images/image1.png" alt="" height="25px" /></li> <li><img src="images/image2.png" alt="" height="25px" /></li> <li> ...

Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks: https://i.stack.imgur.com ...

Utilizing an unknown provider in AngularJS constants: a guide

Can anyone help me figure out what's going on with this code snippet? var app = angular.module('myApp', []); app.constant('_START_REQUEST_', '_START_REQUEST_'); app.constant('_END_REQUEST_&ap ...

Steps for accessing the files uploaded in a React application

Looking to implement an upload button using material UI that allows users to upload multiple files, with the goal of saving their paths into an array for future use. However, I'm unsure about where these uploaded files are stored. The code snippet be ...

The result of Document.getElementById can show as "undefined" despite the presence of the element

Currently, I am tackling a project that involves extracting information from a website. I have opted to use the 'puppeteer' library in Node.Js for this task. However, I am encountering an issue where Document.getElementById is returning "undefine ...

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

CSS file not loading in an ExpressJS application

I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...

Utilizing jQuery for asynchronous image uploading

Just started learning jQuery and I'm having trouble uploading a jpg image file using the ajax method. It seems like it's not working properly. Can anyone guide me through this process? HTML <form action="" method="POST" enctype="multipart/fo ...

You cannot access the property 'subscribe' on a void type in Angular 2

fetchNews(newsCategory : any){ this.storage.get("USER_INFO").then(result =>{ this.storage.get("sessionkey").then(tempSessionKey =>{ this.email = JSON.parse(result).email; this.newSessionKey = tempSessionKey; this.authKey =JSON.stringify("Basic ...

AngularJS - Custom directive to extract a property value from an object

Currently, I am using the following for loop to retrieve the parent category: angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); I am looking fo ...

Utilize React JS to dynamically render JSON array of images onto a JSX page in React

state = { products: [ { img: "'./images/heartstud.jpg'", name: "Heart Earrings", price: "1.99", total: "3.98", count: 2, description: "Yellow Chimes Crystals from Classic Designer Gold Plated Styl ...

Monitor modifications to an <input type="text"> element as its value is updated dynamically through JQuery from the server side

I am struggling with detecting when the value of an input field changes after it has been set by clicking a button. I have tried various events but can't seem to find the right one. <!DOCTYPE html> <html> <head> <script src=" ...

Attach [!hidden] to a dropdown menu choice using Angular 2

How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}< ...

Unable to store cookie using jQuery on Internet Explorer 9

Having trouble setting a cookie on IE9 and can't figure out why. My objective is to create a cookie that expires after a year, using the code below: $.cookie( name, value, { expires:days } ) where days equals 365. However, the cookie disappears as s ...

Utilize AJAX JQuery to Transmit POST Data

I am facing an issue with sending the selected item from a Bootstrap dropdown to my controller using the POST method. Unfortunately, I am encountering difficulties in getting it to work. Within the dropdown, I am fetching records from the database and dis ...

Issue: Attempting to access the `userName` property on an undefined object (`tem`), resulting in a TypeError while using flalist

A concern has arisen with the React Native Flatlist as it fails to render properly. What steps should be taken in this scenario? Below is the code snippet for reference: Image description available here import React, {useState, useEffect} from 'react ...

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...