Tinymce with Vuejs

Asked

Viewed 182 times

2

I’m trying to use the Tinymce with Vue, but so far unsuccessful, I have used several 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 that way, the console always points out the 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
javascript vue.js

  • Where does this error occur? in the browser or webpack?

  • @In the Browser, in the console

  • Can you see which line generates the error?

  • @Sergio Atualizei com todo o erro que aparece no console

  • In that error the TinyMce is the father of <Modal>?

  • No, the TinyMce is inside the <Modal>

  • However this error is in the code of the plugin that expects that tinymce be global! This is a bug of them as the plugin should be self-installing. Try to merge the script in the browser to include tinymce (although you import the plugin)

  • @Sergio you tell the CDN?

  • Exactly, oddly enough, because even in package.json they don’t have tinymce as a dependency...

  • @Sergio I put and the error disappears, but another error appears tinymce.min.js:13 Uncaught TypeError: b is not a constructor

  • Puts the version no .min to better understand which line of error

  • In the meantime I have been searching their issues and found this, undocumented: https://github.com/mbouclas/tinymce-vue-2/issues/1

  • @Sergio tinymce.js:45749, I tried to use it, but first I didn’t understand, and even trying, I couldn’t

  • You got that on github?

  • @Sergio No, I just read what I did there and tried to set up mine webpack but it didn’t work out

  • If you want to create a repository I can take a look at. So without testing I have no more ideas. The best thing would be to make you the component by directly using the tinymce and ignoring this other one you saw :)

  • @Sergio I’d love to, can give me an idea of where to start?

  • clones their repository, changes their branch and try to get

  • Have you tried with that? I tested it here and it worked

Show 14 more comments
No answers

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.