trix
trix copied to clipboard
Support Tables
Any Support for html Tables & adding color to the text
https://github.com/basecamp/trix/issues/539 When you create an issue, you should check the past issues.
I think it is valid to create a new ticket since #539 is closed.
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.
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.
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 ?)
Have you tried https://xdsoft.net/jodit/ or https://tiptap.dev/?
My bad, there is. https://github.com/alexusmai/laravel-file-manager is compatible with TinyMCE & CKeditor.