Enhance the appearance of your HTMLEditorField in SilverStripe 3.2 by customizing its CSS style using

I have configured the HtmlEditorConfig for a Content HTMLEditorField. The issue I am facing is that I have to refresh or reload the browser page in order to see my custom CSS settings...

Here is my code:

HtmlEditorConfig::get('cms')->setOption('content_css', '/themes/simple/css/test'.$this->variable.'.css, /themes/simple/css/typography.css');
$fields->addFieldsToTab("Root.Main", new HTMLEditorField('Content', 'Content'));

My query: Is there a way to automatically refresh the HTMLEditorField to apply the HtmlEditorConfig settings when the page or dataobject loads? I cannot use it in _config.php because my custom HtmlEditorConfig code contains a variable.

cssfieldsilverstripe

Answer №1

I have discovered a solution! I found an alternative method to configure HTMLEditorConfig by incorporating custom variables. It seems that adding variables with HTMLEditorConfig in /mysite/_config.php is not feasible. Additionally, integrating HTMLEditorConfig into the Page class using HTMLEditorField only functions properly after refreshing the URL once.

The key is to extend LeftAndMain with a LeftAndMainExtension. Here is the code for my solution:

/mysite/_config.php

Object::add_extension("LeftAndMain", "HTMLEditorConfigSubsitesInit");

/mysite/code/HTMLEditorConfigSubsitesInit.php

class HTMLEditorConfigSubsitesInit extends LeftAndMainExtension
{
    function init()
    {

        $SiteConfig=SiteConfig::get()->filter('SubsiteID', Subsite::currentSubsiteID())->First();
        $stripedMainFont = str_replace(" ", "-", $SiteConfig->MainFont );

        HtmlEditorConfig::get('cms')->setOption('content_css', '/mysite/css/fonts_'.$stripedMainFont.'.css, /assets/Subsite'.Subsite::currentSubsiteID().'/_customstyles.css, /themes/'.$SiteConfig->Theme.'/css/typography.css');

    }
}

This technique is particularly useful for customizing HTMLEditors and including subsite-specific CSS style files with the Subsites module.

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

Understanding the behavior of Bootstrap input-groups when containing hidden sub elements

In a scenario where a button and an input field are enclosed within a div with a bootstrap class named input-group, they expand to occupy the entire width of the enclosing element. However, if the button is hidden, the input field unexpectedly contracts to ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Analyzing registration details stored in an array against user login credentials

With two buttons available - one for sign up and the other for log in, my goal is to gather input form values from the sign-up section into an array. Following this, I aim to compare the user input from the sign-up with that of the log-in, informing the us ...

javascriptjqueryhtmlcssbootstrap-4

Enhanced Firefox functionality with support for multiple columns

It has come to my attention that Internet Explorer 9 and older versions do not support multiple columns. However, even with the latest version of Firefox, I am experiencing issues with this website loading correctly. Do you have any insight into what might ...

cssfirefoxresponsive-designmultiple-columns

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles. <html> <title>Yellow circles</title> <body> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" ...

htmlcssgoogle-chromefirefoxsvg

What is the process for inserting a scroll bar within a div element?

   I have recently created a webpage using some divs, along with a bit of CSS and JavaScript. I am struggling to figure out how to add a scrollbar to one of my divs. The code is not overly complex, as it includes both CSS and JavaScript. <html> & ...

javascriptjqueryhtmlcss

Tips for avoiding deleting content within a span element when using contenteditable

I am working on an HTML 5 editor that utilizes the contenteditable tag. Inside this tag, I have a span. The issue arises when all text is removed as the span also gets removed. I want to prevent the removal of the span, how can I achieve this? Here is a s ...

javascriptjqueryhtmlcss

Styling will_paginate Links in Rails 3 - A Guide

When it comes to coding layout, how should the link be styled? <a href="#" class="class1 class2 class3"><span>Previous</span></a> <a href="#" class="class1 class2 class3"><span>Next</span> In my search for a solu ...

htmlcssruby-on-rails-3viewwill-paginate

Steps to reveal a hidden div when clicking on another div using CSS exclusively

Is it possible to reveal a hidden div when another div is clicked using only CSS? Below is the HTML code: <div id="contentmenu"> <div class="show"> <a class="show"> My Student ...

htmlcss

applying custom font to select boxes in bootstrap

Trying to style the select option text using a Poppins font with the following class: .poppinsregular14diese00000061 { font-family: Poppins; font-weight: 400; font-size: 14px; color: #00000061; } You can view the implementation in this fi ...

cssbootstrap-4

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...

htmlcssarraysangulartypescript

Expand the range of input movement using a unique and oversized custom thumb graphic

In my project, I am creating a personalized input range feature by utilizing a 40px x 80px image as the background for the thumb. Typically, the thumb is limited to moving within the length of the track from edge to edge. However, I am aiming for the thu ...

htmlcss

Incorporate Bootstrap styling into a layout featuring a row containing numerous input fields

I need some help with styling using bootstrap 5. I have set up a codepen for reference: https://codepen.io/korazy/pen/xxmWGOx Here are the issues I am facing: The input height changes to match the row height when text wraps. How can I keep the input at ...

htmlcsstwitter-bootstrapuser-interfacebootstrap-5

What is the best way to ensure the image and card maintain the same size ratio in React Bootstrap?

One of the challenges I encountered involved a vertically aligned card group containing a card with an image: https://i.stack.imgur.com/w9Jkf.jpg This is the React code snippet that was causing the issue: import React from 'react'; import { ...

cssreactjsbootstrap-4

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

My website requires adjusting element positioning based on specific resolutions. One example is this media query: @media all and (max-width: 385px) And another one: @media all and (max-width: 500px) The device I am using has a width below 385px, but i ...

cssmedia-queries

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

javascripthtmlcsscollision-detection

Tips for ensuring consistent display of UTF-8 arrow characters across different web browsers

Is there a way to ensure consistent display of UTF-8 arrow characters across all browsers? I have experimented with various font sizes like px and pt, as well as using HTML Entity codes (e.g. &#9664;) but unfortunately the arrows still show difference ...

htmlcssutf-8

Conceal an element from view upon clicking on it

Task at Hand : Implement a smooth element hiding effect upon clicking, similar to the behavior on this website , where the letter A fades away smoothly when clicked. Is it possible to achieve this effect using only HTML, CSS, and JavaScript? var t ...

javascripthtmlcssanimationhide

Issue with FlexSlider 2 and thumbnail slider: Previous and Next buttons not functioning for main image

I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even cl ...

javascripthtmlcsscarouselflexslider

Why doesn't the Kellum method for CSS image replacement work with button elements?

Recently, I discovered that the kellum method doesn't work as effectively with HTML button elements. Specifically, it does work but requires additional text indent. To sum it up, here is the technique: text-indent: 100%; white-space: nowrap; overflow ...

htmlcssimage-replacement

What is the best way to style the first child element that does not contain a specific class?

If I have the following HTML code snippet: <ul id="some_list"> <li class="hide">Do Not Target This</li> <li class="hide">Do Not Target This</li> <li>Target This</li> <li>Do Not Target This< ...

htmlcsscss-selectors