Summernote提供了一个选项,当您创建它时可以将焦点放在编辑器上,通过传递这些选项:
$('#summernote').summernote({
focus: true
});
但在初始化之后,似乎无法通过点击按钮或类似的方式将焦点放到文本区域中。我尝试了几种方法,但都没有成功。
有人做到了吗?
Summernote提供了一个选项,当您创建它时可以将焦点放在编辑器上,通过传递这些选项:
$('#summernote').summernote({
focus: true
});
但在初始化之后,似乎无法通过点击按钮或类似的方式将焦点放到文本区域中。我尝试了几种方法,但都没有成功。
有人做到了吗?
$('.summernote').summernote('focus')
顺便提一句,我希望找到一个 Angular 的解决方案...而且它有效。
在回到这个问题并尝试了很多解决方案后,我找到了一个可行的方法:
$('.note-editable').trigger('focus');
通过jQuery触发事件可以工作,但使用focus()
函数不行。
.focus()
只是这个语法的快捷方式,所以我不确定是否有区别。 - lsouza$(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();
});
①点击或轻触时聚焦 ②聚焦在内容结尾处
它也适用于移动设备
/* 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);
}
}
});
});
Summernote v0.8.18
:$(`div.note-editing-area div.note-editable`).focus();
您可以通过将焦点放在Summernote使用的可编辑div上来设置焦点:
document.querySelectorAll(".note-editable").focus();
或者使用JQuery
$('#summernote').find('.note-editable').focus();
setTimeout(function() { $('#summernote').find('.note-editable').focus(); }, 200);
? - mxro<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>