![summernote]( "summernote")
本文介绍了在 vue.js 2 中使用summernote的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的 vue.js 2 spa 中使用summernote，因为不是我的所有页面都使用summernote，所以我通过添加
使summernote成为一个组件出口默认{editor_function(){//summernote.min.js中的summernote函数}}
然后我只是将它导入我需要summernote的.vue文件中，并在mounted()函数上调用editor_function，但我得到了错误unknown codemirror 当 npm 将我的 vue 项目编译成单个 app.js 文件时.
所以我只在我的 index.html 中包含了 summernote.min.js，这意味着它将在 vue js spa 启动之前加载(这不是很理想，因为只有一些页面需要这个插件，但我需要这工作)
所以在那之后它就可以工作了，但是现在我不知道如何将summernote的输出数据获取到vuejs中，我正在像这样将v-model添加到textarea中
我也尝试过像这样自定义输入但不起作用
但它只是没有绑定到我的 v-model 内容中，这意味着当我从 summernote/content 发布输出时，它将是空的...
那么如何让summernote 与vue js 2 一起工作?我找到了一些用于 Summernote 和 vue js 的包，但它仅适用于旧版本的 vue js(可能是 v.1?)，并且与 vue js 2 不兼容.
解决方案
我在这里回答，因为评论不太擅长显示代码.
<div id="应用程序"><夏日笔记名称=编辑器":模型=内容"v-on:change="value => { content = value }"></summernote>
<脚本>导出默认{数据() {返回 {内容:空}},组件: {'summernote' : require('./Summernote')}}
我认为你可以使用 summernote 模块 以这种方式.
我查看了源代码.它非常简单和简短，因为它只是 Summernote 的一个包装.
更新
我 fork 了项目并更改了一些代码，以便更轻松地设置 Summernote 的配置和插件.使用 这个版本，您可以将您的配置作为对象道具传递.您还可以通过在 html script 标签中导入插件来添加插件.
请参阅下面的示例代码.
<div id="应用程序"><夏日笔记名称=编辑器":模型=内容"v-on:change="value => { content = value }":config="配置"></summernote>
<脚本>导出默认{数据() {返回 {内容:空，//↓ 就是配置对象的样子.↓配置:{高度:100，工具栏: [//[groupName, [按钮列表]]['style', ['bold', 'italic', 'underline', 'clear']],['字体', ['删除线', '上标', '下标']],['字体大小'，['字体大小']]，['颜色', ['颜色']],['para', ['ul', 'ol', 'paragraph']],['insert', ['gxcode']],//插件配置:summernote-ext-codewrapper],},}},组件: {'summernote' : require('./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
}
}
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.
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)
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>
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...
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>
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.
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.
这篇关于在 vue.js 2 中使用summernote的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！