覆盖summernote图像弹出不起作用答案

【问题标题】：override summernote image pop up not working覆盖summernote图像弹出不起作用
【发布时间】：2015-06-20 02:12:41
【问题描述】：

我正在使用带有 codeigniter 的名为 summernote 的文本编辑器。我也有自己想使用的图像管理器。

在我的 java 脚本代码中，我已经设置了它，所以我的图像管理器应该 OVERRIDE 图像在summernote 编辑器中弹出。不是每次我点击summernote编辑器按钮插入图片时它仍然显示默认插入图片。

我不确定为什么仍然显示默认插入图像弹出窗口？

我很确定，因为没有添加 data-toggle="image"

这部分在这里不起作用$('button[data-event=\'showImageDialog\']').attr('data-toggle', 'image').removeAttr('data-event');

确保我的图像管理器覆盖它的最佳做法是什么。

文件名 common.js

$(document).ready(function() {

// Override summernotes image manager
$('button[data-event=\'showImageDialog\']').attr('data-toggle', 'image').removeAttr('data-event');

$(document).delegate('button[data-toggle=\'image\']', 'click', function() {
    $('#modal-image').remove();

    $(this).parents('.note-editor').find('.note-editable').focus();

    $.ajax({
         url: 'admin/filemanager',
        dataType: 'html',
        beforeSend: function() {
            $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
            $('#button-image').prop('disabled', true);
        },
        complete: function() {
            $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
            $('#button-image').prop('disabled', false);
        },
        success: function(html) {
            $('body').append('<div id="modal-image" class="modal">' + html + '</div>');

            $('#modal-image').modal('show');
        }
    }); 
});

// Image Manager

$(document).delegate('a[data-toggle=\'image\']', 'click', function(e) {
    $('#modal-image').remove();
    e.preventDefault();

    var element = this;

    $(element).popover({
        html: true,
        placement: 'right',
        trigger: 'manual',
        content: function() {
            return '<button type="button" id="button-image" class="btn btn-primary"><i class="fa fa-pencil"></i></button>';
        }
    });

    $(element).popover('toggle');       

    $('#button-image').on('click', function() {
        $.ajax({
            url: 'admin/filemanager/?input=' + $(element).parent().find('input').attr('id') + '&element='+ $(element).attr('id'),
            dataType: 'html',
            beforeSend: function() {
                $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                $('#button-image').prop('disabled', true);
            },
            complete: function() {
                $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
                $('#button-image').prop('disabled', false);
            },
            success: function(html) {
                $('body').append('<div id="modal-image" style="" class="modal fade">' + html + '</div>');                                      
                $('#modal-image').modal('show');
            }
        });

        $(element).popover('hide');
    });
});
});

标题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title><?php echo $title;?></title>
<base href="<?php echo base_url();?>"></base>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/admin/css/bootstrap.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/admin/css/custom.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/admin/summernote/summernote.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/admin/summernote/summernote.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/admin/js/common.js"></script>
</head>

【问题讨论】：

标签： javascript codeigniter summernote

【解决方案1】：

我发现代码是summernote js首先加载，所以没有显示

我将它添加到视图文件的底部，我称之为summernote文本区域

并添加了这个

<script type="text/javascript">
$(document).ready(function() {
    $('button[data-event="showImageDialog"]').attr('data-toggle', 'image').removeAttr('data-event');    
});
</script>

现在工作。

【讨论】：