Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CodeMirror Editor Button for the Gallery #21

Open
lisandi opened this issue Oct 24, 2021 · 2 comments
Open

CodeMirror Editor Button for the Gallery #21

lisandi opened this issue Oct 24, 2021 · 2 comments

Comments

@lisandi
Copy link

lisandi commented Oct 24, 2021

For usability, it would be great if a button could be added to the editor menu which enters the shortcode markers

[gallery lastRow=justify]
[/gallery]

to the text where the shortcode should get inserted and placing the cursor just behind "...justify]Cursor". That way there won't be an empty line to start the gallery and the "lastRow=justify" as standard guarantees that the gallery is always in a nice looking format no matter what image formats had been inserted.

It would make the gallery plugin much more usable and would limit typing errors.

@sal0max
Copy link
Owner

sal0max commented Oct 28, 2021

Thanks for the suggestion.

However, you need to help me out here, a little.
I've never heard of a tool named CodeMirror with Grav, and googling doesn't help a lot, neither.
I guess you're talking about adding a button to the WYSIWYG editor of the Grav Admin Panel. In that case you have to give me some hint, how to add buttons there.

As for the lastRow=justify thing:
You can set justify as default behavior for this plugin in the gallery settings. No need to always use it as shortcode.

@beamaria
Copy link

beamaria commented Feb 2, 2022

HI! I think you could add an editor button using the already existing "Editor buttons" plugin
I was able to customise it adding a "Justify" option for the text-
Path: admin folder/buttons folder/insert-shortcodes folder/js folder/shortcodes-core.js
in js file I added this chunk of code:

{
                            'shortcodes-alignjustify': {
                                identifier: 'shortcodes-alignjustify',
                                title: 'AlignJustify',
                                label: '<i class="fa fa-fw fa-align-justify"></i>',
                                modes: ['gfm', 'markdown'],
                                action: function(_ref) {
                                    var codemirror = _ref.codemirror, button = _ref.button;
                                    button.on('click.editor.shortcodes-alignjustify', function() {
                                        Instance.buttonStrategies.replaceSelections({ token: '$1', template: '[justify]$1[/justify]', codemirror: codemirror});
                                       codemirror.focus();
                                    });
                                }
                            }
                        },

Hope it works for adding the gallery button too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants