Forums

Redactor font family

Permalink 1 user found helpful
The goal is to add more fonts to the fontfamily.js.
I added the plugin in a redactor placed on a dashboard single page in a package.
$('#textarea').redactor({
            ...,
            plugins: ['fontfamily']
        });

This works as expected.
Now I want to add more fonts to this dropdown. To achieve this I copied the 
fontfamily.js
from 
/concrete/js/build/vendor/redactor/fontfamily.js
to 
/packages/package_handle/js/build/vendor/redactor/fontfamily.js
and added some fonts to the fonts-variable like so:

...
init: function ()
         {
            var fonts = [ 'Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace', 'Ubuntu' , 'Other-Fonts'];
...
But no luck.
Even if I add fonts directly to the core file, just for testing 
/concrete/js/build/vendor/redactor/fontfamily.js
it does nothing. Cache cleared. Cache settings are for development (everything off)
So, what am I missing?

UPDATE:
I register the js file in the package controllers on_start method like so (along with others which are working fine):
... $al->register(
            'javascript', 'fontfamily', 'js/build/vendor/redactor/fontfamily.js', array('position' => \Asset::ASSET_POSITION_FOOTER), $pkg
        );
and in the single page controllers on_start method:
$this->requireAsset('javascript', 'fontfamily');
but it's still the same...

UPDATE II:
It seems that my fontfamily.js is loaded before the core-redactor.js in the DOM. So How to include it afterwoods?
daenu
 
daenu replied on at Permalink Best Answer Reply
daenu
So here it is.
1. Rename the js file to something unique, like myfonts.js
2. Register it in the package controllers on_start method:
...
        $al->register(
            'javascript', 'myfonts', 'js/build/vendor/redactor/myfonts.js', array('local' => true, 'position' => \Asset::ASSET_POSITION_FOOTER), $pkg
        );
...
        $al->registerGroup('myfonts', array(
            array('javascript', 'myfonts'),
        ));
...
        $plugin = new Plugin();
        $plugin->setKey('myfonts');
        $plugin->setName('myfonts');
        $plugin->requireAsset('myfonts');
        \Core::make('editor')->getPluginManager()->register($plugin);
...

3. In the single page controllers on_start method, require the asset like any other:
...
$this->requireAsset('javascript', 'myfonts');
...

4. On the desired single page, call the plugin like so:
$editor = Core::make('editor');
$editor->getPluginManager()->select('myfonts');
and the editor like so:
print $editor->outputStandardEditor('element_id_name', 'Content');

That's it! Don't forget to empty cache and reinstall the package.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Daenu,

Are you open to creating a How-To based on your solution?
daenu replied on at Permalink Reply
daenu
Hi MrKDilkington

(Nice name btw)
Good idea! I will do
daenu replied on at Permalink Reply
daenu
@MrKDilkington
Done! It just needs to be approved
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Daenu

That is excellent.

Hopefully you've been bitten with the How-To/tutorial bug and want to write more.