- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要从 summernote
中的光标位置获取上一个单词。
我收到了 Summernote 的最后一句话。但我需要从光标位置获取前一个单词。
例如如果编辑器内的文本是“Hello world. How are you?”光标位于“如何”之后,如果我按空格或输入,我需要获取“如何”一词。
$(document).ready(function(){
$('.description').summernote({
height: 300,
callbacks: {
onKeyup: function(e){
//32 => space
//13 => enter
if(e.which == 32 || e.keyCode == 13){
var lastword = $('.note-editable').text().replace(/\s+$/, '').split(/(\s| )/).pop();
console.log(lastword);
}
}
}
});
});
.content{
width: 800px;
margin: 0 auto;
margin-top: 50px;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.js"></script>
</head>
<body>
<div class="content">
<textarea class="description"></textarea>
</div>
</body>
</html>
最佳答案
这是一种方法(只是要注意 - 我不完全了解您的完整要求。例如 - 如果单击退格键怎么办,如果输入第一个单词要打印什么,如果输入单词,然后再次单击 Enter 会怎样打字等):
var inp = document.getElementById('note-editable');
// creating a Set so if space or enter clicked twice, its index wouldn't be captured twice
// could be done without this, but might help the future if need to select different words
var spaces = new Set([0]);
inp.addEventListener("keyup", getWord);
function getWord(e) {
if(e.which == 32 || e.keyCode == 13){
// selectionEnd property prints the position of input charecter
let spacePos = e.srcElement.selectionEnd;
spaces.add(spacePos);
let arr = Array.from(spaces);
let curSpacePos = arr.indexOf(spacePos);
let prevSpacePos = arr.indexOf(spacePos) - 1;
var res = Array.from(inp.value);
console.log(res.slice(arr[prevSpacePos -1], arr[curSpacePos - 1]).join('').trim())
}
}
<input id="note-editable" type="text">
关于javascript - 从 Summernote 中的光标位置获取上一个单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47950318/
fontfamily 选项在 summernote 中不起作用 我试过 $("#divCalltoactiontitle").summernote({ toolbar: [
我正在尝试在 Summer-note v0.8.1 中创建一个自定义按钮(带有下拉列表)。 我以前使用过一个运行良好的旧版本,但是在新版本中我不知道如何创建下拉列表按钮。 请帮助我向自定义按钮添加属性
我正在尝试在 vueJS 中使用 summernote。在 Laravel 框架下。在 blade.php 文档中,我设置了一个 id summernot_div: 然后,在相应的 vueJS 文档
我正在尝试使用 summernote我的应用程序中的编辑器。我在我想修复编辑器的地方使用了 height/minheight, maxheigh 并且不允许它调整大小。 这是我正在处理的代码: $('
我有这个旧代码 // myenter.js, enter key is binded to insertParagraph command. $.summernote.addPlugin({
我正在尝试限制夏日笔记中允许的字数。 例如,我只想限制最多 50 个字。 你有什么想法吗? $(document).ready(function() { $('#summernote').su
我正在将用户输入加载回 summernote 进行编辑,顶部和底部都添加了额外的行。有办法解决吗? $('#summernote').summernote('editor.pasteHTML', "h
我在 angular 中使用 summernote 我想创建一个自定义按钮。 我想将 customButton 中的 listHit 作为参数传递,如下所示 'testBtn': this.custo
我在 summernote 中有一个自定义按钮,当我点击例如文本“一”时,它有一个项目“一”、“二”、“三”的下拉列表,文本被添加在开头,这很好。但是当我之后点击“两个”时,文本也会添加到产生这个结果
我在 laravel 上使用 summernote 包,但问题是 Orderlist 和 unorder list 在那里不起作用。这是我正在尝试使用的代码。请帮我解决这个问题。 Html : Ve
我在 Laravel 应用程序中使用 summernote。 @csrf
我正在使用非常好的 Summernote Editor 来开发一个小网络应用程序。我没有对图像使用默认的内联 base64 代码,而是将图像存储在一个文件夹中。 我让那部分按预期工作。我可以单击“图像
我这里有一个 jsFiddle -> http://jsfiddle.net/cm910t89/2/ 我在Summernote WYSIWYG Editor中创建了一个自定义按钮我似乎无法让我的功能在
有人可以帮我设置 Summernote 的默认 textarea 名称值吗?编辑器在页面上看起来是正确的(我可以使用界面修改文本),但根据我的理解,POST 不起作用。 我尝试了各种 POST 变量,
我在将文本返回到 Summernote 编辑器时遇到问题。 我已经尝试过(但没有成功): $("#EDITsummernote").innerHtml = 'test'; 如何做到这一点? 最佳答案
我正在尝试编写一个脚本,当我单击按钮时,该脚本会自动显示 Summernote 链接对话框。 例如,我有以下按钮: Copy 所以在我的 js 中我有: $("#linklist").on("clic
有没有办法在summernote编辑器中同时启用默认工具栏和空气模式工具栏? 例如,我需要用户首先使用默认工具栏编辑文本区域,当他只想编辑一个单词时,他可以选择它,然后弹出空中模式工具栏。 (就像 M
我正在使用django-summernote作为所见即所得的编辑器。到目前为止,我可以从 Summernote 编辑器保存帖子,也可以使用 safe 过滤器显示它。但它的一些功能在我的模板中不存在。
我最近实现了django-summernote使用我的表单,这对于文本非常有效。然而,我很难确切地了解图像上传的工作原理。有人对它是如何完成的有一些意见吗? 问题 使用 Summernote 从文件中
我想向 Summernote WYSIWYG 编辑器添加自定义按钮。 此按钮将弹出一个小窗口,其中包含特殊字符,例如:alpha - beta - 度数等。 我到处找过,但没有找到任何有关此的信息。如
我是一名优秀的程序员,十分优秀!