将 summernote 与 vue.js 2 一起使用

Question

我想在我的 vue.js 2 spa 中使用 summernote，因为并不是我所有的页面都使用 summernote，所以我通过添加

使 summernote 成为一个组件

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

然后我只是将它导入我需要 summernote 的 .vue 文件并在 mounted() 函数上调用 editor_function 但是当 npm 将我的 vue 项目编译成单个时我得到错误 unknown codemirror app.js 文件。

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

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

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

我也试过像这样进行自定义输入，但没有用

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

但它只是没有绑定到我的 v-model 内容中，这意味着当我 post 来自 summernote/content 的输出将是空的...

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

Answer 1

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

<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 module。
我查看了源代码。它非常简单和简短，因为它只是 summernote 的包装。

更新
我 fork 了项目并更改了一些代码，以便更容易设置 summernote 的配置和插件。使用 this version，您可以将您的配置作为对象道具传递。您还可以通过在 html script 标签中导入来添加插件。
请参阅下面的示例代码。

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

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

将 summernote 与 vue.js 2 一起使用

using summernote with vue.js 2

javascript

summernote

vue-component

vuejs2