[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3170":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},3170,"trix","basecamp\u002Ftrix","basecamp","A rich text editor for everyday writing","https:\u002F\u002Ftrix-editor.org\u002F",null,"JavaScript",19963,1132,240,153,0,1,7,31,5,44.16,"MIT License",false,"main",true,[27,28,29,30,31,32,33],"custom-elements","editor","javascript","rich-text-editor","text-editor","wysiwyg","wysiwyg-editor","2026-06-12 02:00:47","# Trix\n### A Rich Text Editor for Everyday Writing\n\n**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.\n\nTrix is an open-source project from [37signals](https:\u002F\u002F37signals.com), the creators of [Ruby on Rails](http:\u002F\u002Frubyonrails.org\u002F). 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](https:\u002F\u002Fbasecamp.com).\n\n### Different By Design\n\nWhen 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](https:\u002F\u002Fblog.whatwg.org\u002Fthe-road-to-html-5-contenteditable#history) and copied by other browsers.\n\nBecause 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.\n\nTrix sidestepped these inconsistencies by treating `contenteditable` as an I\u002FO 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.\n\nThis is the approach that all modern, production ready, WYSIWYG editors now take.\n\n### Built on Web standards\n\n\u003Cdetails>\u003Csummary>Trix supports all evergreen, self-updating desktop and mobile browsers.\u003C\u002Fsummary>\u003Cimg src=\"https:\u002F\u002Fapp.saucelabs.com\u002Fbrowser-matrix\u002Fbasecamp_trix.svg\">\u003C\u002Fdetails>\n\nTrix is built with established web standards, notably [Custom Elements](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components\u002FUsing_custom_elements), [Element Internals](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FElementInternals), [Mutation Observer](https:\u002F\u002Fdom.spec.whatwg.org\u002F#mutation-observers), and [Promises](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FPromise).\n\n# Getting Started\n\nTrix comes bundled in ESM and UMD formats and works with any asset packaging system.\n\nThe easiest way to start with Trix is including it from an npm CDN in the `\u003Chead>` of your page:\n\n```html\n\u003Chead>\n  …\n  \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"https:\u002F\u002Funpkg.com\u002Ftrix@2.0.8\u002Fdist\u002Ftrix.css\">\n  \u003Cscript type=\"text\u002Fjavascript\" src=\"https:\u002F\u002Funpkg.com\u002Ftrix@2.0.8\u002Fdist\u002Ftrix.umd.min.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n```\n\n`trix.css` includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.\n\nAlternatively, you can install the npm package and import it in your application:\n\n```js\nimport Trix from \"trix\"\n\ndocument.addEventListener(\"trix-before-initialize\", () => {\n  \u002F\u002F Change Trix.config if you need\n})\n```\n\n## Creating an Editor\n\nPlace an empty `\u003Ctrix-editor>\u003C\u002Ftrix-editor>` tag on the page. Trix will automatically insert a separate `\u003Ctrix-toolbar>` before the editor.\n\nLike an HTML `\u003Ctextarea>`, `\u003Ctrix-editor>` accepts `autofocus` and `placeholder` attributes. Unlike a `\u003Ctextarea>`, `\u003Ctrix-editor>` automatically expands vertically to fit its contents.\n\n## Creating a Toolbar\n\nTrix automatically will create a toolbar for you and attach it right before the `\u003Ctrix-editor>` element. If you'd like to place the toolbar in a different place you can use the `toolbar` attribute:\n\n```html\n\u003Cmain>\n  \u003Ctrix-toolbar id=\"my_toolbar\">\u003C\u002Ftrix-toolbar>\n  \u003Cdiv class=\"more-stuff-inbetween\">\u003C\u002Fdiv>\n  \u003Ctrix-editor toolbar=\"my_toolbar\" input=\"my_input\">\u003C\u002Ftrix-editor>\n\u003C\u002Fmain>\n```\n\nTo change the toolbar without modifying Trix, you can overwrite the `Trix.config.toolbar.getDefaultHTML()` function. The default toolbar HTML is in `config\u002Ftoolbar.js`. Trix uses data attributes to determine how to respond to a toolbar button click.\n\n**Toggle Attribute**\n\nWith `data-trix-attribute=\"\u003Cattribute name>\"`, you can add an attribute to the current selection.\nFor example, to apply bold styling to the selected text the button is:\n\n``` html\n\u003Cbutton type=\"button\" class=\"bold\" data-trix-attribute=\"bold\" data-trix-key=\"b\">\u003C\u002Fbutton>\n```\n\nTrix will determine that a range of text is selected and will apply the formatting defined in `Trix.config.textAttributes` (found in `config\u002Ftext_attributes.js`).\n\n`data-trix-key=\"b\"` tells Trix that this attribute should be applied when you use \u003Ckbd>meta\u003C\u002Fkbd>+\u003Ckbd>b\u003C\u002Fkdb>.\n\nIf the attribute is defined in `Trix.config.blockAttributes`, Trix will apply the attribute to the current block of text.\n\n``` html\n\u003Cbutton type=\"button\" class=\"quote\" data-trix-attribute=\"quote\">\u003C\u002Fbutton>\n```\n\nClicking the quote button toggles whether the block should be rendered with `\u003Cblockquote>`.\n\n## Integrating with Element Internals\n\nTrix will integrate `\u003Ctrix-editor>` elements with forms depending on the browser's support for [Element Internals](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FElementInternals). If there is a need to disable support for `ElementInternals`, set `Trix.elements.TrixEditorElement.formAssociated = false`:\n\n```js\nimport Trix from \"trix\"\n\nTrix.elements.TrixEditorElement.formAssociated = false\n```\n\nWhen Trix is configured to be compatible with `ElementInternals`, it is also\ncapable of functioning without an `\u003Cinput type=\"hidden\">` element. To configure\na `\u003Ctrix-editor>` element to skip creating its `\u003Cinput type=\"hidden\">`, set the\nelement's `willCreateInput = false`:\n\n```js\naddEventListener(\"before-trix-initialize\", (event) => {\n  const trixEditor = event.target\n\n  trixEditor.willCreateInput = false\n})\n```\n\n> [!NOTE]\n> Trix will *always* use an associated `\u003Cinput type=\"hidden\">` element when the\n> `[input]` attribute is set. To migrate to `\u003Cinput>`-free support, set\n> `willCreateInput = false`, then render the `\u003Ctrix-editor>` without the\n> `[input]` attribute.\n\n> [!WARNING]\n> In the absence of an `\u003Cinput type=\"hidden\">` element, the `\u003Ctrix-editor>`\n> element's value will not be included in `\u003Cform>` element submissions unless it\n> is rendered with a `[name]` attribute. Set the `[name]` attribute to the same\n> value that the `\u003Cinput type=\"hidden\">` element would have.\n\n## Invoking Internal Trix Actions\n\nInternal actions are defined in `controllers\u002Feditor_controller.js` and consist of:\n\n* undo\n* redo\n* link\n* increaseBlockLevel\n* decreaseBlockLevel\n\n``` html\n\u003Cbutton type=\"button\" class=\"block-level decrease\" data-trix-action=\"decreaseBlockLevel\">\u003C\u002Fbutton>\n```\n\n## Invoking External Custom Actions\n\nIf 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\"`\n\n``` html\n\u003Cbutton id=\"log-button\" type=\"button\" data-trix-action=\"x-log\">\u003C\u002Fbutton>\n```\n\nTo respond to the action, listen for `trix-action-invoke`. The event's `target` property returns a reference to the `\u003Ctrix-editor>` element, its `invokingElement` property returns a reference to the `\u003Cbutton>` element, and its `actionName` property returns the value of the `[data-trix-action]` attribute. Use the value of the `actionName` property to detect which external action was invoked.\n\n```javascript\ndocument.addEventListener(\"trix-action-invoke\", function(event) {\n  const { target, invokingElement, actionName } = event\n\n  if (actionName === \"x-log\") {\n    console.log(`Custom ${actionName} invoked from ${invokingElement.id} button on ${target.id} trix-editor`)\n  }\n})\n```\n\n## Integrating With Forms\n\nTo submit the contents of a `\u003Ctrix-editor>` with a form, first define a hidden input field in the form and assign it an `id`. Then reference that `id` in the editor’s `input` attribute.\n\n```html\n\u003Cform …>\n  \u003Cinput id=\"x\" type=\"hidden\" name=\"content\">\n  \u003Ctrix-editor input=\"x\">\u003C\u002Ftrix-editor>\n\u003C\u002Fform>\n```\n\nTrix will automatically update the value of the hidden input field with each change to the editor.\n\n## Populating With Stored Content\n\nTo populate a `\u003Ctrix-editor>` with stored content, include that content in the associated input element’s `value` attribute.\n\n```html\n\u003Cform …>\n  \u003Cinput id=\"x\" value=\"Editor content goes here\" type=\"hidden\" name=\"content\">\n  \u003Ctrix-editor input=\"x\">\u003C\u002Ftrix-editor>\n\u003C\u002Fform>\n```\n\nUse an associated input element to initially populate an editor. When an associated input element is absent, Trix will safely sanitize then load any HTML content inside a `\u003Ctrix-editor>…\u003C\u002Ftrix-editor>` tag.\n\n```html\n\u003Cform …>\n  \u003Ctrix-editor>Editor content goes here\u003C\u002Ftrix-editor>\n\u003C\u002Fform>\n```\n\n> [!WARNING]\n> When a `\u003Ctrix-editor>` element initially connects with both HTML content *and*\n> an associated input element, Trix will *always* disregard the HTML content and\n> load its initial content from the associated input element.\n\n## Validating the Editor\n\nOut of the box, `\u003Ctrix-editor>` elements support browsers' built-in [Constraint\nvalidation][]. When rendered with the [required][] attribute, editors will be\ninvalid when they're completely empty. For example, consider the following HTML:\n\n```html\n\u003Cinput id=\"x\" value=\"\" type=\"hidden\" name=\"content\">\n\u003Ctrix-editor input=\"x\" required>\u003C\u002Ftrix-editor>\n```\n\nSince the `\u003Ctrix-editor>` element is `[required]`, it is invalid when its value\nis empty:\n\n```js\nconst editor = document.querySelector(\"trix-editor\")\n\neditor.validity.valid        \u002F\u002F => false\neditor.validity.valueMissing \u002F\u002F => true\neditor.matches(\":valid\")     \u002F\u002F => false\neditor.matches(\":invalid\")   \u002F\u002F => true\n\neditor.value = \"A value that isn't empty\"\n\neditor.validity.valid         \u002F\u002F => true\neditor.validity.valueMissing  \u002F\u002F => false\neditor.matches(\":valid\")      \u002F\u002F => true\neditor.matches(\":invalid\")    \u002F\u002F => false\n```\n\nIn addition to the built-in `[required]` attribute, `\u003Ctrix-editor>`\nelements support custom validation through their [setCustomValidity][] method.\nFor example, consider the following HTML:\n\n```js\n\u003Cinput id=\"x\" value=\"\" type=\"hidden\" name=\"content\">\n\u003Ctrix-editor input=\"x\">\u003C\u002Ftrix-editor>\n```\n\nCustom validation can occur at any time. For example, validation can occur after\na `trix-change` event fired after the editor's contents change:\n\n```js\naddEventListener(\"trix-change\", (event) => {\n  const editorElement = event.target\n  const trixDocument = editorElement.editor.getDocument()\n  const isValid = (trixDocument) => {\n    \u002F\u002F determine the validity based on your custom criteria\n    return true\n  }\n\n  if (isValid(trixDocument)) {\n    editorElement.setCustomValidity(\"\")\n  } else {\n    editorElement.setCustomValidity(\"The document is not valid.\")\n  }\n}\n```\n\n[Constraint validation]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FConstraint_validation\n[required]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FAttributes\u002Frequired\n[setCustomValidity]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLObjectElement\u002FsetCustomValidity\n\n## Disabling the Editor\n\nTo disable the `\u003Ctrix-editor>`, render it with the `[disabled]` attribute:\n\n```html\n\u003Ctrix-editor disabled>\u003C\u002Ftrix-editor>\n```\n\nDisabled editors are not editable, cannot receive focus, and their values will\nbe ignored when their related `\u003Cform>` element is submitted.\n\nTo change whether or not an editor is disabled, either toggle the `[disabled]`\nattribute or assign a boolean to the `.disabled` property:\n\n```html\n\u003Ctrix-editor id=\"editor\" disabled>\u003C\u002Ftrix-editor>\n\n\u003Cscript>\n  const editor = document.getElementById(\"editor\")\n\n  editor.toggleAttribute(\"disabled\", false)\n  editor.disabled = true\n\u003C\u002Fscript>\n```\n\nWhen disabled, the editor will match the [:disabled CSS\npseudo-class][:disabled].\n\n[:disabled]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F:disabled\n\n## Providing an Accessible Name\n\nLike other form controls, `\u003Ctrix-editor>` elements should have an accessible name. The `\u003Ctrix-editor>` element integrates with `\u003Clabel>` elements. It supports two styles of integrating with `\u003Clabel>` elements:\n\n1. render the `\u003Ctrix-editor>` element with an `[id]` attribute that the `\u003Clabel>` element references through its `[for]` attribute:\n\n```html\n\u003Clabel for=\"editor\">Editor\u003C\u002Flabel>\n\u003Ctrix-editor id=\"editor\">\u003C\u002Ftrix-editor>\n```\n\n2. render the `\u003Ctrix-editor>` element as a child of the `\u003Clabel>` element:\n\n```html\n\u003Ctrix-toolbar id=\"editor-toolbar\">\u003C\u002Ftrix-toolbar>\n\u003Clabel>\n  Editor\n\n  \u003Ctrix-editor toolbar=\"editor-toolbar\">\u003C\u002Ftrix-editor>\n\u003C\u002Flabel>\n```\n\n> [!WARNING]\n> When rendering the `\u003Ctrix-editor>` element as a child of the `\u003Clabel>` element, [explicitly render](#creating-an-editor) the corresponding `\u003Ctrix-toolbar>` element outside of the `\u003Clabel>` element.\n\nIn addition to integrating with `\u003Clabel>` elements, `\u003Ctrix-editor>` elements support `[aria-label]` and `[aria-labelledby]` attributes.\n\n## Styling Formatted Content\n\nTo ensure what you see when you edit is what you see when you save, use a CSS class name to scope styles for Trix formatted content. Apply this class name to your `\u003Ctrix-editor>` element, and to a containing element when you render stored Trix content for display in your application.\n\n```html\n\u003Ctrix-editor class=\"trix-content\">\u003C\u002Ftrix-editor>\n```\n\n```html\n\u003Cdiv class=\"trix-content\">Stored content here\u003C\u002Fdiv>\n```\n\nThe default `trix.css` file includes styles for basic formatted content—including bulleted and numbered lists, code blocks, and block quotes—under the class name `trix-content`. We encourage you to use these styles as a starting point by copying them into your application’s CSS with a different class name.\n\n## Storing Attached Files\n\nTrix automatically accepts files dragged or pasted into an editor and inserts them as attachments in the document. Each attachment is considered _pending_ until you store it remotely and provide Trix with a permanent URL.\n\nTo store attachments, listen for the `trix-attachment-add` event. Upload the attached files with XMLHttpRequest yourself and set the attachment’s URL attribute upon completion. See the [attachment example](https:\u002F\u002Ftrix-editor.org\u002Fjs\u002Fattachments.js) for detailed information.\n\nIf you don’t want to accept dropped or pasted files, call `preventDefault()` on the `trix-file-accept` event, which Trix dispatches just before the `trix-attachment-add` event.\n\n## Previewing Attached Files\n\nTrix automatically previews attached image files. To determine whether or not to preview an attached file, Trix compares the file's content type against the [Trix.Attachment.previewablePattern](.\u002Fsrc\u002Ftrix\u002Fmodels\u002Fattachment.js#L7). By default, Trix will preview the following content types:\n\n* `image\u002Fgif`\n* `image\u002Fpng`\n* `image\u002Fwebp`\n* `image\u002Fjpg`\n* `image\u002Fjpeg`\n\nTo customize an attachment's preview, listen for the `trix-attachment-add` event. When handling the event, set the attachment's `previewable` attribute, then change its preview URL by calling `setPreviewURL`:\n\n```js\naddEventListener(\"trix-attachment-add\", (event) => {\n  if (event.attachment.file instanceof File) {\n    event.attachment.setAttribute(\"previewable\", true)\n    event.attachment.setPreviewURL(\"...\")\n  }\n})\n```\n\n# Editing Text Programmatically\n\nYou can manipulate a Trix editor programmatically through the `Trix.Editor` interface, available on each `\u003Ctrix-editor>` element through its `editor` property.\n\n```js\nvar element = document.querySelector(\"trix-editor\")\nelement.editor  \u002F\u002F is a Trix.Editor instance\n```\n\n## Understanding the Document Model\n\nThe formatted content of a Trix editor is known as a _document_, and is represented as an instance of the `Trix.Document` class. To get the editor’s current document, use the `editor.getDocument` method.\n\n```js\nelement.editor.getDocument()  \u002F\u002F is a Trix.Document instance\n```\n\nYou can convert a document to an unformatted JavaScript string with the `document.toString` method.\n\n```js\nvar document = element.editor.getDocument()\ndocument.toString()  \u002F\u002F is a JavaScript string\n```\n\n### Immutability and Equality\n\nDocuments are immutable values. Each change you make in an editor replaces the previous document with a new document. Capturing a snapshot of the editor’s content is as simple as keeping a reference to its document, since that document will never change over time. (This is how Trix implements undo.)\n\nTo compare two documents for equality, use the `document.isEqualTo` method.\n\n```js\nvar document = element.editor.getDocument()\ndocument.isEqualTo(element.editor.getDocument())  \u002F\u002F true\n```\n\n## Getting and Setting the Selection\n\nTrix documents are structured as sequences of individually addressable characters. The index of one character in a document is called a _position_, and a start and end position together make up a _range_.\n\nTo get the editor’s current selection, use the `editor.getSelectedRange` method, which returns a two-element array containing the start and end positions.\n\n```js\nelement.editor.getSelectedRange()  \u002F\u002F [0, 0]\n```\n\nYou can set the editor’s current selection by passing a range array to the `editor.setSelectedRange` method.\n\n```js\n\u002F\u002F Select the first character in the document\nelement.editor.setSelectedRange([0, 1])\n```\n\n### Collapsed Selections\n\nWhen the start and end positions of a range are equal, the range is said to be _collapsed_. In the editor, a collapsed selection appears as a blinking cursor rather than a highlighted span of text.\n\nFor convenience, the following calls to `setSelectedRange` are equivalent when working with collapsed selections:\n\n```js\nelement.editor.setSelectedRange(1)\nelement.editor.setSelectedRange([1])\nelement.editor.setSelectedRange([1, 1])\n```\n\n### Directional Movement\n\nTo programmatically move the cursor or selection through the document, call the `editor.moveCursorInDirection` or `editor.expandSelectionInDirection` methods with a _direction_ argument. The direction can be either `\"forward\"` or `\"backward\"`.\n\n```js\n\u002F\u002F Move the cursor backward one character\nelement.editor.moveCursorInDirection(\"backward\")\n\n\u002F\u002F Expand the end of the selection forward by one character\nelement.editor.expandSelectionInDirection(\"forward\")\n```\n\n### Converting Positions to Pixel Offsets\n\nSometimes you need to know the _x_ and _y_ coordinates of a character at a given position in the editor. For example, you might want to absolutely position a pop-up menu element below the editor’s cursor.\n\nCall the `editor.getClientRectAtPosition` method with a position argument to get a [`DOMRect`](https:\u002F\u002Fdrafts.fxtf.org\u002Fgeometry\u002F#DOMRect) instance representing the left and top offsets, width, and height of the character at the given position.\n\n```js\nvar rect = element.editor.getClientRectAtPosition(0)\n[rect.left, rect.top]  \u002F\u002F [17, 49]\n```\n\n## Inserting and Deleting Text\n\nThe editor interface provides methods for inserting, replacing, and deleting text at the current selection.\n\nTo insert or replace text, begin by setting the selected range, then call one of the insertion methods below. Trix will first remove any selected text, then insert the new text at the start position of the selected range.\n\n### Inserting Plain Text\n\nTo insert unformatted text into the document, call the `editor.insertString` method.\n\n```js\n\u002F\u002F Insert “Hello” at the beginning of the document\nelement.editor.setSelectedRange([0, 0])\nelement.editor.insertString(\"Hello\")\n```\n\n### Inserting HTML\n\nTo insert HTML into the document, call the `editor.insertHTML` method. Trix will first convert the HTML into its internal document model. During this conversion, any formatting that cannot be represented in a Trix document will be lost.\n\n```js\n\u002F\u002F Insert a bold “Hello” at the beginning of the document\nelement.editor.setSelectedRange([0, 0])\nelement.editor.insertHTML(\"\u003Cstrong>Hello\u003C\u002Fstrong>\")\n```\n\n### Inserting a File\n\nTo insert a DOM [`File`](http:\u002F\u002Fwww.w3.org\u002FTR\u002FFileAPI\u002F#file) object into the document, call the `editor.insertFile` method. Trix will insert a pending attachment for the file as if you had dragged and dropped it onto the editor.\n\n```js\n\u002F\u002F Insert the selected file from the first file input element\nvar file = document.querySelector(\"input[type=file]\").file\nelement.editor.insertFile(file)\n```\n\n### Inserting a Content Attachment\n\nContent attachments are self-contained units of HTML that behave like files in the editor. They can be moved or removed, but not edited directly, and are represented by a single character position in the document model.\n\nTo insert HTML as an attachment, create a `Trix.Attachment` with a `content` attribute and call the `editor.insertAttachment` method. The HTML inside a content attachment is not subject to Trix’s document conversion rules and will be rendered as-is.\n\n```js\nvar attachment = new Trix.Attachment({ content: '\u003Cspan class=\"mention\">@trix\u003C\u002Fspan>' })\nelement.editor.insertAttachment(attachment)\n```\n\n### Inserting a Line Break\n\nTo insert a line break, call the `editor.insertLineBreak` method, which is functionally equivalent to pressing the return key.\n\n```js\n\u002F\u002F Insert “Hello\\n”\nelement.editor.insertString(\"Hello\")\nelement.editor.insertLineBreak()\n```\n\n### Deleting Text\n\nIf the current selection is collapsed, you can simulate deleting text before or after the cursor with the `editor.deleteInDirection` method.\n\n```js\n\u002F\u002F “Backspace” the first character in the document\nelement.editor.setSelectedRange([1, 1])\nelement.editor.deleteInDirection(\"backward\")\n\n\u002F\u002F Delete the second character in the document\nelement.editor.setSelectedRange([1, 1])\nelement.editor.deleteInDirection(\"forward\")\n```\n\nTo delete a range of text, first set the selected range, then call `editor.deleteInDirection` with either direction as the argument.\n\n```js\n\u002F\u002F Delete the first five characters\nelement.editor.setSelectedRange([0, 4])\nelement.editor.deleteInDirection(\"forward\")\n```\n\n## Working With Attributes and Nesting\n\nTrix represents formatting as sets of _attributes_ applied across ranges of a document.\n\nBy default, Trix supports the inline attributes `bold`, `italic`, `href`, and `strike`, and the block-level attributes `heading1`, `quote`, `code`, `bullet`, and `number`.\n\n### Applying Formatting\n\nTo apply formatting to the current selection, use the `editor.activateAttribute` method.\n\n```js\nelement.editor.insertString(\"Hello\")\nelement.editor.setSelectedRange([0, 5])\nelement.editor.activateAttribute(\"bold\")\n```\n\nTo set the `href` attribute, pass a URL as the second argument to `editor.activateAttribute`.\n\n```js\nelement.editor.insertString(\"Trix\")\nelement.editor.setSelectedRange([0, 4])\nelement.editor.activateAttribute(\"href\", \"https:\u002F\u002Ftrix-editor.org\u002F\")\n```\n\n### Removing Formatting\n\nUse the `editor.deactivateAttribute` method to remove formatting from a selection.\n\n```js\nelement.editor.setSelectedRange([2, 4])\nelement.editor.deactivateAttribute(\"bold\")\n```\n\n### Formatting With a Collapsed Selection\n\nIf you activate or deactivate attributes when the selection is collapsed, your formatting changes will apply to the text inserted by any subsequent calls to `editor.insertString`.\n\n```js\nelement.editor.activateAttribute(\"italic\")\nelement.editor.insertString(\"This is italic\")\n```\n\n### Adjusting the Nesting Level\n\nTo adjust the nesting level of quotes, bulleted lists, or numbered lists, call the `editor.increaseNestingLevel` and `editor.decreaseNestingLevel` methods.\n\n```js\nelement.editor.activateAttribute(\"quote\")\nelement.editor.increaseNestingLevel()\nelement.editor.decreaseNestingLevel()\n```\n\n## Using Undo and Redo\n\nTrix editors support unlimited undo and redo. Successive typing and formatting changes are consolidated together at five-second intervals; all other input changes are recorded individually in undo history.\n\nCall the `editor.undo` and `editor.redo` methods to perform an undo or redo operation.\n\n```js\nelement.editor.undo()\nelement.editor.redo()\n```\n\nChanges you make through the editor interface will not automatically record undo entries. You can save your own undo entries by calling the `editor.recordUndoEntry` method with a description argument.\n\n```js\nelement.editor.recordUndoEntry(\"Insert Text\")\nelement.editor.insertString(\"Hello\")\n```\n\n## Loading and Saving Editor State\n\nSerialize an editor’s state with `JSON.stringify` and restore saved state with the `editor.loadJSON` method. The serialized state includes the document and current selection, but does not include undo history.\n\n```js\n\u002F\u002F Save editor state to local storage\nlocalStorage[\"editorState\"] = JSON.stringify(element.editor)\n\n\u002F\u002F Restore editor state from local storage\nelement.editor.loadJSON(JSON.parse(localStorage[\"editorState\"]))\n```\n\n## HTML Sanitization\n\nTrix uses [DOMPurify](https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify\u002F) to sanitize the editor content. You can set the DOMPurify config via `Trix.config.dompurify`.\n\nFor example if you want to keep a custom tag, you can access do that with:\n\n```js\nTrix.config.dompurify.ADD_TAGS = [ \"my-custom-tag\" ]\n```\n\n## HTML Rendering\n\nTrix renders changes to editor content by replacing existing nodes with new nodes.\n\nTo customize how Trix renders changes, set the `\u003Ctrix-editor>` element's\n`render` property to a function that accepts a `\u003Ctrix-editor>` instance and a\n[DocumentFragment][]:\n\n```js\ndocument.addEventListener(\"trix-before-render\", (event) => {\n  const defaultRender = event.render\n\n  event.render = function(editorElement, documentFragment) {\n    \u002F\u002F modify the documentFragment…\n    customize(documentFragment)\n\n    \u002F\u002F render it with the default rendering function\n    defaultRender(editorElement, documentFragment)\n  }\n})\n```\n\n> [!CAUTION]\n> By the time that `render(editorElement, documentFragment)` is\n> invoked, Trix will have finalized modifications to the HTML content (like HTML\n> sanitization, for example). If you make further modifications to the content,\n> be sure that they are safe.\n\n[DocumentFragment]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FDocumentFragment\n\n## Observing Editor Changes\n\nThe `\u003Ctrix-editor>` element emits several events which you can use to observe and respond to changes in editor state.\n\n* `trix-before-initialize` fires when the `\u003Ctrix-editor>` element is attached to the DOM just before Trix installs its `editor` object. If you need to use a custom Trix configuration you can change `Trix.config` here.\n\n* `trix-initialize` fires when the `\u003Ctrix-editor>` element is attached to the DOM and its `editor` object is ready for use.\n\n* `trix-change` fires whenever the editor’s contents have changed.\n\n* `trix-before-render` fires before the editor’s new contents are rendered. You can override the function used to render the content through the `render` property on the event. The `render` function expects two positional arguments: the `\u003Ctrix-editor>` element that will render and a [DocumentFragment](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FDocumentFragment) instance that contains the new content. Read [HTML Rendering](#html-rendering) to learn more.\n\n* `trix-before-paste` fires just before text is pasted into the editor. You can use this to modify the content being pasted or prevent the paste event from happening at all. The `paste` property on the event contains the pasted `string` or `html`, and the `range` of the inserted text.\n\n* `trix-paste` fires whenever text is pasted into the editor. The `paste` property on the event contains the pasted `string` or `html`, and the `range` of the inserted text.\n\n* `trix-selection-change` fires any time the selected range changes in the editor.\n\n* `trix-focus` and `trix-blur` fire when the editor gains or loses focus, respectively.\n\n* `trix-file-accept` fires when a file is dropped or inserted into the editor. You can access the DOM `File` object through the `file` property on the event. Call `preventDefault` on the event to prevent attaching the file to the document.\n\n* `trix-attachment-add` fires after an attachment is added to the document. You can access the Trix attachment object through the `attachment` property on the event. If the `attachment` object has a `file` property, you should store this file remotely and set the attachment’s URL attribute. See the [attachment example](http:\u002F\u002Ftrix-editor.org\u002Fjs\u002Fattachments.js) for detailed information.\n\n* `trix-attachment-edit` fires after an attachment is edited in the document. You can access the Trix attachment object through the `attachment` property on the event.\n\n* `trix-attachment-remove` fires when an attachment is removed from the document. You can access the Trix attachment object through the `attachment` property on the event. You may wish to use this event to clean up remotely stored files.\n\n* `trix-action-invoke` fires when a Trix action is invoked. You can access the `\u003Ctrix-editor>` element through the event's `target` property, the element responsible for invoking the action through the `invokingElement` property, and the action's name through the `actionName` property. The `trix-action-invoke` event will only fire for [custom](#invoking-external-custom-actions) actions and not for [built-in](#invoking-internal-trix-actions).\n\n# Contributing to Trix\n\nTrix is open-source software, freely distributable under the terms of an [MIT-style license](LICENSE). The [source code is hosted on GitHub](https:\u002F\u002Fgithub.com\u002Fbasecamp\u002Ftrix).\n\nWe welcome contributions in the form of bug reports, pull requests, or thoughtful discussions in the [GitHub issue tracker](https:\u002F\u002Fgithub.com\u002Fbasecamp\u002Ftrix\u002Fissues). Please see the [Code of Conduct](CODE_OF_CONDUCT.md) for our pledge to contributors.\n\nTrix was created by [Javan Makhmali](https:\u002F\u002Ftwitter.com\u002Fjavan) and [Sam Stephenson](https:\u002F\u002Ftwitter.com\u002Fsstephenson), with development sponsored by [37signals](https:\u002F\u002F37signals.com).\n\n### Building From Source\n\nTrix uses [Yarn](https:\u002F\u002Fyarnpkg.com\u002F) to manage dependencies and [Rollup](https:\u002F\u002Frollupjs.org\u002Fguide\u002Fen\u002F) to bundle its source.\n\nInstall development dependencies with:\n\n```\n$ yarn install\n```\n\nTo generate distribution files run:\n\n```\n$ yarn build\n```\n\n### Developing In-Browser\n\nYou can run a watch process to automatically generate distribution files when your source file change:\n\n```\n$ yarn watch\n```\n\nWhen the watch process is running you can run a web server to serve the compiled assets:\n\n```\n$ yarn dev\n```\n\nWith the development server running, you can visit `\u002Findex.html` to see a Trix debugger inspector, or `\u002Ftest.html` to run the tests on a browser.\n\nFor easier development, you can watch for changes to the JavaScript and style files, and serve the results in a browser, with a single command:\n\n```\n$ yarn start\n```\n\n### Running Tests\n\nYou can also run the test in a headless mode with:\n\n```\n$ yarn test\n```\n\n---\n\n© 37signals, LLC.\n","Trix 是一个适用于日常写作的富文本编辑器。它支持创建格式优美的文档，如消息、评论、文章和列表，并具备先进的文档模型和嵌入附件功能，输出简洁一致的HTML代码。Trix 采用`contenteditable`作为输入输出设备，通过内部文档模型处理所有编辑操作，从而避免了不同浏览器间实现不一致的问题。基于Web标准构建，包括自定义元素、元素内部机制、变动观察者及Promise等技术，确保跨平台兼容性。适合需要在网页应用中提供高质量文本编辑体验的各种场景。",2,"2026-06-11 02:52:46","top_language"]