Skip to content

Instantly share code, notes, and snippets.

@Pyronerd62
Created May 22, 2019 14:28
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pyronerd62/b361822cce661152a80cdeb80a2ddb7f to your computer and use it in GitHub Desktop.
Save Pyronerd62/b361822cce661152a80cdeb80a2ddb7f to your computer and use it in GitHub Desktop.
Add TinyMCE to Vue JS App
<style lang="scss" scoped>
.tinyMce-container{
margin-top: 3%;
margin-bottom: 3%;
}
</style>
<template>
<div>
<pre v-html="description"></pre>
<editor v-model="description"></editor>
</div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue';
// Uncomment to install in component specifically. Be sure to comment out the part in main.js
// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
import "tinymce/tinymce"
import "tinymce/themes/silver"
import "../../public/skins/ui/oxide/skin.min.css"
import "../../public/skins/ui/oxide/content.min.css"
import "../../public/skins/content/default/content.min.css"
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
export default {
name: 'home',
components:{
Editor,
},
data() {
return {
description:'',
};
},
}
</script>

First Install TinyMce

npm i tinymce
npm install @tinymce/tinymce-vue

Then Copy Skins to your public folder by running this command at the project root

cp -r node_modules/tinymce/skins public/skins

See Repo https://github.com/Pyronerd62/TinyMCEVueJs

import Vue from 'vue'
import App from './App.vue'
import router from './router'
/*
// Install Globally. Comment out to install in a specific component
// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
import "tinymce/tinymce"
import "tinymce/themes/silver"
import "../public/skins/ui/oxide/skin.min.css"
import "../public/skins/ui/oxide/content.min.css"
import "../public/skins/content/default/content.min.css"
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
*/
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
@prashant1k99
Copy link

Thanks for the Help..... Really a great work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment