使用summer与vue.js 2 [英] using summernote with vue.js 2

问题描述

我想在我的vue.js 2 spa中使用summernote，因为我的所有页面都没有使用summernote所以我将summernote作为一个组件添加

i want to use summernote in my vue.js 2 spa, and because not all my page using summernote so i make summernote to be a component by adding

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

然后我只需将其导入我的.vue文件中，需要使用summernote并调用 editor_function on mount（）函数但我得到错误 unknown codemirror 当npm将我的vue项目编译成单个app.js文件。

and then i just import it in my .vue file that need summernote and call editor_function on mounted() function but i got error unknown codemirror when npm compile my vue project into single app.js file.

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

so i went into just include summernote.min.js in my index.html and thats mean it will be loaded before vue js spa is started (which is not very ideal since only some page need this plugin, but well i need this to work)

所以之后它工作，但现在我不知道如何获得输出从summernote到vuejs的数据，我将v - model 添加到 textarea 这样的

so after that it is working, but now i got no idea how to get ouput data from summernote into vuejs, i am adding v-model into textarea like this

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

我也试图像这样制作自定义输入但不能正常工作

i also tried to make custom input like this but not working

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

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

but it just not binded into my v-model content and that's mean when i post the output from summernote/content it will be empty...

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

so how to make summernote works with vue js 2? i found some package for summernote and vue js but it's works only with old version vue js( v.1 maybe?) and not compatible with vue js 2.

推荐答案

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

I answered here since comments are not very good at displaying code.

<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的包装。

I think you can use the summernote module in this way.
I looked into the source code. It's quite simple and short since it's just a wrapper of summernote.

更新

我分叉项目并更改了一些代码，以便更容易设置summernote的配置和插件。使用此版本，您可以将配置作为对象支柱传递。
您还可以通过在html 脚本标签中导入插件来添加插件。

请参阅下面的示例代码。

Update
I forked the project and changed some code to make it easier to set summernote's configuration and plugins. With this version, you can pass your configuration as an object prop. You can also add a plugin by importing it in html script tag.
See sample code below.

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

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

I wish you could get my idea. You can also look into the forked project for more information.

这篇关于使用summer与vue.js 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！