Skip to content

Instantly share code, notes, and snippets.

@donnfelker
Created February 19, 2022 12:00
Show Gist options
  • Save donnfelker/8929eb90a2359b2559b2b4559c3abba4 to your computer and use it in GitHub Desktop.
Save donnfelker/8929eb90a2359b2559b2b4559c3abba4 to your computer and use it in GitHub Desktop.
Stimulus JS Controller to Disable File Attachments in the Trix Editor
<!-- File uploads will be disabled for any trix editor in this div -->
<div data-controller="registrations">
<!-- Other html elements ... -->
<div class="form-group">
<%= form.label :bio, "Bio" %>
<!-- File uploads, and the attachment button will be disabled in this rich text (trix) editor -->
<%= form.rich_text_area :bio %>
</div>
<!-- Other html elements ... -->
</div>
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
connect() {
// Disable file attachment
document.addEventListener("trix-file-accept", this.onTrixFileAccept)
// Remove the file attachment button from the trix editor
document.querySelector(".trix-button-group--file-tools").remove();
}
disconnect() {
document.removeEventListener("trix-file-accept", this.onTrixFileAccept)
}
onTrixFileAccept(e) {
// Prevents file uploads on trix (even when dragging/dropping)
e.preventDefault()
}
}
@donnfelker
Copy link
Author

This actually disables them any where in the document, but if you only have one, this works just fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment