Use vue-html-editor in vue-component

Question

So I want to use the vue-html-editor inside a vue-component for my page but it isn't working. I'm new to vue and vue components so I think this should be an easy task but somehow I'm stumbling to get it right.

My component:

<template>
  <div class="container">
    <vue-html-editor name="html-editor" :model.sync="text"></vue-html-editor>
    <div style="margin-top:40px">
      <div> The HTML contents are as follows:</div>
      <hr>
      <div>{{ text }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Edit',
    components: {
      "vue-html-editor": require("vue-html-editor")
    },
    data() {
      return {
        text: 'Start writing your notes here...'
      }
    }
  }

</script>

<style scoped>


</style>

And the console error message:

vue.esm.js?efeb:591 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueHtmlEditor>
       <Edit> at src/components/Edit.vue
         <App> at src/App.vue
           <Root>

I already installed the vue-html-editor but I think I haven't properly loaded the editor.

Any help is appreciated. Thanks in advance!

Answer 1

Looking at the vue-html-editor github commits page, I saw the last update was from 2 years ago.. The vue-html-editor is compatible for Vue 1.0 but maybe it's not for the newest version. However, if you keep having issues with the vue-html-editor, maybe it's worth to try the vue-quill-editor. I found that it is easy to implement and the documentation is really good.

https://github.com/surmon-china/vue-quill-editor