[Presentation] Advanced plugins

[forelabs]

This "Issue" is just to show you what I have done with trumbowyg and if you would like to have some features of it.

Following features shown here:

• content pane bar (incl. sidebar pane)
• indentation
• image floating
• improved image resizer
• image gallery picker

I may create PRs for the tiny plugins, e.g. floating and indentation.
Maybe I will also add the improvements for the image resizer.
But I have no clue what you think about the content pane bar or the image gallery picker,
but as far as I can see the gallery picker is in progress according to #690.

The content pane bar is adjusted to fit our design rules and also includes 1 or 2 addiotional features,
which may not be needed in a plugin version. As you may have noticed the content pane bar is context sensitive. But before I go for a shared plugin version I want to know if the work is worth it, because the plugin is not quite small and you said you want to keep it small (the minified plugin is still 9kb big).

Anyway, thanks for this nice editor, it is a pleassure to create custom plugins for it.

[tomsx]

Good work - looking forward to it!

[Alex-D]

Any update on that?

[forelabs]

I need some more time, sorry. Currently a lot of other stuff to do.

[abozhinov]

Looks great!

[kovalevsky]

Good job! @forelabs could you share it please?

[marceloboemeke]

Wow, that's awesome!

[Alex-D]

Feel free to reopen if there is any update.

I work on v3 now (see #875 for more details). I hope making modules (plugins) should be more easy to do.

[tucuta]

Hi i like this editor.
Where can I download these featured?

[forelabs]

The context bar can be found here:
https://github.com/brandslisten/trumbowyg_rails/tree/master/vendor/assets/javascripts/trumbowyg/vendor/plugins/contextbar

Others are available within the plug-ins folder.
Since this is a public library feel free to use it.

[tucuta]

The context bar can be found here:
https://github.com/brandslisten/trumbowyg_rails/tree/master/vendor/assets/javascripts/trumbowyg/vendor/plugins/contextbar

Others are available within the plug-ins folder.
Since this is a public library feel free to use it.

Thank you.
;-)(y)

[clwilliams8]

I downloaded the JS file and included it in my compiled js like:

// context bar
require('./trumbowyg.contextbar')

Is there anything else I have to do? It's not working, no console errors

[forelabs]

You have to enable / load the Plugin. See general Plugin loading for this.

[alombia]

how do you enable/load the plugin?

[forelabs]

how do you enable/load the plugin?

As you would with any other plugin
https://alex-d.github.io/Trumbowyg/documentation/plugins/

[alombia]

Still cant make it to work. Added the js file as instructed. The documentation simply says to add the js file and that's it.

[forelabs]

Still cant make it to work. Added the js file as instructed. The documentation simply says to add the js file and that's it.

The documentation says you have to name the plugin within the plugins list as well.

$('#my-editor').trumbowyg({
    plugins: {
      contextbar:  { enabled: true }
    }
});

and you can pass options you may want to modify.
Default options are visible in the file.

  var defaultOptions = {
      enabled: false,
      hideBtnPane: false,
      btnPaneBtns: undefined,
      centerBtnPane: false,
      sidePane: false,
      btns: {
        side: ['p','blockquote','h2','h3','h4','internalLink','createLink','upload','insertImage','insertImageFromGallery','justifyLeft','justifyCenter','justifyRight','justifyFull','table','unorderedList','orderedList','outdent','indent','horizontalRule'],
        text: ['p','blockquote','h2','h3','h4','strong','em','underline','createLink','justifyLeft','justifyCenter','justifyRight','justifyFull','unorderedList','orderedList','outdent','indent','preformatted'],
        table: ['tableAddRow','tableAddColumn','tableDeleteRow','tableDeleteColumn','tableDestroy'],
        a: ['editLink','unlink'],
        img: ['editImage','floatleft','floatright','justifyLeft','justifyCenter','justifyRight','deleteImage']
      },
      mapping: {
        td: 'table',
        tr: 'table'
      }
  };

[tsvetelinpetrov]

Any ideas why is that happening? Missing styles or?