Tinymce with Vuejs

2

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
    
asked by anonymous 02.10.2017 / 21:23

0 answers