Question

我正在与summernote斗争。我将Vue与laravel和Inspinia主题（https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S）结合使用。

我已经加载了.css和.js文件。我的问题是，summernote不会编辑它的内容。工具栏中的按钮不起作用。

这是我的vue组件：

<style>
</style>
<template>
    <div>
        <div class="ibox-content no-padding">
            <div class="summernote" v-el:summernote>
                {{ infoText }}
            </div>

        </div>
    </div>
</template>
<script>
    export default  {
        data() {
            return {
                infoText: ''
            }
        },

        ready() {
            this.setupSummernote();
        },

        methods: {
            setupSummernote() {
                $(this.$els.summernote).summernote({
                    height: 250,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'italic', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['table', ['table']]
                    ],
                    onChange: function(contents, editable) {
                        this.infoText = contents;
                        console.log(contents, editable);
                    }.bind(this)
                });
            }
        }
    }
</script>

它确实显示了带有工具栏和样式内容的summernote编辑器，但它不会触发onChange事件。有人知道我做错了吗？

有些屏幕显示奇怪的CSS：

感谢您的努力！

Answer 1

你回调的summernote配置是错误的。

此：

 onChange: function(contents, editable) {
   this.infoText = contents;
   console.log(contents, editable);
 }.bind(this)

应该是这样的：

callbacks: {
  onChange: function(contents, editable) {
    this.infoText = contents;
    console.log(contents, editable);
  }.bind(this)
}

Answer 2

我使用了Inspinia主题的两个部分：

Inspinia向导
夏令营编辑的Inspinia版本

该向导与vue相结合搞砸了一些jquery。这个混乱的jquery与summernote jquery相冲突。

所以我用vue编写了一个自定义向导，它工作正常！

Summernote不会编辑其内容

2 个答案: