Wysiwyg

[Tom7116]

I'm using Sylius 1.10

In the Sylius store, there are screens of this plugin with a Wysiwyg field :

https://store.sylius.com/products/cms-by-bitbag

But after installation (and even for the demo version) it is a raw text field :

https://sylius-demo.bitbag.io/admin/pages/33120/edit

All of my config is set with the CKEditor.

Thank you in advance for your time.

[em411]

Have you tried bin/console ckeditor:install yet?

[Tom7116]

Have you tried bin/console ckeditor:install yet?

Yes i have

[roromix]

I have same problem. Page Content field is blank

[Harvel218]

Hi guys, for the plugin to work, you need to have custom plugin resources installed (made by the developers, you can read about the ways to do it in different versions in the instalation files), and you also need to install CKEditor. To install CKEditor, you need to run (from the test/application level or the project's main directory, if it is not the plug-in development environment) bin/console ckeditor:install and after that do bin/console assets:install

You may also encounter plug-ins not working properly if you use Sylius themes. If you are still struggling with this problem, I will need more information about your issues. (console bugs or your step-by-step guide to what you did)

[gigabites19]

If you're running Sylius in a docker container and using nginx make sure to mount public/bundles directory and then run bin/console assets:install. also add a location directive in nginx, otherwise it won't be able to resolve those symlinks.

location /bundles/ {
    root /path/to/sylius/public;
}

[jakubtobiasz]

Hi @Tom7116 🙋🏻‍♂️.

Do you have any further problems with WYSIWYG editor?

[oliver-schulz]

This problem took me some time to figure it out but its pretty easy to reproduce.

To reproduce this issue:

1. Select any Theme for your Channel
2. CKEditor stops working

Also check the console output of your browser, for better understanding whats going on.

Caused by Sylius\Bundle\ThemeBundle\Asset\Package\PathPackage::getUrl()

The Problem here, the ThemeContext is always loaded, also in AdminPanel. The CKEditorRenderer is called by the twig extension and this extension always calls FOS\CKEditorBundle\Renderer\CKEditorRenderer::fixPath() which tries to load the asses from framework.assets.

Don't know who has or can fix this issue, i don't know if it's necessary to load the default channel and its theme always in AdminPanel. A simple solution could be to check if PathPackage is called in AdminContext or at least to check if the returned path does exist.

As a workaround i changed my fos_ck_editor config to:

fos_ck_editor:
    base_path: "//bundles/fosckeditor"
    js_path:   "//bundles/fosckeditor/ckeditor.js"

    default_config: bitbag_sylius_cms_plugin
    configs:
        bitbag_sylius_cms_plugin:
            toolbar: standard
            enterMode: 3
            forcePasteAsPlainText: 'allow-word'
            allowedContent: true
            extraPlugins:
                - 'mediaVideo'
                - 'mediaImage'
    plugins:
        mediaVideo:
            path: '//bundles/bitbagsyliuscmsplugin/js/ckeditor-plugins/video/'
            filename: 'plugin.js'
        mediaImage:
            path: '//bundles/bitbagsyliuscmsplugin/js/ckeditor-plugins/image/'
            filename: 'plugin.js'

The "trick" here is to prepend the paths with // which bypasses the PathPackage::getUrl() which now does not rewirte the path url.

The last thing i did was to overwrite the default ckeditor_widget.html.twig by creating my own at templates/bundles/FOSCKEditor/views/Form/ckeditor_widget.html.twig

<script type="text/javascript">
            var CKEDITOR_BASEPATH = "{{ ckeditor_base_path(base_path)|replace({'//': '/'}) }}";
        </script>
<script type="text/javascript" src="{{ ckeditor_js_path(js_path)|replace({'//': '/'}) }}"></script>

and

{% for plugin_name, plugin in plugins %}
            CKEDITOR.plugins.addExternal("{{ plugin_name }}", "{{ plugin.path|replace({'//': '/'}) }}", "{{ plugin.filename }}")
{% endfor %}

Basically i replaced the leading // back to / by adding replace({'//': '/'}) to all paths.

EDIT: If you are Using a Theme try bin/console sylius:theme:assets:install first to copy all the data to the needed Location (also missing at the bitbag demo admin site.)

[extrablind]

Hi,

Same issue here, but found a different workaround corresponding to same idea as @oliver-schulz.

Sylius : 1.11 Symfony : 5.4.6 Using webpack config with bootstrap theme and child theme.

Override default template for FosCkEditor templates/bundles/FOSCKEditor/views/Form/ckeditor_widget.html.twig

//  Around line 17, adding a slash at the end of the path.
        <script type="text/javascript">
            var CKEDITOR_BASEPATH = "{{ ckeditor_base_path(base_path) }}/";
        </script>

// Around line 40, concatenate string to avoid auto added query string between path and filename (?M199  => is it versionning from ckeditor ? It seems to be added in core ckeditor file) I know this is ugly...
            {% for plugin_name, plugin in plugins %}
                {% set plugin = {
                    path : plugin.path ~ '/plugin.js',
                    filename : ""
                } %}

                {{ ckeditor_plugin(plugin_name, plugin) }}
            {% endfor %} 

You can also add some extra config before this for loop , as example :

     // Style inside editor with real css from your shop
            CKEDITOR.config.contentsCss = [
                '/build/shop/app.css',
                '/design/wysiwig/content-override.css'
            ] ;
         // Add extra plugin for syntax highlight, see : https://ckeditor.com/cke4/addon/codemirror
            CKEDITOR.config.syntaxhighlight_lang = 'html'; // default null
            CKEDITOR.config.codemirror = {
                theme: 'ayu-dark'
            };

Don't forget to global route constant in order for ckeditor CMS plugins to work (media and video select modals):

// templates/bundles/SyliusAdminBundle/_scripts.html.twig
<script>
const route = "{{ path('bitbag_sylius_cms_plugin_admin_ajax_media_by_name_phrase')|escape('js') }}";
</script>

Good luck ;)

[stefandoorn]

@extrablind Thanks for sharing, your solution works!

[damonsson]

Thank you, for your solutions, I'll pin this topic close to documentation about Wysywig