nhn / toast-ui.vue-editor

This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/vue-editor
MIT License
229 stars 47 forks source link

error loading editor #26

Closed nicolasvahidzein closed 5 years ago

nicolasvahidzein commented 5 years ago

hello,

when i load the component i get this error:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'input' of undefined"

found in

---> <TuiEditor> at src/Editor.vue
       <Test2> at D:\WebServer\ZeinTekWebServices\liveroot\Merlin Internal Front End\src\pages\tests\Test2.vue
         <App> at D:\WebServer\ZeinTekWebServices\liveroot\Merlin Internal Front End\src\App.vue
           <Root>

I even tried commenting out some of the input statements i found inside the node modules in the folder @toast-ui/vue-editor but it is not affecting the code, everything is working as if the Editor.vue file is being loaded from somewhere else on my pc. It is very strange.

<template>
    <div id="landing" class="landing">
        <h1 class="temptitle">Test - Toast ui editor only</h1>

        <!-- don't use vmodel and value at the same time -->
        <editor
            value="editorText"
        />

    </div>  
</template>

<script>
    import Vue from 'vue'
    import store from '@/store/store.js'
    import { Editor } from '@toast-ui/vue-editor'

    export default {
        data () {
            return {
                editorText: 'This is initialValue.',
            }
        },

        props: [
            //
        ],

        components: {
            'editor': Editor,
        },

        computed: {

        },

        methods: {

        },

        created () {
            //
        },

        mounted () {
            //
        }
    }
</script>

<style>
    @import '../../packages/css/tui-editor/1.3.0/dist/tui-editor.css';
    @import '../../packages/css/tui-editor/1.3.0/dist/tui-editor-contents.css';
    @import '../../packages/css/codemirror/2019-05-17/lib/codemirror.css';

    .landing {
        background-color: white;
        height: 100%;
    }
</style>
nicolasvahidzein commented 5 years ago

i was able to find the culprit, it's this line:

if (this.$listeners.input) {
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getValue());
      });
    }

$listeners is referenced nowhere in the project, isn't this a problem?

sohee-lee7 commented 5 years ago

@nicolasvahidzein $listeners is supported in Vue version 2.4. (https://vuejs.org/v2/api/#vm-listeners) Please check your Vue version.

nicolasvahidzein commented 5 years ago

I'm running 2.8.2 but it's throughing an error. Do i need to do something for it to work?

Right now i uncomment that whole portion of code, will it make the module unstable or not working? How can i did deeper? I do have the right version.

sohee-lee7 commented 5 years ago

If you do not use v-model, input is undefined. I didn't think it makes error. Maybe something of your dependencies catch it as error. Please share your dependencies or other environment to analyze this issue.

nicolasvahidzein commented 5 years ago

would you like the package file? I am using vmodel, but it's not working at all, it's not dynamic, not updating the variable. I had to access the instance on editor change which is kind of hacky to me. How do you do it? Also i opened another ticket that asked how to switch from the editor to the viewer. It's very important, thanks.

sohee-lee7 commented 5 years ago

@nicolasvahidzein Sorry for late reply. Do you still have this issue? If not, please close this issue.

sohee-lee7 commented 5 years ago

This issue is old so close it.