在vue组件中使用vue-html-编辑器

Question

所以我想在我的页面中使用vue组件中的vue-html编辑器，但是它不起作用。我刚开始使用vue和vue组件，所以我认为这应该是一项简单的任务，但不知怎么的，我很难把它做好。

我的组成部分：

<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>

以及控制台错误消息：

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>

我已经安装了vue-html编辑器，但是我想我还没有正确地加载编辑器。

任何帮助都是非常感谢的。提前感谢！

Answer 1

查看vue-html-编辑器github提交页面，我看到上一次更新是2年前的。Vue -html编辑器与Vue 1.0兼容，但可能不适合最新版本。但是，如果您一直对vue-html-编辑器有问题，也许值得尝试一下vue-quill-编辑器。我发现它很容易实现，而且文档非常好。

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

Answer 2

在需求中提到，除了Node.js，您还需要另一个名为summernote的库。

使用npm或纱线安装

https://www.npmjs.com/package/summernote

看看能不能解决你的问题。