A medium like text editor for vue js WYSIWYG
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
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
add to global component in Vue 2
import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'
Vue.component('medium-editor', MediumEditor)
OR Vue 3
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
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
<style lang="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';
</style>
For for Vue 3
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
<style lang="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';
</style>
<medium-editor
v-model="content"
:options="options"
:onChange="onChange"
v-on:uploaded="uploadCallback"
/>
<script>
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)
},
},
}
</script>
you can customize the toolbar buttons too
options: {
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'quote',
'h1',
'h2',
'h3',
'pre',
'unorderedlist',
]
}
}
available options: All options are available here You can also override options like in Medium Editor ;
options: {
buttons: [
'anchor',
{
name: 'pre',
action: 'append-pre',
aria: 'code highlight',
tagNames: ['pre'],
contentDefault: '<b><\\></b>',
contentFA: '<i class="fa fa-code fa-lg"></i>',
},
]
}
Using the image option in toolbar, Add image link, highlight to edit, then select image icon
buttons: [
{
name: 'image',
action: 'image',
aria: 'insert image from url',
tagNames: ['img'],
contentDefault: '<b>image</b>',
contentFA: '<i class="fa fa-picture-o"></i>',
},
]
Also, available option: thanks to ErgoFriend pull request on the original repo
options: {
uploadUrl: "https://api.imgur.com/3/image",
uploadUrlHeader: {'Authorization': 'Client-ID a3tw6ve4wss3c'},
file_input_name: "image",
file_size: 1024 * 1024 * 10,
imgur: true,
}
pre
in toolbar, see options above)You should include the highligh.js
css file within the styles
<style>
/*default css */
@import 'highlight.js/styles/default.css';
/* github style */
@import 'highlight.js/styles/github.css';
</style>
You can get more theme styles here
<medium-editor :prefill="defaultValue" :read-only="true" />
create a plugin file vuejs-medium-editor.js
inside /plugins
dir
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
plugins: [{ src: '~/plugins/vuejs-medium-editor', ssr: false }]
include a css file For Vue 2
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
css: [
'medium-editor/dist/css/medium-editor.css',
'vuejs-medium-editor/dist/themes/default.css',
'highlight.js/styles/github.css', //if using code highlight
]
Happy coding, Star before Fork 😊💪💯