Summernote编辑器中的粘贴事件未触发 - 无法获取粘贴值

时间:2018-01-30 08:11:52

标签: jquery asp.net-mvc twitter-bootstrap paste summernote

我正在构建一个使用Summernote编辑器(https://summernote.org/)的应用程序。

它工作得很好,现在我想处理粘贴事件。想法是我想将内容粘贴为纯文本。谷歌搜索结果显示在此页面中: Paste content as plain text in summernote editor

这导致我的问题 - 我试图实现这一点但没有成功。

我的代码:

我已经在我的Bootstrap / ASP.NET MVC应用程序中实现了Summernote(我使用的是Summernote 0.8.8):

 if(!initiatedBranchDeepLinks) {
        // Configure Branch.io
        initiatedBranchDeepLinks = true;
        Branch branch = Branch.getInstance();
        branch.initSession(new Branch.BranchReferralInitListener(){
            @Override
            public void onInitFinished(JSONObject referringParams, BranchError error) {
                if (error == null) {
                    // params are the deep linked params associated with the link that the user clicked -> was re-directed to this app
                    // params will be empty if no data found
                    // ... insert custom logic here ...
                    String message = "Branch.io onInitFinished. Params: " + referringParams.toString();
                    Log.d(TAG, message);

                } else {
                    Log.i(TAG, error.getMessage());
                }
            }
        }, this.getIntent().getData(), this);
    }

我现在尝试添加以下代码:

<div class="form-group mb-3">
        @Html.LabelFor(c => c.Content)
        <div class="card-body">
            <form class="form-horizontal form-bordered">
                <div class="form-group row">
                    <div class="col-sm-12">
                        <textarea name="Content" id="summernote" class="summernote" data-plugin-summernote data-plugin-options='{ "height": 180, "codemirror": { "theme": "ambiance" } }'>
                            @Html.Raw(Model.Content)
                        </textarea>
                    </div>
                </div>
            </form>
        </div>

但这绝不会受到打击。如果我在粘贴功能中创建 $('#summernote').summernote({ onPaste: function (e) { var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); e.preventDefault(); document.execCommand('insertText', false, bufferText); } }); ,它就永远不会命中。

然后我尝试按照Summernote网站上的文档和:

console.log()

完美,现在事件真的开火了。但是所有这些都变得未定义,所以它在GetData上失败了:

 $('#summernote').on('summernote.paste', function(e) {
                var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                e.preventDefault();
                document.execCommand('insertText', false, bufferText);
            });

所以我收到以下错误:

((e.originalEvent || e).clipboardData || window.clipboardData)

所以我遇到的问题是StackOverflow上建议的解决方案永远不会为我开火 - 回调永远不会发生。如果我按照Uncaught TypeError: Cannot read property 'getData' of undefined at HTMLTextAreaElement.<anonymous> (UpdateCommunication?communicationId=65925cb9-4300-439c-8f96-e00de78e1727:291) at HTMLTextAreaElement.dispatch (jquery-1.10.2.js:5109) at HTMLTextAreaElement.elemData.handle (jquery-1.10.2.js:4780) at Object.trigger (jquery-1.10.2.js:5021) at HTMLTextAreaElement.<anonymous> (jquery-1.10.2.js:5705) at Function.each (jquery-1.10.2.js:671) at init.each (jquery-1.10.2.js:280) at init.trigger (jquery-1.10.2.js:5704) at Context.triggerEvent (summernote-bs4.js:1707) at HTMLDivElement.<anonymous> (summernote-bs4.js:4422) https://summernote.org/deep-dive/#onpaste,粘贴值似乎未定义!

1 个答案:

答案 0 :(得分:3)

你很幸运我今晚要玩这个:)

似乎summernote.paste事件得到2个参数

而不是

$('#summernote').on('summernote.paste', function(e) {

使用

$('#summernote').on('summernote.paste', function(e, ne) {

并使用'ne'而不是fn正文中的'e'

在这里找到解决方案: https://github.com/summernote/summernote/issues/303#issuecomment-229823549