basecamp / trix

A rich text editor for everyday writing
https://trix-editor.org/
MIT License
19.01k stars 1.11k forks source link

Support Tables #872

Open lokeshsn22 opened 3 years ago

lokeshsn22 commented 3 years ago

Any Support for html Tables & adding color to the text

sKawashima commented 3 years ago

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

warnes commented 3 years ago

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

brunoprietog commented 3 years ago

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.

MoskitoHero commented 3 years ago

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.

d-damien commented 2 years ago

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 ?)

jeremyrimsys commented 2 years ago

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

d-damien commented 1 year ago

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