Firefox loading default configuration

[sixtyniner-official]

Environment

Ubuntu: 18.04 Chrome: 67.0.3396.79 (Official Build) (64-bit) Firefox: 60.0.2 (64-bit) nginx: nginx/1.14.0

Symfony packages

symfony/monolog-bundle     v2.12.1 v3.3.0 Symfony MonologBundle
symfony/phpunit-bridge     v2.8.41 v4.1.0 Symfony PHPUnit Bridge
symfony/polyfill-apcu      v1.8.0  v1.8.0 Symfony polyfill backporting apcu_* functions to lower PHP versions
symfony/polyfill-ctype     v1.8.0  v1.8.0 Symfony polyfill for ctype functions
symfony/polyfill-intl-icu  v1.8.0  v1.8.0 Symfony polyfill for intl's ICU-related data and classes
symfony/polyfill-mbstring  v1.8.0  v1.8.0 Symfony polyfill for the Mbstring extension
symfony/polyfill-php56     v1.8.0  v1.8.0 Symfony polyfill backporting some PHP 5.6+ features to lower PHP versions
symfony/polyfill-php70     v1.8.0  v1.8.0 Symfony polyfill backporting some PHP 7.0+ features to lower PHP versions
symfony/polyfill-util      v1.8.0  v1.8.0 Symfony utilities for portability of PHP codes
symfony/swiftmailer-bundle v2.6.7  v3.2.2 Symfony SwiftmailerBundle
symfony/symfony            v3.4.11 v4.1.0 The Symfony PHP framework

composer.json

    "autoload": {
        "psr-4": {
            "": "src/"
        },
        "classmap": [
            "app/AppKernel.php",
            "app/AppCache.php"
        ]
    },
    "require": {
        "php":                                  ">=5.6.9",
        "symfony/symfony":                      "3.4.*",
        "symfony/swiftmailer-bundle":           "~2.3",
        "symfony/monolog-bundle":               "~2.4",
        "sensio/distribution-bundle":           "~5.0",
        "sensio/framework-extra-bundle":        "^3.0.2",
        "incenteev/composer-parameter-handler": "~2.0",
        "jms/translation-bundle":               "dev-master",
        "jms/di-extra-bundle":                  "dev-master",
        "twig/extensions":                      "^1.5",
        "twig/twig":                            "^1.35.3",
        "friendsofsymfony/ckeditor-bundle":     "^1.0"
    },
    "require-dev": {
        "sensio/generator-bundle": "~3.0",
        "symfony/phpunit-bridge": "~2.7"
    },
    "scripts": {
        "post-install-cmd": [
            "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::prepareDeploymentTarget"
        ],
        "post-update-cmd": [
            "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile",
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::prepareDeploymentTarget"
        ]
    },
    "config": {
        "bin-dir": "bin"
    },
    "extra": {
        "symfony-app-dir": "app",
        "symfony-web-dir": "web",
        "incenteev-parameters": {
            "file": "app/config/parameters.yml"
        }
    }
}

Subject

CKEditor loading default settings in Firefox

Steps to reproduce

1. Create form:

use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\FormBuilderInterface;

class AboutType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('focus',CKEditorType::class, array(
                'required' => false,
            ));
    }
}

2. print form in template

{% if is_granted('ROLE_ADMIN') == true %}
     {{ form_widget(form.focus) }}
{% else %}
     {{ data.focus | raw }}
{% endif %}

3. Add custom styles and config in config.yaml

fos_ck_editor:
    inline: true
    default_config: my_config
    configs:
        my_config:
            extraPlugins: "templates"
            stylesSet: "my_styles"
            toolbar: "editor"
    styles:
        my_styles:
            - { name: "Ordered List", element: "div", attributes: { class: "ordered-list" }}
            - { name: "Highlight", element: "p", attributes: { class: "highlight" }}
            - { name: "Small Text", element: "p", attributes: { class: "small-text" }}
            - { name: "Color Red", element: "span", attributes: { class: "color1" }}
            - { name: "Color Yellow", element: "span", attributes: { class: "color2" }}
            - { name: "Light Italic", element: "p", attributes: { class: "light italic" }}
            - { name: "Reset Italic", element: "span", attributes: { class: "reset-italic" }}
    toolbars:
        configs:
            editor:
                -
                  - Bold
                  - Italic
                  - Underline
                  - Strike
                  - RemoveFormat
                  - NumberedList
                  - BulletedList
                  - Outdent
                  - Indent
                  - Blockquote
                  - CreateDiv
                  - JustifyLeft
                  - JustifyCenter
                  - JustifyRight
                  - JustifyBlock
                  - Link
                  - Unlink
                  - Image
                  - Table
                  - HorizontalRule
                - /
                -
                  - Styles
                  - Format
                  - Font
                  - FontSize
                  - TextColor
                  - BGColor

Expected results

Chrome loading custom settings for toolbar/styles

Actual results

Firefox loading default CKEditor Settings

There is no any console error.

UPDATE

It's related to JS init timing, if redefine on onload event, then work fine.

for(editorName in CKEDITOR.instances) {

    if (CKEDITOR.instances[editorName]) { CKEDITOR.instances[editorName].destroy(true); delete CKEDITOR.instances[editorName]; }

    if (CKEDITOR.stylesSet.get("my_styles") === null) { CKEDITOR.stylesSet.add("my_styles", [STYLES]); }

    CKEDITOR.inline(editorName, {"extraPlugins":"templates","stylesSet":"my_styles","toolbar":[STYLES]],"language":"en"});
}

[kunicmarko20]

Did you try passing config name when defining form field as explained here:

https://github.com/FriendsOfSymfony/FOSCKEditorBundle/blob/1.x/docs/usage/config.rst#use-a-configuration

[sixtyniner-official]

Thank you for reply, but after testing output is same and the problem still exists in Firefox.

[kunicmarko20]

Just tested with your config and it works for me.

Chrome:

Firefox:

[Koalabaerchen]

Reproducable, but not reliable.

It's a race condition and only happens if you have more than one ckeditor field in the form. Sometimes the config.js is fetched before the ckeditor.js. The ckeditor.js is loaded for each field by default, the config.js only once.

If you remove the autoload and load the ckeditor.js inside the head, it fixes it.

[kunicmarko20]

@mestro67 Is there any chance you can provide a PR that would help with this based on Update section of your issue?