2017-08-25 263 views
1

我想在我的VUE JS 2温泉使用summernote,而且由于使用summernote不是所有我的网页,所以我让summernote是一个组件加入使用summernote与VUE JS 2

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

,然后我就将其导入到需要summernote的.vue文件中,并在mounted()函数上调用editor_function函数,但当npm将我的vue项目编译为单个app.js文件时,出现错误unknown codemirror

所以我进入只包括summernote.min.js在我的index.html,这意味着它会在vue js spa开始之前加载(这不是很理想,因为只有一些页面需要这个插件,但是我也很好需要这个工作)

打完,这是工作,但现在我还是不知道如何从summernote输出中获取数据到vuejs,我加入V- modeltextarea这样

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

我也试图做出像这样的自定义输入但不工作

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

,但它只是不绑定到我的V模型的内容,这就是意味着,当我从后summernote /内容将是空输出...

因此如何使summernote可与VUE JS 2?我发现一些夏季笔记和vue js包,但它只适用于旧版本的vue js(v.1也许?)并且与vue js 2不兼容。

+0

您是否尝试过[this](https://github.com/StefanNeuser/vuejs2-summernote-component),我认为它符合您的要求。 – choasia

+0

哦,我已经看到了,它看起来很有前途,但缺乏指导,不知道如何在我自己的项目中实现它 –

回答

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

更新
我分叉的项目,并改变了一些代码,使其更易于设置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> 

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

+0

哇,它的工作....洙,如果我想costumize summernote,如果我想添加sumernote插件或者只是选择出现在工具栏中的哪个按钮/控件,我应该在哪里写?它在summernote模块中吗?因为我看到那里有高度属性设置 –

+0

@LaurensiusTony我分叉项目,以适应您的要求。看到我更新的答案。 – choasia

+0

@choasia我不断收到$ .summernote()不是一个函数。我做错了什么吗? –