在 vue-component 中使用 vue-html-editor答案

【问题标题】：Use vue-html-editor in vue-component在 vue-component 中使用 vue-html-editor
【发布时间】：2018-09-23 00:43:51
【问题描述】：

所以我想在我的页面的 vue 组件中使用 vue-html-editor，但它不起作用。我是 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-editor 但我认为我没有正确加载编辑器。

感谢任何帮助。提前致谢！

【问题讨论】：

好吧，我想到的就是：你npm install vue-html-editor吗？
是的，我确实安装了 vue-html-editor，就像页面中的设置步骤中提到的那样。

标签： vue.js vue-component

【解决方案1】：

查看 vue-html-editor github commits 页面，我看到最后一次更新是从 2 年前开始的。 vue-html-editor 与 Vue 1.0 兼容，但可能不适用于最新版本。但是，如果您一直遇到 vue-html-editor 的问题，也许值得尝试 vue-quill-editor。我发现它很容易实现，文档也很好。

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

【讨论】：

感谢您的评论。我还看到 vue-html-editor 似乎已经过时，但还没有找到一个好看的替代品。您的建议工作正常！非常感谢。
quill 终于支持换行/软换行了吗？像 Shift + Enter 之类的？我切换到tinymces官方vue组件。

【解决方案2】：

需求中提到除了Node.js你还需要另外一个叫summernote的库。

使用 npm 或 yarn 安装它

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

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

【讨论】：

这很遗憾没有帮助。我还认为 Summernote 是自动安装的，因为它被列为编辑器的必需组件。无论如何，我使用 npm 额外安装了它，没有任何更改。