Wysiwyg editor: how to add a stylesheet

Clément

Hi,
I would like to add a Google Font in the iframe of the editor (wysiwyg).
I would not like if possible to modify: /plugins/editor/design/wysiwyg.css
Thank you in advance for your help !

x00

@Clément note in editor.js

        // Some communities may want to modify just the styling of the Wysiwyg
        // while editing, so this file will let them.
        var editorWysiwygCSS = gdn.definition('editorWysiwygCSS', '');
        if (editorWysiwygCSS != '') {
            stylesheetsInclude.push(editorWysiwygCSS + '?v=' + editorVersion);
        }

What you need to do is add an additional style sheet in your theme hooks e.g.

$sender->addDefinition('editorWysiwygCSS', '/themes/mytheme/design/editor.css');

it is always worth looking at the code to see what options you have.

x00

@CrazyLemon said:
There is also this

// If user wants to modify styling of Wysiwyg content in editor,
// they can override the styles with this file.
$CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');

in class.editor.plugin.php
But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

You are on the right track put it in themes/YourTheme/design/wysiwyg.css. It works for me.

This will only load in wysiwyg mode, which has the iframe. The other modes don't have the iframe

x00

You understand how style rules work right? You don't edit that file. You style over it.

Clément

Apparently, it is not possible to override the style sheet because it is in an Iframe.

CrazyLemon

I also tried styling of WYSIWYG code and quote blocks to match the site styling but without success. @devs any plans of giving us a way to style the editor without writing into design/editor.css ?

R_J

The only way would be to use JavaScript:
http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe
http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe

x00

@Clément note in editor.js

        // Some communities may want to modify just the styling of the Wysiwyg
        // while editing, so this file will let them.
        var editorWysiwygCSS = gdn.definition('editorWysiwygCSS', '');
        if (editorWysiwygCSS != '') {
            stylesheetsInclude.push(editorWysiwygCSS + '?v=' + editorVersion);
        }

What you need to do is add an additional style sheet in your theme hooks e.g.

$sender->addDefinition('editorWysiwygCSS', '/themes/mytheme/design/editor.css');

it is always worth looking at the code to see what options you have.

CrazyLemon

There is also this

// If user wants to modify styling of Wysiwyg content in editor,
// they can override the styles with this file.
$CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');

in class.editor.plugin.php
But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

Creating a editor.css in your themes design folder will create a mess with editor styling because there will be no editor styling except the one in your editor.css. You can try it yourself, just create an empty editor.css file and check the editor disaster.

hgtonight

@CrazyLemon said:

Creating a editor.css in your themes design folder will create a mess with editor styling because there will be no editor styling except the one in your editor.css. You can try it yourself, just create an empty editor.css file and check the editor disaster.

So... copy the css file from the editor plugin to your theme and change the styles you want.

CrazyLemon

And sync changes every time editor plugin updates?

x00

@CrazyLemon said:
And sync changes every time editor plugin updates?

Use my solution. Therefore you are just over styling.

hgtonight

@CrazyLemon said:
And sync changes every time editor plugin updates?

This is generally trivial with a decent diff program or a modern versioning system.

I agree with @x00, cascade those styles mon!

Clément

I have a little problem with this solution:
base_render_before() in class.themehooks.php is apparently loaded before base_render_before() in EditorPlugin() class

Do you know a hook loaded later ? (for add $sender->addDefinition('editorWysiwygCSS', '...'))

x00

why would this make any difference?

Clément

I want to override the variable "editorWysiwygCSS". If i override this before the module editor, it doesn't work.

CrazyLemon

@x00 said:

@CrazyLemon said:
And sync changes every time editor plugin updates?

Use my solution. Therefore you are just over styling.

Tried it - multiple times. No joy.

$Sender->addDefinition("editorWysiwygCSS", "/themes/vanilla-bootstrap/design/custom_editor.css");

does nothing. If i replace custom_editor with editor.css then the result is messed up editor because of the already mentioned reasons.

x00

Yep you are correct, it is an odd way of handling this.

x00

@CrazyLemon said:
There is also this

// If user wants to modify styling of Wysiwyg content in editor,
// they can override the styles with this file.
$CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');

in class.editor.plugin.php
But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

You are on the right track put it in themes/YourTheme/design/wysiwyg.css. It works for me.

This will only load in wysiwyg mode, which has the iframe. The other modes don't have the iframe

x00

The buttons are outside the iframe. So style them normally.

CrazyLemon

@x00 said:

@CrazyLemon said:
There is also this

// If user wants to modify styling of Wysiwyg content in editor,
// they can override the styles with this file.
$CssInfo = AssetModel::cssPath('wysiwyg.css', 'plugins/editor');

in class.editor.plugin.php
But it does not work for me.. I have created a wysiwyg.css in editor folder but it does not load.

You are on the right track put it in themes/YourTheme/design/wysiwyg.css. It works for me.

This will only load in wysiwyg mode, which has the iframe. The other modes don't have the iframe

Yup this works! @Clément ^
Thanks @x00

Clément

Yes, It works !!!

Thank you @x00 and @CrazyLemon !