{"id":20677330,"url":"https://github.com/manuelgeek/vuejs-medium-editor","last_synced_at":"2025-04-06T14:10:58.164Z","repository":{"id":38986658,"uuid":"206138483","full_name":"manuelgeek/vuejs-medium-editor","owner":"manuelgeek","description":"A medium like text editor for vue js WYSIWYG","archived":false,"fork":false,"pushed_at":"2024-04-03T17:54:57.000Z","size":8741,"stargazers_count":134,"open_issues_count":7,"forks_count":37,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T02:42:39.146Z","etag":null,"topics":["code","editor","js","medium-editor","vue","wysiwyg"],"latest_commit_sha":null,"homepage":"https://manuelgeek.github.io/vuejs-medium-editor/","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/manuelgeek.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-03T17:50:27.000Z","updated_at":"2024-06-19T13:27:38.217Z","dependencies_parsed_at":"2024-06-19T13:27:31.124Z","dependency_job_id":"c24a6618-46b9-446f-8340-807e261c8b87","html_url":"https://github.com/manuelgeek/vuejs-medium-editor","commit_stats":{"total_commits":16,"total_committers":3,"mean_commits":5.333333333333333,"dds":0.125,"last_synced_commit":"4aa2a9e0bf4747d222a275d607d27b2ed179ffbd"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelgeek%2Fvuejs-medium-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelgeek%2Fvuejs-medium-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelgeek%2Fvuejs-medium-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelgeek%2Fvuejs-medium-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manuelgeek","download_url":"https://codeload.github.com/manuelgeek/vuejs-medium-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247492513,"owners_count":20947544,"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":["code","editor","js","medium-editor","vue","wysiwyg"],"created_at":"2024-11-16T21:15:16.803Z","updated_at":"2025-04-06T14:10:58.143Z","avatar_url":"https://github.com/manuelgeek.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/vuejs-medium-editor.svg)](https://github.com/manuelgeek/vuejs-medium-editor) [![npm version](https://badgen.net/npm/dt/vuejs-medium-editor)](https://github.com/manuelgeek/vuejs-medium-editor) [![npm version](https://badgen.net/npm/license/lodash)](https://github.com/manuelgeek/vuejs-medium-editor)\n\n# VueJs Medium Editor\n\nVue 2 and 3 Js component for Medium Editor wrapper with https://github.com/yabwe/medium-editor\nBut all plugins are re-writing in Vue.js\nAll Medium Editor configs are supported\n\n## Demo\n\n[Demo](https://manuelgeek.github.io/vuejs-medium-editor/)\n\n## Features\n\n- Medium like editor\n- Image uploader and description\n  - Image width configable width for normal / expand / full screen sizing\n  - Imgur uploading\n- Embed Gist\n- Inline code syntax highlighting\n- Embed video\n  - Youtube video and shorts\n  - Vimeo video\n  - Loom video\n\n## Usage\n\n### Installation\n\n```\nyarn add vuejs-medium-editor\n\n# Vue 3\nyarn add vuejs-medium-editor@next\n\n```\n\nOR\n\n```\nnpm install vuejs-medium-editor\n\n# Vue 3\nnpm install vuejs-medium-editor@next\n```\n\n### Usage\n\nadd to global component in Vue 2\n\n```js\nimport Vue from 'vue'\nimport MediumEditor from 'vuejs-medium-editor'\n\nVue.component('medium-editor', MediumEditor)\n```\n\nOR Vue 3\n\n```js\nimport { createApp } from 'vue'\nimport MediumEditor from 'vuejs-medium-editor'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.component('medium-editor', MediumEditor)\napp.mount('#app')\n```\n\nDon't forget to include css file in your project\nFor Vue 2\n\n```js\nimport 'medium-editor/dist/css/medium-editor.css'\nimport 'vuejs-medium-editor/src/themes/default.css'\n// for the code highlighting\nimport 'highlight.js/styles/github.css'\n```\n\nOR in `styles` like below\n\n```css\n\u003cstyle lang=\"css\"\u003e\n@import \"~medium-editor/dist/css/medium-editor.css\";\n@import \"~vuejs-medium-editor/src/themes/default.css\";\n/*@import '~highlight.js/styles/github.css';*/\n@import '~highlight.js/styles/github.css';\n\u003c/style\u003e\n```\n\nFor for Vue 3\n\n```js\nimport 'medium-editor/dist/css/medium-editor.css'\nimport 'vuejs-medium-editor/dist/themes/default.css'\n// for the code highlighting\nimport 'highlight.js/styles/github.css'\n```\n\nOR in `styles` like below\n\n```css\n\u003cstyle lang=\"css\"\u003e\n@import \"medium-editor/dist/css/medium-editor.css\";\n@import \"vuejs-medium-editor/dist/themes/default.css\";\n/*@import '~highlight.js/styles/github.css';*/\n@import 'highlight.js/styles/github.css';\n\u003c/style\u003e\n```\n\n#### Example\n\n```vue\n\u003cmedium-editor\n  v-model=\"content\"\n  :options=\"options\"\n  :onChange=\"onChange\"\n  v-on:uploaded=\"uploadCallback\"\n/\u003e\n\n\u003cscript\u003e\nimport Editor from 'vuejs-medium-editor'\n\nexport default {\n  data() {\n    return {\n      content: '',\n      options: {},\n    }\n  },\n  components: {\n    'medium-editor': Editor,\n  },\n  methods: {\n    onChange() {\n      console.log(this.content)\n    },\n    uploadCallback(url) {\n      console.log('uploaded url', url)\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n### Available Props\n\n- prefill(string) - Pre filled editor value - default value,\n- readOnly(boolean) - make the editor read only. Default - false\n- options - used to pass editor options, see below\n- onChange - pass onchange event\n- hideImage - Hides image upload option (default -false)\n- hideGist - Hides gist code embed - default(false)\n- hideVideo - Hides video embed - default(false)\n\n### Events\n\n- uploaded - imgur image upload callback\n\n### Options\n\n#### toolbar\n\nyou can customize the toolbar buttons too\n\n```js\noptions: {\n  toolbar: {\n    buttons: [\n      'bold',\n      'italic',\n      'underline',\n      'quote',\n      'h1',\n      'h2',\n      'h3',\n      'pre',\n      'unorderedlist',\n    ]\n  }\n}\n```\n\navailable options: All options are available [here](https://github.com/yabwe/medium-editor#mediumeditor-options)\nYou can also override options like in Medium Editor ;\n\n```js\noptions: {\n  buttons: [\n    'anchor',\n    {\n      name: 'pre',\n      action: 'append-pre',\n      aria: 'code highlight',\n      tagNames: ['pre'],\n      contentDefault: '\u003cb\u003e\u003c\\\\\u003e\u003c/b\u003e',\n      contentFA: '\u003ci class=\"fa fa-code fa-lg\"\u003e\u003c/i\u003e',\n    },\n  ]\n}\n```\n\n### images\n\nUsing the image option in toolbar, Add image link, highlight to edit, then select image icon\n\n```js\nbuttons: [\n  {\n    name: 'image',\n    action: 'image',\n    aria: 'insert image from url',\n    tagNames: ['img'],\n    contentDefault: '\u003cb\u003eimage\u003c/b\u003e',\n    contentFA: '\u003ci class=\"fa fa-picture-o\"\u003e\u003c/i\u003e',\n  },\n]\n```\n\nAlso, available option: thanks to [ErgoFriend](https://github.com/ErgoFriend) pull request on the original repo\n\n```js\n options: {\n    uploadUrl: \"https://api.imgur.com/3/image\",\n    uploadUrlHeader: {'Authorization': 'Client-ID a3tw6ve4wss3c'},\n    file_input_name: \"image\",\n    file_size: 1024 * 1024 * 10,\n    imgur: true,\n }\n\n```\n\n### code highlighting\n\n1. Code highlighting is inbuilt using [highlight.js](https://github.com/highlightjs/highlight.js)\n   Add code snippet, highlight, then select code in toolbar(you need to add `pre` in toolbar, see options above)\n\nYou should include the `highligh.js` css file within the styles\n\n```css\n\u003cstyle\u003e\n    /*default css  */\n    @import 'highlight.js/styles/default.css';\n    /* github style */\n    @import 'highlight.js/styles/github.css';\n\u003c/style\u003e\n```\n\nYou can get [more theme styles here](https://highlightjs.org/static/demo/)\n\n2. Code highliting using gist, also inbuilt. Click + button, then click code(Add gist), then add gist URL, click Enter to finish\n\n### Read only example\n\n```vue\n\u003cmedium-editor :prefill=\"defaultValue\" :read-only=\"true\" /\u003e\n```\n\n### Nuxt.js Usage\n\ncreate a plugin file `vuejs-medium-editor.js` inside `/plugins` dir\n\n```js\nimport Vue from 'vue'\nimport MediumEditor from 'vuejs-medium-editor'\n\nVue.component('medium-editor', MediumEditor)\n```\n\nimport a plugin in nuxt.config.js with disable ssr mode\n\n```js\nplugins: [{ src: '~/plugins/vuejs-medium-editor', ssr: false }]\n```\n\ninclude a css file\nFor Vue 2\n\n```js\ncss: [\n  'medium-editor/dist/css/medium-editor.css',\n  'vuejs-medium-editor/src/themes/default.css',\n  'highlight.js/styles/github.css', //if using code highlight\n]\n```\n\nFor Vue 3\n\n```js\ncss: [\n  'medium-editor/dist/css/medium-editor.css',\n  'vuejs-medium-editor/dist/themes/default.css',\n  'highlight.js/styles/github.css', //if using code highlight\n]\n```\n\n## About Me\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://magak.me/assets/images/Geek-logo.png\" width=\"150\"\u003e\n\n\u003ca target=\"_blank\" href=\"https://magak.me\"\u003eMagak Emmanuel\u003c/a\u003e\n\n\u003c/p\u003e\n\n## License\n\n[MIT](LICENSE)\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](#)\n\n[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source-200x33.png?v=103)](#)\n\nHappy coding, Star before Fork 😊💪💯\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelgeek%2Fvuejs-medium-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuelgeek%2Fvuejs-medium-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelgeek%2Fvuejs-medium-editor/lists"}