JavaScript-将Summernote与vue.js 2结合使用

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

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

然后我只是将其导入需要summernote的.vue文件中,并在Mounted()函数上调用editor_function,但是当npm将vue项目编译为单个app.js文件时,出现了未知的Codemirror错误.

所以我在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模型内容中,这意味着当我发布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 module.
我调查了源代码.这很简单而且简短,因为它只是summernote的包装.

更新
我分叉了该项目,并更改了一些代码,以使其更易于设置summernote的配置和插件.使用this version,您可以将配置作为对象道具传递.
您也可以通过将插件导入html脚本标签中来添加插件.
请参见下面的示例代码.

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

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

标签：javascript,vue-component,vuejs2,summernote
来源： https://codeday.me/bug/20191012/1897323.html