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
<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> |
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
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') |
Thanks for the Help..... Really a great work.