Created this to solve a few issues for my use case. Specifically when working on eventoor, I needed to make it work nicer with SSR enabled svelte kit. And I needed better control over link inputs.
1. Before, just importing the code would immediately execute everything, which made it impossible to use with SSR enabled. With this, after you import you need to run the init() function for the rest of the code to be imported and executed. So you are in full control when trix code actually runs. Additionally this improves performance as the files are chunked and imported in parallel. 2. Now you can add attributes to the elements, e.g. I needed all my links to open in a new tab, so you can now add Trix.textAttributes.href.attributes = {target: "_blank"}, which will add a target="_blank" attribute for all links. Note that this is set for an entire document and is still not user controllable. Technically you could implement dynamically changing the config value based on user input, which works, but it if you use undo/redo it will be reset to latest config value. 3. Now when adding a link, if you didn't preselect text, it will use the link without protocol as text. So e.g. before https://example.com would be rendered as that, but now it is example.com that links to https://example.com 4. Now the protocol is not required for linking, e.g. input of example.com will link to https://example.com, and example@email.com will link to mailto:example@email.com 5. Fixed a bug where the toolbar would show up as default even when there's a custom toolbar set, specifically solves the need for this hack https://dev.to/konnorrogers/modifying-the-default-toolbar-in-trix-411b 6. Now when trix-editor is bound to an input, the input will emit an 'input' event whenever it is programmatically changed. This fixes reactivity in modern frameworks, allowing you to bind to the inputs value. 7. Added some simple types definitions for typescript environment imports. Might publish full types to separate @types package at some point. 8. Added underline formatting support.
Currently the css built from this is likely broken, the original package was using long deprecated node-sass package that did not work with JavaScript modules. I upgraded this to use the Dart Sass package but did not port the custom functions logic. It should be completely fine to use the css from the original package or just use your own. e.g. I do not important pacakge css and use tailwind.
Original docs:
Trix
$3
Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.
Trix is an open-source project from 37signals, the creators of Ruby on Rails. Millions of people trust their text to us, and we built Trix to give them the best possible editing experience. See Trix in action in Basecamp 3.
$3
When Trix was designed in 2014, most WYSIWYG editors were wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers.
Because these APIs were not fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.
Trix sidestepped these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use execCommand at all.
This is the approach that all modern, production ready, WYSIWYG editors now take.
$3
Trix supports all evergreen, self-updating desktop and mobile browsers.
Trix comes bundled in ESM and UMD formats and works with any asset packaging system.
The easiest way to start with Trix is including it from an npm CDN in the of your page:
``html
…
`
trix.css includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.
Alternatively, you can install the npm package and import it in your application:
`js import Trix from "trix"
document.addEventListener("trix-before-initialize", () => { // Change Trix.config if you need }) `
Creating an Editor
Place an empty tag on the page. Trix will automatically insert a separate before the editor.
Like an HTML
Creating a Toolbar
Trix automatically will create a toolbar for you and attach it right before the element. If you'd like to place the toolbar in a different place you can use the toolbar attribute:
`html
`
To change the toolbar without modifying Trix, you can overwrite the Trix.config.toolbar.getDefaultHTML() function. The default toolbar HTML is in config/toolbar.js. Trix uses data attributes to determine how to respond to a toolbar button click.
Toggle Attribute
With data-trix-attribute="", you can add an attribute to the current selection. For example, to apply bold styling to the selected text the button is:
` html
`
Trix will determine that a range of text is selected and will apply the formatting defined in Trix.config.textAttributes (found in config/text_attributes.js).
data-trix-key="b" tells Trix that this attribute should be applied when you use meta+b
If the attribute is defined in Trix.config.blockAttributes, Trix will apply the attribute to the current block of text.
` html
`
Clicking the quote button toggles whether the block should be rendered with
.
Integrating with Element Internals
Trix will integrate
elements with forms depending on the browser's support for Element Internals. If there is a need to disable support for ElementInternals, set Trix.elements.TrixEditorElement.formAssociated = false:`js import Trix from "trix"
* undo * redo * link * increaseBlockLevel * decreaseBlockLevel
` html
`
Invoking External Custom Actions
If you want to add a button to the toolbar and have it invoke an external action, you can prefix your action name with
x-. For example, if I want to print a log statement any time my new button is clicked, I would set by button's data attribute to be data-trix-action="x-log"` html
`
To respond to the action, listen for
trix-action-invoke. The event's target property returns a reference to the element, its invokingElement property returns a reference to the