{"id":13535757,"url":"https://github.com/hifarer/Vueditor","last_synced_at":"2025-04-02T02:31:16.862Z","repository":{"id":8799526,"uuid":"59802364","full_name":"hifarer/vueditor","owner":"hifarer","description":"A wysiwyg editor written in Vue.js and Vuex.js","archived":false,"fork":false,"pushed_at":"2023-10-31T11:35:05.000Z","size":3115,"stargazers_count":644,"open_issues_count":48,"forks_count":109,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-28T04:37:24.501Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hifarer.github.io/vueditor/","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/hifarer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-27T03:50:14.000Z","updated_at":"2025-03-19T08:21:24.000Z","dependencies_parsed_at":"2024-01-17T16:57:20.773Z","dependency_job_id":"8758ed64-e1a1-4bf8-8f65-f7728a1fbe6b","html_url":"https://github.com/hifarer/vueditor","commit_stats":{"total_commits":80,"total_committers":6,"mean_commits":"13.333333333333334","dds":0.3125,"last_synced_commit":"e85772f798563b77cb23a8d57fa7f8a702efb967"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifarer%2Fvueditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifarer%2Fvueditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifarer%2Fvueditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hifarer%2Fvueditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hifarer","download_url":"https://codeload.github.com/hifarer/vueditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743601,"owners_count":20826559,"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-08-01T09:00:25.977Z","updated_at":"2025-04-02T02:31:16.519Z","avatar_url":"https://github.com/hifarer.png","language":"Vue","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"Vueditor\n===\n\n# Please note that this project has not been maintained for a long time, and there are some unfixed bugs, do not use it in a production environment.\n\n[![vueditor](https://img.shields.io/npm/v/vueditor.svg)](https://www.npmjs.com/package/vueditor)\n[![vueditor](https://img.shields.io/npm/l/vueditor.svg)](https://www.npmjs.com/package/vueditor)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n[中文文档](./docs/chinese.md)\n\nA wysiwyg editor written in Vue.js and Vuex.js, require Vue.js 2.0.0, Vuex.js 2.0.0 and above.\n\nBrowser compatibility: Chrome, Firefox, Safari, IE 9+.\n\nOnline [DEMO](http://hifarer.github.io/vueditor/)\n\n## Screenshot\n\n![vueditor](./vueditor.gif)\n\n## Features\n\n- Customizable\n- Light weighted, very few dependencies\n- Plugin support\n\n## Installation\n```javascript\nnpm install vueditor\n```\n\nIf you prefer to use it via script tag, download the last release package and add `vueditor.min.js`, `vueditor.min.css` to your page. \n\n## Usage\n\n### Vue.use(Vueditor, config)\n\nUse it in the following cases:\n\n1. Only one editor required\n2. Multiple editors required but shared the same config\n\n```javascript\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport Vueditor from 'vueditor'\n\nimport 'vueditor/dist/style/vueditor.min.css'\n\n// your config here\nlet config = {\n  toolbar: [\n    'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor'\n  ],\n  fontName: [\n    {val: 'arial black'}, \n    {val: 'times new roman'}, \n    {val: 'Courier New'}\n  ],\n  fontSize: ['12px', '14px', '16px', '18px', '0.8rem', '1.0rem', '1.2rem', '1.5rem', '2.0rem'],\n  uploadUrl: ''\n};\n\nVue.use(Vuex);\nVue.use(Vueditor, config);\n// create a root instance\nnew Vue({\n  el: '#editorContainer'\n});\n```\n\nThen in your vue template somewhere:\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    ...\n    \u003cVueditor\u003e\u003c/Vueditor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nTo get and set content you need to acquire the Vueditor component, you can use `$children[index]` or `ref` to do that.\n\n```javascript\nlet parent = new Vue({\n  el: '#editor1'\n});\nlet editor = parent.$children[0];\neditor.setContent('your content here');\neditor.getContent();\n```\n\n### createEditor(selector, config)\n\nCall `createEditor` and pass specific config as parameter respectively for multiple editors in a page. \n\n```javascript\n\n  import Vue from 'vue'\n  import Vuex from 'vuex'\n  import { createEditor } from 'vueditor'\n\n  import 'vueditor/dist/style/vueditor.min.css'\n  \n  Vue.use(Vuex);\n\n  createEditor('#editorContainer', {\n    toolbar: [\n      'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', \n    ],\n    uploadUrl: '',\n    id: '',\n    classList: []\n  });\n```\n\nThe initialized element will be replaced in this case, you can add classList or id to the config for adding styles, the rendered element will have these attributes. `createEditor` returns a vueditor instance, you can set and get content with it:\n\n```javascript\nlet inst = createEditor(...);\ninst.setContent('your content here');\ninst.getContent();\n```\n\n#### File upload\n\nYou can set `uploadUrl` attribute in config when you initialize an editor, all the upload stuffs will be handled automatically. If you perfer do it yourself or has some authrization to do before uploading, just add a function `upload` to the instance returned by `createEditor`. When an upload action triggered, vueditor will call this function instead of the build-in function. The upload function has two arguments: `obj` refer to the file input element, `callback` requires the uploaded file url as argument for inserting content to the editor, See the example below: \n```javascript\neditor.upload = function (obj, callback) {\n  let formData = new FormData();\n  let xhr = new XMLHttpRequest();\n  formData.append('fieldName', obj.files[0]);\n  xhr.open('POST', 'upload/url');\n  xhr.send(formData);\n  xhr.onload = function () {\n    callback(xhr.responseText);\n  };\n  xhr.onerror = function (err) {\n    console.log(err);\n  }\n}\n```\n\n### language setting\n\nThe editor's default language is English, to set to other language, you will need to translate for your own.\nThe `dist/language` folder has an full example inside. Adding a script tag or use `import`, `require` to    \nbring the language object in, then make it an attribute of the config for initialize. See the example below:\n```javascript\nVue.use(Vueditor, {\n  ...\n  lang: languageObject,\n});\n```\n\n## Options for configuration:\n\n|          Name         |    Type    |                                                         Description                                                         |\n| --------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |\n| spellcheck            | `Boolean`  | Check spell or not, default is false |\n| lang                  | `Object`   | Interface language, default is English |\n| toolbar               | `Array`   | Buttons on the toolbar, use `|` or `divider` as separator for grouping |\n| fontName              | `Array`   | The font-family select's options, `val` refer to the actual css value, `abbr` refer to the option's text, `abbr` is optional when equals to `val` |\n| fontSize              | `Array`    | The font-size select's options |\n| uploadUrl         | `String`   | File upload url, the return result of this must be a string refer to the uploaded file url, leave it empty will end up with local preview |\n| id                    | `String`   | id for the rendered editor element |\n| classList             | `Array`    | className for the rendered editor element |\n| plugins             | `Array`    | plugins for editor |\n\n\nDefault value of the above fields:\n\n```javascript\n{\n  toolbar: [\n    'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', 'divider',\n    'bold', 'italic', 'underline', 'strikeThrough', 'links', 'divider', 'subscript', 'superscript',\n    'divider', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', '|', 'indent', 'outdent',\n    'insertOrderedList', 'insertUnorderedList', '|', 'picture', 'tables', '|', 'switchView'\n  ],\n  fontName: [\n    {val: 'arial black'}, \n    {val: 'times new roman'}, \n    {val: 'Courier New'}\n  ],\n  fontSize: [\n    '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'\n  ],\n  uploadUrl: ''\n  id: '',\n  classList: []\n};\n```\n\n## Change log\n\nSee [change log](./docs/changelog.md)\n\n## Bug confirmed\n\n## TODO\n\n- [x] Markdown support\n- [x] Full screen and fixed toolbar features\n- [x] Popup menu position auto adjust\n- [ ] Advanced table options\n- [ ] Code highlight\n- [ ] Plugin support\n- [ ] XSS prevention\n- [ ] Test\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2016 hifarer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhifarer%2FVueditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhifarer%2FVueditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhifarer%2FVueditor/lists"}