Summernote：初始化后设置焦点答案

【问题标题】：Summernote: set focus after initializationSummernote：初始化后设置焦点
【发布时间】：2014-12-19 17:56:08
【问题描述】：

Summernote 让您可以在创建编辑器时选择将焦点放在编辑器上，并传递以下选项：

$('#summernote').summernote({
     focus: true
});

但初始化后，您似乎无法通过单击按钮或类似按钮将焦点放在 textarea 上。我试了好几种方法，都没有成功。

有人做过吗？

【问题讨论】：

标签： javascript jquery summernote

【解决方案1】：

您可以通过将焦点放在 Summernote 使用的editable div 上来设置焦点：

document.querySelectorAll(".note-editable").focus();

或使用 JQuery

$('#summernote').find('.note-editable').focus();

【讨论】：

没用。至少在铬上。我可以找到 div 但焦点不起作用:(
也许可以尝试设置焦点并稍微超时：setTimeout(function() { $('#summernote').find('.note-editable').focus(); }, 200);?

【解决方案2】：

回到这个问题并尝试了很多解决方案后，我找到了一个可行的方法：

$('.note-editable').trigger('focus');

通过 jQuery 触发事件有效，但使用 focus() 函数无效。

【讨论】：

你找到原因了吗？
我不知道。 jQuery的文档说.focus()只是这种语法的一个快捷方式，所以我真的不知道是否有区别。
如果有人想做反向操作怎么办，就像现在的summernote 0.8.8 正在关注表单初始化。我不想要这种行为。

【解决方案3】：

$('.summernote').summernote('focus')

ps。我想找到一个有角度的出路..它有效

【讨论】：

看起来不像是一个答案。考虑删除，因为它可能会遇到downvote-fall。

【解决方案4】：

$(document).ready(function () {
                        $.fn.extend({
                            placeCursorAtEnd: function () {
                                // Places the cursor at the end of a contenteditable container (should also work for textarea / input)
                                if (this.length === 0) {
                                    throw new Error("Cannot manipulate an element if there is no element!");
                                }
                                var el = this[0];
                                var range = document.createRange();
                                var sel = window.getSelection();
                                var childLength = el.childNodes.length;
                                if (childLength > 0) {
                                    var lastNode = el.childNodes[childLength - 1];
                                    var lastNodeChildren = lastNode.childNodes.length;
                                    range.setStart(lastNode, lastNodeChildren);
                                    range.collapse(true);
                                    sel.removeAllRanges();
                                    sel.addRange(range);
                                }
                                return this;
                            }
                        });
                    });

然后：

$('.note-editable').click(function(){
                                  //$('#summernote').summernote('focus');
                                  $(this).placeCursorAtEnd();
                                });

①专注于点击或点击 ②关注内容末尾

它也适用于移动设备

【讨论】：

【解决方案5】：

请参考codepen 对于这个问题

/* Summernote 验证 */

$(function () {
    var summernoteForm = $('.form-validate-summernote');
    var summernoteElement = $('.summernote');

    var summernoteValidator = summernoteForm.validate({
        errorElement: "div",
        errorClass: 'is-invalid',
        validClass: 'is-valid',
        ignore: ':hidden:not(.summernote),.note-editable.card-block',
        errorPlacement: function (error, element) {
            // Add the `help-block` class to the error element
            error.addClass("invalid-feedback");
            console.log(element);
            if (element.prop("type") === "checkbox") {
                error.insertAfter(element.siblings("label"));
            } else if (element.hasClass("summernote")) {
                error.insertAfter(element.siblings(".note-editor"));
            } else {
                error.insertAfter(element);
            }
        }
    });

    summernoteElement.summernote({
        height: 300,
        callbacks: {
            onChange: function (contents, $editable) {
                // Note that at this point, the value of the `textarea` is not the same as the one
                // you entered into the summernote editor, so you have to set it yourself to make
                // the validation consistent and in sync with the value.
                summernoteElement.val(summernoteElement.summernote('isEmpty') ? "" : contents);

                // You should re-validate your element after change, because the plugin will have
                // no way to know that the value of your `textarea` has been changed if the change
                // was done programmatically.
                summernoteValidator.element(summernoteElement);
            }
        }
    });

});

【讨论】：

【解决方案6】：

<div class="col-lg-12 col-md-6 col-xs-12">
    <div class="form-group">
        <label>  Skills</label>
        <span ng-messages="EditForm.Skills.$error" ng-if="EditForm.Skills.$dirty || isEditFormSubmitted ">
            <span class="text-danger" ng-message="required" ng-bind="error msg"></span>
        </span>
        <text-angular id="Skills" name="Skills" ng-model="EditVacancyModel.Skills" ta-toolbar="[['bold','underline','italics','ul','ol']]"ng-required="true"></text-angular>
    </div>
</div>

【讨论】：

OP 指定 jquery。也没有解释。 -1