{"id":17967318,"url":"https://github.com/readybytes/rb-vue-editor","last_synced_at":"2025-04-03T21:28:20.521Z","repository":{"id":57138754,"uuid":"403005794","full_name":"readybytes/rb-vue-editor","owner":"readybytes","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-04T09:43:20.000Z","size":9423,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-18T05:47:16.870Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/readybytes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-04T08:36:00.000Z","updated_at":"2021-09-07T03:35:19.000Z","dependencies_parsed_at":"2022-09-03T10:40:54.142Z","dependency_job_id":null,"html_url":"https://github.com/readybytes/rb-vue-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readybytes%2Frb-vue-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readybytes%2Frb-vue-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readybytes%2Frb-vue-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/readybytes%2Frb-vue-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/readybytes","download_url":"https://codeload.github.com/readybytes/rb-vue-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247081350,"owners_count":20880413,"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":[],"created_at":"2024-10-29T14:06:21.164Z","updated_at":"2025-04-03T21:28:20.505Z","avatar_url":"https://github.com/readybytes.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rb-vue-editor\n\n## Demo\n\n![Demo](./src/assets/demo.gif)\n\n#### [Codesandbox Example](https://codesandbox.io/s/rb-vue-editor-demo-k159b)\n## Installation\n\n```\nnpm install --save @readybytes/rb-vue-editor\n```\n\nor\n\n```\nyarn add @readybytes/rb-vue-editor\n```\n\n## Declaration\n\n```\n\u003cscript\u003e\nimport RBVueEditor from \"@readybytes/rb-vue-editor\";\n\nexport default {\n  name: \"HelloWorld\"\n  components: {\n    RBVueEditor\n  }\n}\n\u003cscript\u003e\n```\n\n## Basic Usage\n\n#### Example-1\n\n```\n\u003cRBVueEditor v-model=\"text\"\u003e\u003c/RBVueEditor\u003e\n```\n#### Example-2\n\n```\n\u003cRBVueEditor\n  v-model=\"text\"\n  :config=\"{\n    placeholder: 'Type...',\n    background: '#1A76D2',\n  }\"\n  @on-update=\"onUpdate\"\n\u003e\u003c/RBVueEditor\u003e\n```\n#### Example-3\n\n```\n\u003cRBVueEditor\n  v-model=\"text\"\n  type=\"textarea\"\n  :config=\"{\n    placeholder: 'Type...',\n    background: '#1A76D2',\n    family: 'sans-serif',\n    size: 'large',\n    color: '#000000',\n    bold: true,\n    italic: true,\n    width: 300,\n    borderColor: '#1A76D2'\n  }\"\n  @on-update=\"onUpdate\"\n\u003e\u003c/RBVueEditor\u003e\n```\n\n## Properties\n- `type`\n  - **Type** - String\n  - **Required** - No\n  - **Default**- 'input'\n  - **Description** - This prop is to create the requested type's input field.\n  - **Support Values**- 'input', 'textarea'\n\n- `config`\n\n  - **Type** - Object\n  - **Required** - No\n  - **Description** - This prop is going to have all values of edit properties.\n  - **Properties** -\n    | Name | Type | Required | Description | Support Values |\n    | ---- | ---- |--------- |------------ |--------------- |\n    | placeholder | String/Null | No | The placeholder for the text box. | any string|\n    | bold | Boolean | No | To bold the text. | true/false |\n    | italic | Boolean | No | To italic the text. | true/false |\n    | color | String/Null | No | To change the color of the text. | any hex color value |\n    | background | String/Null | No | To change the color of the text box. | any hex color value |\n    | size | String/Null | No | To change the font size of the text. | \"xx-small\",\"x-small\",\"small\",\"medium\",\"large\",\"x-large\",\"xx-large\",\"xxx-large\",\"smaller\",\"larger\",\"inherit\",\"initial\",\"unset\", |\n    | family | String/Null | No | To change the font family of the text. | \"serif\",\"sans-serif\",\"monospace\",\"cursive\",\"fantasy\",\"system-ui\",\"ui-serif\",\"ui-sans-serif\",\"ui-monospace\",\"ui-rounded\",\"emoji\",\"math\",\"fangsong\" |\n    | width | String/Number | No | To change the width of the text box. | 300 or \"300\" |\n    | borderColor | String | No | To change the border color of the text box. | any hex color value |\n\n## Events-\n\n- `on-update`\n\n    This event will fire when any style will be updated. i.e-\n\n  ```\n   \u003ctemplate\u003e\n    \u003cRBVueEditor\n      v-model=\"text\"\n      type=\"textarea\",\n      :config=\"{\n        placeholder: 'Type...',\n        background: '#1A76D2',\n        family: 'sans-serif',\n        size: 'large',\n        color: '#000000',\n        bold: true,\n        italic: true,\n        width: 300,\n        borderColor: '#1A76D2'\n      }\"\n      @on-update=\"onUpdate\"\n    \u003e\n    \u003c/RBVueEditor\u003e\n   \u003c/template\u003e\n\n   \u003cscript\u003e\n    export default {\n      data() {\n        return {\n          text: \"Hello World\",\n        }\n      }\n      methods:{\n        onUpdate(event) {\n          console.log(event)\n        }\n      }\n    }\n   \u003c/script\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freadybytes%2Frb-vue-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freadybytes%2Frb-vue-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freadybytes%2Frb-vue-editor/lists"}