Summernote 不会编辑其内容

Posted 2023-02-22

【中文标题】Summernote 不会编辑其内容

【英文标题】：Summernote will not edit its content

【发布时间】：2016-11-05 23:05:15

【问题描述】：

我在使用 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 的屏幕：

感谢您的努力！

【问题讨论】：

如果有一个 fiddle 或 codepen 来帮助解决这个问题会很棒

【参考方案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)

【讨论】：

不幸的是，这不起作用。我仍然无法对内容应用样式

【参考方案2】：

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

Inspinia 巫师 Inspinia 版的 Summernote 编辑器

向导与 vue 相结合，搞砸了一些 jquery。这个搞砸的 jquery 与 Summernote jquery 冲突。

所以我用 vue 写了一个自定义向导，它成功了！