Just as info, I make a small mistake (but still working) in the settings for JCE. I was at the same time in discussion with Ryan from JCE to clarify how to setup JCE to have a WYSIWYG view (with Awesome fonts) when in the editor window with templates using the new Joomla “Child Templates” like Astroid.

This is the way to set JCE Editor to have a WYSIWYG —————————————————————

When you update with Astroid Framework/Templates 2.6.0 UP (with the “Child Templates” ability)

• Move the JCE custom css file “e.g. editor_content.css” (or the name that you choose for it) normally in the Joomlaroot > templates > name_of_your_template > css folder to the Joomlaroot > media > templates > site > name_of_your_template > css folder

• Before that move, If you want to see the Awesome icons in your Editor. you should change any call for the Astroid local Awesome library from
@import "../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";
to
@import "../../../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";

The configuration for JCE should be:
• JCE Global Configuration

• JCE Editor > Profil in use > Editor Parameters > Typography > Editor Style
— Put Editor Styles to “Add”

— There, also change the Custom editor CSS file(s) path from

to the New Path

media/templates/site/$template/css/editor_content.css

@sonvnn (You can use that in the Astroid Tutorials)

————————————————————————————————
Note If you want to see your custom fonts in your editor for a better WYSIWYG
Normally I use my custom scss to load my own custom fonts and bypass Astroid fonts settings. My trick is to put my custom fonts files in a folder inside my created “font” folder in the Joomlaroot > media > templates > site > name_of_your_template folder. By putting the fonts files in a folder the Astroid system doesn't see these fonts as possible “Custom Fonts” and not loading them.
The custom fonts are loaded by my custom.scss file by that type of calls:

///* Source-sans-pro 400 - regular - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/sourcesanspro/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/sourcesanspro/source-sans-pro-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

That way the custom fonts are loaded in the website frontend and also in JCE editor because the fonts calls become parts of the compiled css that are pickup by JCE (with the settings above).

The following have to be tested, but logically should work...
If somebody want to use the Astroid Framework Typography control and also see their custom fonts in the JCE Editor, they should put the custom fonts files loose in the “fonts” folder where Astroid Template Manager can use them as “Custom Font” and add the fonts calls to the custom JCE Editor CSS file(s) e.g. editor_content.css

• My only question here is if the editor_content.css is in the Joomlaroot > media > templates > site > name_of_your_template > css folder, if this setup will not load the custom fonts 2 times, one with the Astroid Custom Fonts Management and another time with the editor_content.css file ?
Not sure here. I will test and come back, because I realize that the same “double load” can also happen with the Awesome call in editor_content.css file.
If it so, maybe we can move the editor_content.css in a neutral place in Joomla where it is not pickup by the systems but still accessible by modifying the path to it in JCE Configuration.
I test that and come back.

Uh oh!

JCE icones + fontawesome with Astroid 2.6.3 #263

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions