{"id":19252961,"url":"https://github.com/betasu/my-vue-editor","last_synced_at":"2025-04-21T13:31:24.802Z","repository":{"id":57306357,"uuid":"111767026","full_name":"BetaSu/my-vue-editor","owner":"BetaSu","description":"a rich text editor for Vue 2.x","archived":false,"fork":false,"pushed_at":"2021-05-07T06:37:18.000Z","size":1156,"stargazers_count":126,"open_issues_count":12,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-01T13:43:23.576Z","etag":null,"topics":["editor","vue","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/BetaSu.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}},"created_at":"2017-11-23T05:27:15.000Z","updated_at":"2023-10-11T19:00:57.000Z","dependencies_parsed_at":"2022-09-20T22:02:02.584Z","dependency_job_id":null,"html_url":"https://github.com/BetaSu/my-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/BetaSu%2Fmy-vue-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fmy-vue-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fmy-vue-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fmy-vue-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BetaSu","download_url":"https://codeload.github.com/BetaSu/my-vue-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250064644,"owners_count":21368944,"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":["editor","vue","wysiwyg-editor"],"created_at":"2024-11-09T18:29:01.756Z","updated_at":"2025-04-21T13:31:24.507Z","avatar_url":"https://github.com/BetaSu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# my-vue-editor\n[![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://github.com/BetaSu/my-vue-editor)\n[![Packagist](https://img.shields.io/packagist/l/doctrine/orm.svg)](https://github.com/BetaSu/my-vue-editor)\n[![Plugin on redmine.org](https://img.shields.io/redmine/plugin/stars/redmine_xlsx_format_issue_exporter.svg)](https://github.com/BetaSu/my-vue-editor)\n\nA rich text editor based on Vue2.x\u003cbr\u003e\n\u003ca href=\"https://github.com/BetaSu/my-vue-editor/blob/master/README_CN.md\"\u003e中文文档\u003c/a\u003e\u003cbr\u003e\n## Demo\n\u003ca href=\"https://betasu.github.io/my-vue-editor/dist/index.html\"\u003eclick here to see demo\u003c/a\u003e\u003cbr\u003e\nMore demo please refer to the example directory\n## Introduction\nOur editor is based on \u003ca href=\"https://github.com/PeakTai/vue-html5-editor\"\u003evue-html5-editor\u003c/a\u003e secondary development. Thanks to its author \u003ca href=\"https://github.com/PeakTai\"\u003ePeakTai\u003c/a\u003e for providing a concise rich text editor plug-in, on the basis of which we have rewritten the native method and extended the functionality.\n## Install\n```javascript\nnpm install my-vue-editor\n``` \nIntroduced as a plug-in\n```javascript\nimport Vue from 'vue'\nimport myVueEditor from 'my-vue-editor'\nVue.use(myVueEditor, options)\n``` \nGlobal introduction\n```html\n\u003cscript src=\"serverpath/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"serverpath/dist/my-vue-editor.js\"\u003e\u003c/script\u003e\n``` \nInstalled by the global variable myVueEditor\n ```javascript\n Vue.use(myVueEditor, options)\n ```\nUse\n```html\n\u003cmy-vue-editor :content=\"content\" @change='ctnChange' @imageUpload='imageUpload'\u003e\u003c/my-vue-editor\u003e\n```\n## Configuration\n \n| Items        | Type           | Description  | \n| ------------- |:-------------:|:-----|\n| name      | String | Custom component name, the default is my-vue-editor | \n| modules      | Array | Modules need to use | \n| icons    | Object      | Covering the specified module's icon |\n| commands | Object      | Custom command |\n| shortcut | Object      | Custom shortcut | \n| extendModules | Array      | Custom module |\n| Any built-in module name | Object      | Overwrite the properties of the corresponding built-in module |\n### example\n```javascript\nVue.use(myVueEditor, {\n  // Overlay built-in module's icon\n  icons: {\n    image: 'iui-icon iui-icon-pic',\n    indent: 'iui-icon iui-icon-insert'\n  },\n  // Modules in use\n  modules: [\n    'font',\n    'bold',\n    'italic',\n    'underline',\n    'linethrough',\n    'ul',\n    'indent',\n    'align',\n    'image',\n    'quote',\n    'todo',\n    // This is a custom module\n    'customSave'\n  ],\n  // Overlay image module's configuration\n  image: {\n    maxSize: 5120 * 1024,\n    imgOccupyNewRow: true,\n    compress: {\n      width: 1600,\n      height: 1600,\n      quality: 0.8\n    }\n  },\n  // Overlay font module's configuration\n  font: {\n    config: {\n      'xx-large': {\n        fontSize: 6,\n        name: 'H1'\n      },\n      'medium': {\n        fontSize: 3,\n        name: 'H2'\n      },\n      'small': {\n        fontSize: 2,\n        name: 'H3'\n      },\n      default: 'medium'\n    },\n    // Modify the font module's module inspect mechanism to inspect via style and tag name\n    inspect (add) {\n      add('style', {\n        fontSize: ['xx-large', 'x-large', 'large', 'medium', 'small']\n      }).add('tag', 'font')\n    }\n  },\n  // Overlay ul module's configuration\n  ul: {\n    // When the ul module is inspected, disabled all but itself\n    exclude: 'ALL_BUT_MYSELF',\n    // When the ul module is clicked, execute the following method\n    handler (rh) {\n     console.log('i am ul!')\n     rh.editor.execCommand('insertUnorderedList')  \n    }\n  },\n  // When the ul module is inspected, disabled image, todo and ul module\n  quote: {\n    exclude: ['image', 'todo', 'ul']\n  },\n  // Customize an command named getAllTexts that prints out all the text nodes under the current range object\n  commands: {\n    getAllTexts (rh, arg) {\n      console.log(rh.getAllTextNodeInRange())\n    }\n  },\n  shortcut: {\n    // Custom a shortcut key, when you press the command + s, execute the save function\n    saveNote: {\n      metaKey: true,\n      keyCode: 83,\n      handler (editor) {\n        save()\n      }\n    }\n  },\n  // Customize a module, a alert pops up when you click on the module icon\n  extendModules: [{\n     name: 'smile',\n     icon: 'iui iui-icon-smile'\n     handler (rh) {\n      alert('smile~~')\n     }\n  }]\n})\n```\n\n## Event\n| Event name        | Description          |\n| ------------- |:-------------|\n| change      | Trigger when editor content changes, parameter is up-to-date content data |\n| imageUpload  | Trigger when uploading images, parameters include the corresponding data of the image，\u003cbr\u003ereplaceSrcAfterUploadFinish:Used to replace the src attribute of img from the base64 format to the url returned by the server when the upload is successful）\u003cbr\u003edeleteImgWhenUploadFail:Used to delete the current picture when the upload fails|\n## Modify the built-in module\nAdd a parameter with a built-in module's name as it's key, will cover the built-in module's original properties(See all built-in modules and their configuration items in src/modules directory）\n### Take the image module as an example\n```javascript\nVue.user(myVueEditor, {\n  image: {\n    // Modify the image module's icon\n    icon: 'iui-pic',\n    // Cover the original compression parameters, so that the image is not compressed when uploaded\n    compress: null,\n    // Can not upload the same image repeatedly\n    canUploadSameImage: false\n  }\n})\n```\n## Cutom module\nExtend the module with the extendModules configuration item\nWe provide some common module configuration items\n\n| Item        | Type          | Description   |\n| ------------- |:-------------|:------------|\n| name      | String | module's name|\n| icon      | String | module icon's className，The fontAwesome icon is used by default|\n| exclude      | String Array | disabled modules When current module is inspected\u003cbr\u003eWhen value is 'ALL' means disable all modules include current module\u003cbr\u003eWhen value is'ALL_BUT_MYSELF', means disabled all modules but current module\u003cbr\u003eWhen value is type of Array, Input module name to be disabled|\n| inspect      | Function | module inspect，When the cursor is in the list, the list module is highlighted, that is, the list module is inspected, which is based on its UL label as a test basis\u003cbr\u003eThe first argument to the function is a method named add, which called to add the module's inspection basis. When there are multiple inspection bases, please call chaining\u003cbr\u003eThe first parameter of the add method indicates what path to test. The optional is 'tag' 'style' and 'attribute'\u003cbr\u003eWhen parameter 1 is 'tag', parameter 2 passes in a tag name string\u003cbr\u003eWhen parameter 1 is 'style', parameter 2 is an object with styleName as key and styleValue as value. Note styleName use the hump form（ex：fontSize），When there are multiple styleValue please use the form of Array\u003cbr\u003eWhen parameter 1 is 'attribute', parameter 2 is an object whose key is attribute name and attribute value is value, and note that if any value is desired, pass in ''（ex：add('attribute', {'data-todo': ''})）|\n| handler      | Function | What to do when you click the module\u003cbr\u003eParameter 1 is range-handler instance, through which can you get the Vue instance of the current editor and the method to operate range\u003cbr\u003eWe do not recommend operating range directly in the handler, but should encapsulate the range action as a command, calling the command via the execCommand method under the editor instance in the handler|\n| tab      | Vue instance | Conventional modules use handlers for handling clicks, and if you want to implement UI (drop-down list of font modules) or more complex logic (left-to-right switching of align modules), use tab|\n| init      | Function |Corresponds to the editor component life cycle created, the parameter 1 is the editor instance. Note that the execCommand method can not be used at this time|\n| mounted      | Function | Corresponds to the editor component life cycle mounted, the parameter 1 is the editor instance.|\n| updated      | Function | Corresponds to the editor component life cycle updated, the parameter 1 is the editor instance.|\n| destroyed      | Function | Corresponds to the editor component life cycle beforeDestroy, the parameter 1 is the editor instance.|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetasu%2Fmy-vue-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetasu%2Fmy-vue-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetasu%2Fmy-vue-editor/lists"}