I'm trying to use Tinymce
with vue, but so far unsuccessful, I've already used various and none of them worked.
<template>
<div>
<Button type="primary" @click="newPost = true">Adicionar Novo</Button>
<Table border ref="selection" :columns="posts" :data="dataPosts" style="margin-top: 20px;"></Table>
<Modal v-model="newPost" title="Criar novo post" ok-text="Cadastrar" cancel-text="Cancelar" width="90%">
<tiny-mce
id="editor"
>
</tiny-mce>
</Modal>
</div>
</template>
<script>
import TinyMCE from 'tinymce-vue-2'
export default{
data(){
return{
newPost: false,
editor: '',
posts: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: 'Titulo',
key: 'titulo'
},
{
title: 'Autor',
key: 'autor'
},
{
title: 'Categorias',
key: 'categorias'
},
{
title: 'Tags',
key: 'tags'
},
{
title: 'Comentarios',
key: 'comentarios'
},
{
title: 'Data',
key: 'data'
}
],
dataPosts: [
{
titulo: 'Primeiro POST',
autor: 'Rafael A.',
categorias: 'Teste',
tags: 'Empreendedorismo',
comentarios: '0 Comentarios',
data: 'Publicado a 33 min'
}
]
}
},
components: {
'tiny-mce': TinyMCE
}
}
</script>
Using this way, console
always points to error
[Vue warn]: Error in mounted hook: "ReferenceError: tinymce is not defined"
found in
---> <TinyMce> at node_modules\tinymce-vue-2\TinyMce.vue
<Modal>
<Posts> at src\components\Posts.vue
<ICol>
<Row>
<Dashboard> at src\pages\Dashboard.vue
<App> at src\App.vue
<Root>
warn @ vue.esm.js?65d7:476
handleError @ vue.esm.js?65d7:559
callHook @ vue.esm.js?65d7:2703
insert @ vue.esm.js?65d7:3588
invokeInsertHook @ vue.esm.js?65d7:5541
patch @ vue.esm.js?65d7:5744
Vue._update @ vue.esm.js?65d7:2460
updateComponent @ vue.esm.js?65d7:2574
get @ vue.esm.js?65d7:2917
run @ vue.esm.js?65d7:2994
flushSchedulerQueue @ vue.esm.js?65d7:2760
(anonymous) @ vue.esm.js?65d7:698
nextTickHandler @ vue.esm.js?65d7:645
Promise resolved (async)
timerFunc @ vue.esm.js?65d7:660
queueNextTick @ vue.esm.js?65d7:708
queueWatcher @ vue.esm.js?65d7:2847
update @ vue.esm.js?65d7:2984
notify @ vue.esm.js?65d7:775
reactiveSetter @ vue.esm.js?65d7:997
proxySetter @ vue.esm.js?65d7:3109
(anonymous) @ iview.js?5654:20532
Vue.$emit @ vue.esm.js?65d7:2331
dispatch @ iview.js?5654:511
boundFn @ vue.esm.js?65d7:178
handleClick @ iview.js?5654:20709
boundFn @ vue.esm.js?65d7:179
click @ iview.js?5654:20741
invoker @ vue.esm.js?65d7:1821
vue.esm.js?65d7:563 ReferenceError: tinymce is not defined
at VueComponent.mounted (TinyMce.vue?1083:35)
at callHook (vue.esm.js?65d7:2701)
at Object.insert (vue.esm.js?65d7:3588)
at invokeInsertHook (vue.esm.js?65d7:5541)
at VueComponent.patch [as __patch__] (vue.esm.js?65d7:5744)
at VueComponent.Vue._update (vue.esm.js?65d7:2460)
at VueComponent.updateComponent (vue.esm.js?65d7:2574)
at Watcher.get (vue.esm.js?65d7:2917)
at Watcher.run (vue.esm.js?65d7:2994)
at flushSchedulerQueue (vue.esm.js?65d7:2760)
handleError @ vue.esm.js?65d7:563
callHook @ vue.esm.js?65d7:2703
insert @ vue.esm.js?65d7:3588
invokeInsertHook @ vue.esm.js?65d7:5541
patch @ vue.esm.js?65d7:5744
Vue._update @ vue.esm.js?65d7:2460
updateComponent @ vue.esm.js?65d7:2574
get @ vue.esm.js?65d7:2917
run @ vue.esm.js?65d7:2994
flushSchedulerQueue @ vue.esm.js?65d7:2760
(anonymous) @ vue.esm.js?65d7:698
nextTickHandler @ vue.esm.js?65d7:645
Promise resolved (async)
timerFunc @ vue.esm.js?65d7:660
queueNextTick @ vue.esm.js?65d7:708
queueWatcher @ vue.esm.js?65d7:2847
update @ vue.esm.js?65d7:2984
notify @ vue.esm.js?65d7:775
reactiveSetter @ vue.esm.js?65d7:997
proxySetter @ vue.esm.js?65d7:3109
(anonymous) @ iview.js?5654:20532
Vue.$emit @ vue.esm.js?65d7:2331
dispatch @ iview.js?5654:511
boundFn @ vue.esm.js?65d7:178
handleClick @ iview.js?5654:20709
boundFn @ vue.esm.js?65d7:179
click @ iview.js?5654:20741
invoker @ vue.esm.js?65d7:1821