在vue.js 2中使用summernote
我想在我的vue.js 2 spa中使用summernote，因为并非所有页面都使用summernote，所以我将summernote设置为一个组件，方法是添加
export default {
editor_function(){
//summernote function in summernote.min.js
}
}然后我只是将它导入到我的.vue文件中，需要summernote，并在mounted()函数上调用editor_function，但当npm将我的vue项目编译成单个app.js文件时，我得到了错误unknown codemirror。
所以我进入了include summernote.min.js in my index.html，这意味着它将在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内容中，这意味着当我发布来自summernote/content的输出时，它将是空的……
那么，如何让summernote与vue js 2协同工作呢？我发现了一些用于summernote和vue js的软件包，但它只适用于旧版本的vue js( v.1可能？)并且与vue JS2不兼容。
回答 1
Stack Overflow用户
发布于 2017-08-26 20:39:47
我在这里回答，因为注释不太擅长显示代码。
<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的配置和插件。使用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>我希望你能理解我的想法。您还可以查看forked项目以获取更多信息。
https://stackoverflow.com/questions/45876750
复制相似问题
腾讯云开发者
