Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manuelgeek/vuejs-medium-editor
A medium like text editor for vue js WYSIWYG
https://github.com/manuelgeek/vuejs-medium-editor
code editor js medium-editor vue wysiwyg
Last synced: 2 days ago
JSON representation
A medium like text editor for vue js WYSIWYG
- Host: GitHub
- URL: https://github.com/manuelgeek/vuejs-medium-editor
- Owner: manuelgeek
- License: mit
- Created: 2019-09-03T17:50:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-03T17:54:57.000Z (9 months ago)
- Last Synced: 2024-04-24T02:42:39.146Z (8 months ago)
- Topics: code, editor, js, medium-editor, vue, wysiwyg
- Language: Vue
- Homepage: https://manuelgeek.github.io/vuejs-medium-editor/
- Size: 8.34 MB
- Stars: 134
- Watchers: 3
- Forks: 37
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/manuelgeek/vuejs-medium-editor) [](https://github.com/manuelgeek/vuejs-medium-editor) [](https://github.com/manuelgeek/vuejs-medium-editor)
# VueJs Medium Editor
Vue 2 and 3 Js component for Medium Editor wrapper with https://github.com/yabwe/medium-editor
But all plugins are re-writing in Vue.js
All Medium Editor configs are supported
## Demo
[Demo](https://manuelgeek.github.io/vuejs-medium-editor/)
## Features
- Medium like editor
- Image uploader and description
- Image width configable width for normal / expand / full screen sizing
- Imgur uploading
- Embed Gist
- Inline code syntax highlighting
- Embed video
- Youtube video and shorts
- Vimeo video
- Loom video
## Usage
### Installation
```
yarn add vuejs-medium-editor
# Vue 3
yarn add vuejs-medium-editor@next
```
OR
```
npm install vuejs-medium-editor
# Vue 3
npm install vuejs-medium-editor@next
```
### Usage
add to global component in Vue 2
```js
import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'
Vue.component('medium-editor', MediumEditor)
```
OR Vue 3
```js
import { createApp } from 'vue'
import MediumEditor from 'vuejs-medium-editor'
import App from './App.vue'
const app = createApp(App)
app.component('medium-editor', MediumEditor)
app.mount('#app')
```
Don't forget to include css file in your project
For Vue 2
```js
import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'
```
OR in `styles` like below
```css
@import "~medium-editor/dist/css/medium-editor.css";
@import "~vuejs-medium-editor/src/themes/default.css";
/*@import '~highlight.js/styles/github.css';*/
@import '~highlight.js/styles/github.css';
```
For for Vue 3
```js
import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/dist/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'
```
OR in `styles` like below
```css
@import "medium-editor/dist/css/medium-editor.css";
@import "vuejs-medium-editor/dist/themes/default.css";
/*@import '~highlight.js/styles/github.css';*/
@import 'highlight.js/styles/github.css';
```
#### Example
```vue
import Editor from 'vuejs-medium-editor'
export default {
data() {
return {
content: '',
options: {},
}
},
components: {
'medium-editor': Editor,
},
methods: {
onChange() {
console.log(this.content)
},
uploadCallback(url) {
console.log('uploaded url', url)
},
},
}
```
### Available Props
- prefill(string) - Pre filled editor value - default value,
- readOnly(boolean) - make the editor read only. Default - false
- options - used to pass editor options, see below
- onChange - pass onchange event
- hideImage - Hides image upload option (default -false)
- hideGist - Hides gist code embed - default(false)
- hideVideo - Hides video embed - default(false)
### Events
- uploaded - imgur image upload callback
### Options
#### toolbar
you can customize the toolbar buttons too
```js
options: {
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'quote',
'h1',
'h2',
'h3',
'pre',
'unorderedlist',
]
}
}
```
available options: All options are available [here](https://github.com/yabwe/medium-editor#mediumeditor-options)
You can also override options like in Medium Editor ;
```js
options: {
buttons: [
'anchor',
{
name: 'pre',
action: 'append-pre',
aria: 'code highlight',
tagNames: ['pre'],
contentDefault: '<\\>',
contentFA: '',
},
]
}
```
### images
Using the image option in toolbar, Add image link, highlight to edit, then select image icon
```js
buttons: [
{
name: 'image',
action: 'image',
aria: 'insert image from url',
tagNames: ['img'],
contentDefault: 'image',
contentFA: '',
},
]
```
Also, available option: thanks to [ErgoFriend](https://github.com/ErgoFriend) pull request on the original repo
```js
options: {
uploadUrl: "https://api.imgur.com/3/image",
uploadUrlHeader: {'Authorization': 'Client-ID a3tw6ve4wss3c'},
file_input_name: "image",
file_size: 1024 * 1024 * 10,
imgur: true,
}
```
### code highlighting
1. Code highlighting is inbuilt using [highlight.js](https://github.com/highlightjs/highlight.js)
Add code snippet, highlight, then select code in toolbar(you need to add `pre` in toolbar, see options above)
You should include the `highligh.js` css file within the styles
```css
/*default css */
@import 'highlight.js/styles/default.css';
/* github style */
@import 'highlight.js/styles/github.css';
```
You can get [more theme styles here](https://highlightjs.org/static/demo/)
2. Code highliting using gist, also inbuilt. Click + button, then click code(Add gist), then add gist URL, click Enter to finish
### Read only example
```vue
```
### Nuxt.js Usage
create a plugin file `vuejs-medium-editor.js` inside `/plugins` dir
```js
import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'
Vue.component('medium-editor', MediumEditor)
```
import a plugin in nuxt.config.js with disable ssr mode
```js
plugins: [{ src: '~/plugins/vuejs-medium-editor', ssr: false }]
```
include a css file
For Vue 2
```js
css: [
'medium-editor/dist/css/medium-editor.css',
'vuejs-medium-editor/src/themes/default.css',
'highlight.js/styles/github.css', //if using code highlight
]
```
For Vue 3
```js
css: [
'medium-editor/dist/css/medium-editor.css',
'vuejs-medium-editor/dist/themes/default.css',
'highlight.js/styles/github.css', //if using code highlight
]
```
## About Me
## License
[MIT](LICENSE)
[](#)
[](#)
Happy coding, Star before Fork 😊💪💯