将 SummerNote 与 vue.js 2 结合使用

我想在我的 vue.js 2 spa 中使用 Summernote，并且因为并非所有页面都使用 SummerNote，所以我通过添加来使 SummerNote 成为一个组件

export default {
    editor_function(){
     //summernote function in summernote.min.js
    }
}

然后我只需将其导入到需要 Summernote 的 .vue 文件中并调用editor_function on mounted()功能，但我收到错误unknown codemirror当 npm 将我的 vue 项目编译成单个 app.js 文件时。

所以我只是在我的index.html中包含summernote.min.js，这意味着它将在vue js spa启动之前加载（这不是很理想，因为只有某些页面需要这个插件，但我需要这个才能工作）

所以之后它就可以工作了，但现在我不知道如何将summernote的输出数据获取到vuejs中，我添加了v-model into textarea像这样

<textarea class="summernote" v-model="content"></textarea>

我也尝试过像这样进行自定义输入但不起作用

<textarea class="summernote" 
          :value="content"
          @input="content = $event.target.value"></textarea>

但它只是没有绑定到我的 v-model 内容中，这意味着当我发布 Summernote/content 的输出时，它将是空的......

那么如何让summernote与vue js 2一起工作呢？我找到了一些 Summernote 和 vue js 的包，但它仅适用于旧版本的 vue js（可能是 v.1？），并且与 vue js 2 不兼容。

我在这里回答是因为注释不太擅长显示代码。

<template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null   
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>

我认为你可以使用Summernote模块这样。
我查看了源代码。它非常简单和简短，因为它只是 Summernote 的包装。

Update
我分叉了该项目并更改了一些代码，以便更轻松地设置 SummerNote 的配置和插件。和这个版本，您可以将您的配置作为对象 prop 传递。 您还可以通过在 html 中导入来添加插件script tag.
请参阅下面的示例代码。

<template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
    :config="config"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null,
        // ↓ It is what the configuration object looks like. ↓
        config: {
            height: 100,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['gxcode']], // plugin config: summernote-ext-codewrapper
          ],
        }, 
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>

我希望你能明白我的想法。您还可以查看分叉项目以获取更多信息。