Add plugin support in Trumbowyg editor in reactjs

[Dannybrown2710]

Hi there, can you help me how to import the color plugin for Trumbowyg editor in react js? Thanks in advance

[sochix]

Download the plugin, and import it somewhere before react-trymbowyg

[Dannybrown2710]

But where do I import? trumbowyg is imported as a package but colors plugin wont be available as package?

[Alex-D]

Idk how ReactJS works, but plugins are in the main repository so if you install trumbowyg, you get plugins at the same time. Maybe you just need to expose them?

[ashleydb]

It does work today. It may not look pretty, but it works. For example, I needed to add the tables plugin:

import React from 'react';

import Trumbowyg from 'react-trumbowyg';
// ADD THIS LINE. ADJUST THE BEGINNING OF THE PATH AS NEEDED FOR YOUR PROJECT
import '../../node_modules/trumbowyg/dist/plugins/table/trumbowyg.table';

export default class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                    <Trumbowyg id='react-trumbowyg'
                        buttons={
                            [
                                ['viewHTML'],
                                ['formatting'],
                                'btnGrp-semantic',
                                ['link'],
                                ['insertImage'],
                                'btnGrp-justify',
                                'btnGrp-lists',
                                ['table'], // I ADDED THIS FOR THE TABLE PLUGIN BUTTON
                                ['fullscreen']
                            ]
                        }
                        data={this.props.someData}
                        placeholder='Type your text!'
                        onChange={this.props.someCallback}
                        ref="trumbowyg"
                    />
            </div>
        );
    }
}

[sochix]

Awesome job @ashleydb !

[sahar922]

@ashleydb I copied the same code as you wrote, the table icon does appear but after clicking nothing happened. any suggestions?

[ashleydb]

Hard to say. Code may have changed since last year. Check your JavaScript console in your browser for errors?

[sahar922]

nop. no errors at all :|

[tejash-jl]

nop. no errors at all :| I faced the same issue, when I tried to import the following, it works:

import 'react-trumbowyg/dist/trumbowyg.min.css';
import 'trumbowyg/dist/trumbowyg.js';
import 'trumbowyg/dist/plugins/table/ui/trumbowyg.table.css';
import 'trumbowyg/dist/plugins/table/trumbowyg.table.js';```