{"id":13739042,"url":"https://github.com/hanhdt/vue-trix","last_synced_at":"2025-05-15T04:05:31.673Z","repository":{"id":32955208,"uuid":"147621953","full_name":"hanhdt/vue-trix","owner":"hanhdt","description":"Trix text editor component for Vue.js","archived":false,"fork":false,"pushed_at":"2025-05-11T10:24:41.000Z","size":7117,"stargazers_count":247,"open_issues_count":47,"forks_count":35,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-11T11:28:36.444Z","etag":null,"topics":["text-editor","trix","vue-component","vue2","vuejs"],"latest_commit_sha":null,"homepage":"https://nicedoc.io/hanhdt/vue-trix","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hanhdt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-06T05:23:47.000Z","updated_at":"2025-02-06T05:19:05.000Z","dependencies_parsed_at":"2023-12-28T03:01:30.722Z","dependency_job_id":"b46c4bd3-d37e-4589-a780-c9eada3b1bde","html_url":"https://github.com/hanhdt/vue-trix","commit_stats":{"total_commits":316,"total_committers":15,"mean_commits":"21.066666666666666","dds":0.5537974683544304,"last_synced_commit":"8e497ec521dbdfa13e3773de0e3e246e560b5748"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanhdt%2Fvue-trix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanhdt%2Fvue-trix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanhdt%2Fvue-trix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanhdt%2Fvue-trix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hanhdt","download_url":"https://codeload.github.com/hanhdt/vue-trix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270643,"owners_count":22042859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["text-editor","trix","vue-component","vue2","vuejs"],"created_at":"2024-08-03T04:00:23.804Z","updated_at":"2025-05-15T04:05:26.656Z","avatar_url":"https://github.com/hanhdt.png","language":"Vue","funding_links":[],"categories":["基于 Vue","Components \u0026 Libraries","Vue","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Form"],"readme":"# Vue-Trix Text Editor\n\n[![npm](https://img.shields.io/npm/v/vue-trix.svg?style=flat)](https://www.npmjs.com/package/vue-trix) [![Build status](https://ci.appveyor.com/api/projects/status/nffmo893v52evpgm/branch/master?svg=true)](https://ci.appveyor.com/project/tranduchanh/vue-trix/branch/master) \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/vue-trix.svg\"\u003e\n\nSimple and lightweight [Trix](https://www.npmjs.com/package/trix) rich-text editor Vue.js component for writing daily\n\n## Table of Contents\n\n- [Vue-Trix Text Editor](#vue-trix-text-editor)\n  - [Table of Contents](#table-of-contents)\n  - [Getting started](#getting-started)\n    - [Demo page](#demo-page)\n    - [Integrate into the form](#integrate-into-the-form)\n  - [Features](#features)\n  - [Installation](#installation)\n    - [NPM](#npm)\n    - [YARN](#yarn)\n    - [Or directly from latest Github repo](#or-directly-from-latest-github-repo)\n  - [Mount](#mount)\n    - [Mount with global](#mount-with-global)\n    - [Mount with component](#mount-with-component)\n    - [Setup with Nuxt.js (SSR)](#setup-with-nuxtjs-ssr)\n  - [Component Usages](#component-usages)\n    - [Create a simple editor in your single component file](#create-a-simple-editor-in-your-single-component-file)\n    - [Integrating with Forms](#integrating-with-forms)\n    - [Props descriptions](#props-descriptions)\n    - [Populating editor content](#populating-editor-content)\n      - [Init loading content into the editor](#init-loading-content-into-the-editor)\n      - [Track data changes](#track-data-changes)\n    - [Binding attachment events](#binding-attachment-events)\n    - [Process uploading attachment to remote server](#process-uploading-attachment-to-remote-server)\n  - [Trix document](#trix-document)\n  - [Contributing](#contributing)\n\n## Getting started\n\n### [Demo page](/example)\n\n![vue-trix editor](/example/src/assets/vue-trix-editor.png)\n\n### Integrate into the form\n\n![vue-trix in production](/example/src/assets/vue-trix-in-prod.png)\n\n## Features\n\n- A simple and lightweight rich-text editor for writing daily.\n- Two-ways binding with `v-model` easily.\n- Auto-save editor data temporally what you has typed into the form input in case something goes wrong (for example, the browser could crash or you could accidentally refresh the page without submit saving).\n\n## Installation\n\n### NPM\n\n```Shell\n  npm install --save vue-trix\n```\n\n### YARN\n\n```Shell\n  yarn add vue-trix\n```\n\n### Or directly from latest Github repo\n\n```Shell\n  npm install --save hanhdt/vue-trix\n```\n\n## Mount\n\n### Mount with global\n\nin the `main.js`, import the package as a global component.\n\n```javascript\nimport \"vue-trix\";\n```\n\n### Mount with component\n\n```javascript\nimport VueTrix from \"vue-trix\";\n\nexport default {\n  // ...\n  components: {\n    VueTrix\n  }\n};\n```\n\n### Setup with Nuxt.js (SSR)\n\nCreate mounting plugin file\n\n```javascript\n// plugins/vue_trix.js\nimport Vue from \"vue\";\nimport VueTrix from \"vue-trix\";\n\nVue.use(VueTrix);\n```\n\nUpdate Nuxt.js config file\n\n```javascript\n// nuxt.config.js\nplugins: [{ src: \"~/plugins/vue_trix\", mode: \"client\" }];\n```\n\n## Component Usages\n\n### Create a simple editor in your single component file\n\nAdd `VueTrix` component into `*.vue` template\n\n```XML\n  \u003ctemplate\u003e\n    \u003c!-- ... --\u003e\n    \u003cVueTrix v-model=\"editorContent\" placeholder=\"Enter content\" localStorage/\u003e\n    \u003c!-- ... --\u003e\n  \u003c/template\u003e\n```\n\n### Integrating with Forms\n\n```XML\n  \u003cform ...\u003e\n    \u003cVueTrix inputId=\"editor1\" v-model=\"editorContent\" placeholder=\"enter your content...\"/\u003e\n  \u003c/form\u003e\n```\n\n### Props descriptions\n\n- `inputId`: This is referenced `id` of the hidden input field defined, it is optional.\n- `inputName`: This is referenced `name` of the hidden input field defined, default value is `content`.\n- `placeholder`: The placeholder option attribute specifies a short hint that describes the expected value of a editor.\n- `autofocus`: Automatically focus the editor when it loads\n- `disabledEditor`: This prop will put the editor in read-only mode.\n- `localStorage`: The boolean attribute allows saving editor state into browser's localStorage (optional, default is `false`).\n\n### Populating editor content\n\n#### Init loading content into the editor\n\nIn case, you want to load initial data from database then display into the editor. you can use `v-model` directive with local component's state.\n\n```javascript\n// Declare local component's state is loaded from database\nexport default {\n  // ...\n  data() {\n    return {\n      editorContent: \"\u003ch1\u003eEditor contents\u003c/h1\u003e\"\n    };\n  }\n  // ...\n};\n```\n\n```HTML\n  // Assign to v-model directive\n  \u003ctemplate\u003e\n    \u003c!-- ... --\u003e\n    \u003cVueTrix v-model=\"editorContent\"/\u003e\n    \u003c!-- ... --\u003e\n  \u003c/template\u003e\n```\n\n#### Track data changes\n\nThe local component's state will be changed reactively when you modified contents inside the trix editor UI. Therefore, you need to `watch` the local state for updating content back to database\n\n```javascript\nexport default {\n  // ...\n  methods: {\n    updateEditorContent(value) {\n      // Update new content into the database via state mutations.\n    }\n  },\n  watch: {\n    editorContent: {\n      handler: \"updateEditorContent\"\n    }\n  }\n  // ...\n};\n```\n\n### Binding attachment events\n\nThe `\u003cVueTrix/\u003e` element emits several events which you can use to observe and respond to changes in editor state.\n\n- `@trix-file-accept` fires before an attachment is added to the document. If you don’t want to accept dropped or pasted files, call preventDefault() on this event.\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.\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### Process uploading attachment to remote server\n\nAdd binding event listener to `trix-attachment-add`\n\n```HTML\n  \u003ctemplate\u003e\n    \u003c!-- ... --\u003e\n    \u003cVueTrix @trix-attachment-add=\"handleAttachmentChanges\"/\u003e\n    \u003c!-- ... --\u003e\n  \u003c/template\u003e\n```\n\nIn Javascript\n\n```Javascript\n  const remoteHost = 'your remote host';\n\n  function handleAttachmentChanges(event) {\n    // 1. get file object\n    let file = event.attachment.file;\n\n    // 2. upload file to remote server with FormData\n    // ...\n\n    // 3. if upload success, set back the attachment's URL attribute\n    // @param object data from remote server response data after upload.\n    let attributes = {\n      url: remoteHost + data.path,\n      href: remoteHost + data.path\n    };\n    event.attachment.setAttributes(attributes);\n  }\n```\n\n## Trix document\n\n[Full documentation](https://github.com/basecamp/trix#readme)\n\n## Contributing\n\nIf you're interested in contributing to Vue-Trix or share your opinions, please consider to submitting a [**pull request**](https://github.com/hanhdt/vue-trix/pulls) or post [**issues**](https://github.com/hanhdt/vue-trix/issues). Also, I will try to code-self documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanhdt%2Fvue-trix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanhdt%2Fvue-trix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanhdt%2Fvue-trix/lists"}