summernote - 如何让 SummerNote 编辑器覆盖图像

Question

我正在 mvc 中创建一个应用程序并使用 Summernote Editor。我需要我的 Summernote 编辑器来覆盖类似于他们在 Summernote 登录页面上的图像 - https://summernote.org/

<script type="text/javascript">
    $(function () {
        // main summernote with custom placeholder
        var $placeholder = $('.placeholder');
        $('#summernote').summernote({
            height: 50,
            toolbar: [],
            codemirror: {
                mode: 'text/html',
                htmlMode: true,
                lineNumbers: true,
                theme: 'monokai'
            },
            callbacks: {
                onInit: function () {
                    $placeholder.show();
                },
                onFocus: function () {
                    $placeholder.hide();
                },
                onBlur: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        if ($self.summernote('isEmpty') && !$self.summernote('codeview.isActivated')) {
                            $placeholder.show();
                        }
                    }, 100);
                }
            }
        });
    });
</script>
@section Scripts
{
    <script src="~/Scripts/summernote.min.js" type="text/javascript"></script>
    <link href="~/Content/summernote.min.css" rel="stylesheet" />
}

<div class="note-editor">
   <img src="@Url.Content("~/css/Images/Home.jpg")"  alt="logo" style="width: 100%; top: 50px;"/>
    <div id="summernote" class="note-editor.note-airframe">
        <p><br></p>
    </div>

</div>

标签： summernote