A color picker 100% functional !
See original GitHub issueEDIT: if you are using Trix 2.0+ read the tutorial but instead of using this stimulus_controller, please use the stimulus_controller here: https://github.com/basecamp/trix/issues/985#issuecomment-1307422240
After a good time of reading issues and thinking I finally could create a fully functional color picker for Trix
This also works when reloading the editor page because I call reset after the config.
I also added text-align center icon to center blocks
For this to work, just wrap your rich_text_area in a div with data-controller="trix" and add a data: { trix_target: 'editor' } to the rich_text_area
<div class="control" data-controller="trix">
<%= f.rich_text_area :description, placeholder: t('products.edit.description_placeholder'),
data: { trix_target: 'editor' } %>
</div>
Also add a stimulus controller called trix-controller.js and then update the stimulus manifest
update the Stimulus manifest with ./bin/rails stimulus:manifest:update
import { Controller } from '@hotwired/stimulus'
import Trix from 'trix'
// Connects to data-controller="trix"
export default class extends Controller {
static targets = ['editor', 'foregroundColorPicker', 'backgroundColorPicker']
connect () {
this.initTrix()
this.reloadOriginalContent()
}
initTrix () {
if (this.hasForegroundColorPickerTarget) { return }
Trix.config.blockAttributes.heading1.tagName = 'h3'
this.addForegroundButtonInToolbar()
this.addBackgroundButtonInToolbar()
this.addTextAlignCenterButtonInToolbar()
}
reloadOriginalContent () {
this.editorTarget.reset()
}
openForegroundColorPicker () {
this.foregroundColorPickerTarget.click()
}
openBackgroundColorPicker () {
this.backgroundColorPickerTarget.click()
}
foregroundColorChanged () {
this.editorTarget.editor.activateAttribute('foregroundColor', this.foregroundColorPickerTarget.value)
}
backgroundColorChanged () {
this.editorTarget.editor.activateAttribute('backgroundColor', this.backgroundColorPickerTarget.value)
}
addForegroundButtonInToolbar () {
Trix.config.textAttributes.foregroundColor = {
styleProperty: 'color',
inheritable: true
}
this.element
.querySelector('.trix-button-group.trix-button-group--text-tools')
.insertAdjacentHTML('beforeend', this.foregroundColorButtons)
}
addBackgroundButtonInToolbar () {
Trix.config.textAttributes.backgroundColor = {
styleProperty: 'backgroundColor',
inheritable: true
}
this.element
.querySelector('.trix-button-group.trix-button-group--text-tools')
.insertAdjacentHTML('beforeend', this.backgroundColorButtons)
}
addTextAlignCenterButtonInToolbar () {
Trix.config.blockAttributes.textAlignCenter = {
tagName: 'centered-div'
}
this.element
.querySelector('.trix-button-group.trix-button-group--block-tools')
.insertAdjacentHTML('beforeend', this.textAlignButtons)
}
get foregroundColorButtons () {
return `<input type="color" style="width:0;height:0;padding:0;margin-top:20px;visibility:hidden"
data-trix-target="foregroundColorPicker" data-action="trix#foregroundColorChanged">
<button type="button" class="trix-button" data-action="click->trix#openForegroundColorPicker" title="Text color">
<span class="icon"><i class="fas fa-palette fa-lg"></i></span>
</button>`
}
get backgroundColorButtons () {
return `<input type="color" style="width:0;height:0;padding:0;margin-top:20px;visibility:hidden"
data-trix-target="backgroundColorPicker" data-action="trix#backgroundColorChanged">
<button type="button" class="trix-button" data-action="click->trix#openBackgroundColorPicker" title="Text background color">
<span class="icon"><i class="fas fa-fill-drip fa-lg"></i></span>
</button>`
}
get textAlignButtons () {
return `<button type="button" class="trix-button" data-trix-attribute="textAlignCenter">
<span class="icon"><i class="fas fa-align-center fa-lg"></i></span>
</button>`
}
}
You may want to replace the icon <span class="icon"><i class="fas fa-palette"></i></span> (I use fontawesome, feel free to use whatever you like, maybe a 🎨 icon would work)
this solves https://github.com/basecamp/trix/issues/498 https://github.com/basecamp/trix/issues/606 https://github.com/basecamp/trix/issues/655 and many others.
For the centered text you will need to:
Add this css
centered-div {
display: block;
text-align: center;
}
Also add centered-div as allowed tags (I have this in my application.rb)
config.after_initialize do
ActionText::ContentHelper.allowed_attributes.add 'style'
ActionText::ContentHelper.allowed_attributes.add 'controls'
ActionText::ContentHelper.allowed_attributes.add 'poster'
ActionText::ContentHelper.allowed_tags.add 'video'
ActionText::ContentHelper.allowed_tags.add 'source'
ActionText::ContentHelper.allowed_tags.add 'centered-div'
end
Issue Analytics
- State:
- Created a year ago
- Reactions:7
- Comments:6
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
UPDATE: for trix 2.0+ the controller is slightly different (and better, less hacky)
Thanks, you are right. With the upgrade to 2.0.1 we do not need the call anymore. 👍