trix icon indicating copy to clipboard operation
trix copied to clipboard

Support Tables

Open lokeshsn22 opened this issue 4 years ago • 7 comments

Any Support for html Tables & adding color to the text

lokeshsn22 avatar Jan 13 '21 09:01 lokeshsn22

https://github.com/basecamp/trix/issues/539 When you create an issue, you should check the past issues.

sKawashima avatar Jan 15 '21 03:01 sKawashima

I think it is valid to create a new ticket since #539 is closed.

warnes avatar Apr 16 '21 20:04 warnes

I would also like table support, to use it in Ruby on Rails and because I have needed to use tables in Basecamp and I don't have the possibility. That is quite uncomfortable and annoying, I hope you take it into account and add it, considering that it is a frequent request.

brunoprietog avatar Apr 17 '21 09:04 brunoprietog

I agree. I’d like to use tables to create email templates with Trix. That use-case is quite common and should be considered. I am willing to help if someone wants to start a pull request.

MoskitoHero avatar Jun 10 '21 08:06 MoskitoHero

This is not very clean, but you can cheat the colors with CSS :

    form .row {
        background: white;
        padding: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }

    /* "title" colors */
    .trix-content h1,
    .trix-content blockquote,
    .trix-content pre
    {
        padding: 20px 0 20px 10px;
        font: bold 15px sans-serif !important;
        color: white;
        letter-spacing: 2px;
    }
    .trix-content h1 {
        background: #accf47;
    }
    .trix-content blockquote {
        margin-left: 0;
        border: 0;
        background: #ffc42d;
    }
    .trix-content pre {
        background: #625bc4;
    }
    .trix-content * {
        font: 14px sans-serif !important;
    }

    /* title icons */
    trix-toolbar .trix-button--icon-heading-1::before {
        background-color: #accf47;
    }
    trix-toolbar .trix-button--icon-quote::before {
        background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
        background-color: #ffc42d;
    }
    trix-toolbar .trix-button--icon-code::before {
        background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
        background-color: #625bc4;
    }
    trix-toolbar .trix-button--icon::before {
        opacity: 1;
    }

    /* text colors */
    .trix-content strong {
        color: #008000;
        font-weight: bold;
        font-style: normal;
    }
    .trix-content em {
        color: #ff6600;
        font-weight: bold;
        font-style: normal;
    }
    .trix-content del {
        color: #33cccc;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }

    /* text color icons */
    trix-toolbar .trix-button--icon-bold::before {
        background-color: #008000;
        background-image: none;
    }
    trix-toolbar .trix-button--icon-italic::before {
        background-color: #ff6600;
        background-image: none;
    }
    trix-toolbar .trix-button--icon-strike::before {
        background-color: #33cccc;
        background-image: none;
    }

    /* files */
    .trix-content figure.attachment--file {
        padding: 3px;
        background: #ffdb98;
    }
    .trix-content figure figcaption .attachment__name {
        font-size: 12px !important;
    }
    .trix-content .attachment__size {
        display: none;
    }

    /* hiding img default legend */
    .trix-content figure.attachment--png .attachment__caption:not(.attachment__caption--editing):not(.attachment__caption--edited) {
        display: none;
    }
    .trix-content a {
        color: #3366ff;
    }

(On a side note, CKeditor & TinyMCE have gone on paid (relatively expensive) plans for file uploads. There is no free/libre wysiwyg editor supporting both (non-images) inline file uploads & tables in 2022. Not complaining but anyone feels like IT is going backwards sometimes ?)

d-damien avatar Feb 02 '22 16:02 d-damien

Have you tried https://xdsoft.net/jodit/ or https://tiptap.dev/?

jeremyrimsys avatar May 26 '22 17:05 jeremyrimsys

My bad, there is. https://github.com/alexusmai/laravel-file-manager is compatible with TinyMCE & CKeditor.

d-damien avatar Nov 06 '22 21:11 d-damien