相关疑难解决方法(0)

我试图在文章中为选择的开始和结束获得字符偏移量.但是,我想在这个过程中忽略一些元素.

在我的应用程序中,服务器正在使用HTML之前JS动态注入一些元素,并且文本中的字符数在服务器和客户端之间保持一致非常重要.

我希望它会像window.getSelection()一起一样简单user-select: none;.遗憾的是,尽管文本看起来没有被选中,但它仍然包含在选择范围内.

我在下面写了一个简短的例子.我曾经写过一篇removeFromSelection没有太大成功的解决方法.也许我需要删除重叠的范围,.unselectable并用全新的范围对象手动填补空白.我觉得这应该比我做的更容易.我应该怎么做？

function findAncestorOffset(container, node, offset)
{
	if (node == container)
		return offset;
	var parent = node.parentNode;
	var syblings = parent.childNodes;
	for (var i = 0, len = syblings.length; i < len; i++)
	{
		if (syblings[i] == node)
			break;
		offset += $(syblings[i]).text().length;
	}
	return findAncestorOffset(container, parent, offset);
}

function removeFromSelection(selector, selection)
{
	$(selector).each(function(i, node){
		var range = document.createRange();
		range.selectNodeContents(node);
		selection.removeAllRanges(range);
	});
}

var onSelect = function(){
  var sel = …

除了使用Undo之外,我认为没有办法删除内容可编辑的h1和h2标签.预期的行为是再次单击H1按钮应该关闭它,但它不会.还有一个"删除格式"按钮,但它只适用于粗体,斜体等项目.有没有办法通过JavaScript执行此操作？

编辑:结果必须删除打开和关闭H1标记,而不是用其他任何内容替换它.

请在此处查看简化的测试用例:http: //jsfiddle.net/kthornbloom/GSnbb/1/

<div id="editor" contenteditable="true">
    <h1>This is a heading one</h1>
    How can I remove the header styling if I want to?
</div>

我面临以下问题:当我尝试在contenteditable元素中选择文本并且选择的结尾是元素内容的开头时,则不会触发select事件并且没有Selection和Range对象.

有人可以告诉我为什么会出现这种情况或如何防止这种情况？

负责获取选择范围的代码:

$('div[contenteditable="true"]').bind("mouseup keyup touchend", function() {
  lastCaretIndex = getSelectionRange();
});

function getSelectionRange() {
  var sel;
  if (window.getSelection) {
    sel = window.getSelection();

    console.log(sel); // this doesn't print anything event empty string

    if (sel.rangeCount) {
      return sel.getRangeAt(0);
    }
  } else if (document.selection) {
    return document.createRange();
  }

  return null;
}

<div id="main-input" contenteditable="true">Hello world!</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

JSFiddle(打开浏览器控制台以确保不会记录选择).

我有一个显示一些跨度的React应用程序：

<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...

我希望用户像这样用鼠标选择文本

..然后获取选定的值，或突出显示文本等。我​​将如何在React中做到这一点？我不确定要使用什么事件处理程序以及如何掌握当前选择！一个最小的例子或提示将不胜感激！

我在将复制粘贴到我的电子应用程序中时遇到很多麻烦。我制作了一个复制和粘贴窗口用户界面，但一直在寻找一种方法来实现复制和粘贴功能（仅复制突出显示的文本）。我已经这样做很长时间了，并尝试使用电子本身的剪贴板 API，但这不会复制突出显示的文本，仅复制您自己添加的文本。我还尝试制作一个仅运行 CTRL + C 命令的按钮，但我无法让它工作，所以任何帮助将不胜感激！

提前致谢！

有没有办法在一个contenteditable div中的所选文本之前和之后插入类似于bbcode的文本？我已经看到了textarea的许多答案,但代码不适用于contenteditable div.不需要IE支持.

我有点困惑为什么这段代码不起作用!

HTML标记:

<div id="diva"><b>Score</b> some <i>goals</i></div>
<div id="soda"></div>

JavaScript代码:

function GetSelectedText () {
if (window.getSelection) {  // all browsers, except IE before version 9
    var range = window.getSelection ();
    alert (range.toString ());
} 
else {
    if (document.selection.createRange) { // Internet Explorer
        var range = document.selection.createRange ();
        alert (range.text);
    }
}
}

var butn = document.getElementById("soda");
butn.onclick = function(){
    GetSelectedText();
}

在我的带有codemirror的文本区域中,我试图能够选择/突出显示文本,然后能够单击我的粗体按钮,并应在其周围包裹粗体标签.

我看过了

问题1,SO问题2

但似乎不适用于代码镜像.

我的问题是:使用codemirror我如何获取所选文本,然后确保当我单击粗体按钮时它正确包装文本？

Codepen代码视图

Codepen全视图

脚本

var editor = document.getElementById('text-editor');
var string = grabed_text();

    $("#text-editor").each(function (i) {
        editor = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            mode: 'html'
        });

        $('button').click(function(){

          var val = $(this).data('val');


          switch(val){
            case 'bold': editor.replaceSelection('<b>' + string + '</b>');
            break;
           }
        });
    });

function grabed_text() {

}    

HTML

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default"  onLoad="text_editor();">
<div class="panel-heading">
<button type="button" data-val="bold" class="btn btn-default">Bold</button>
</div>
<div class="panel-body"> …

我想在网页上实现这样一个功能:当被调用时,它会检查页面上是否有一些文本选择(通常显示为反色文本),如果是,则插入一个元素 <img src="my.png"/>在第一个单词之前.选择.

纯JavaScript或jQuery代码都是受欢迎的,jQuery更受欢迎.谢谢.

我需要用户将文本片段分配给Shiny中的类别或“代码”。基本上，我希望用户突出显示来自输出的文本（在下面的示例中，来自table或text输出），然后按按钮（code）并将选定的文本分配给应用程序内的对象。在下面的应用中，所选文本应呈现为output$selected_text。我希望您能就如何实现此目标提出任何建议，我怀疑JavaScript会有所帮助。

library(shiny)

text1 <- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec quam ut tortor interdum pulvinar id vitae magna. Curabitur commodo consequat arcu et lacinia. Proin at diam vitae lectus dignissim auctor nec dictum lectus. Fusce venenatis eros congue velit feugiat, ac aliquam ipsum gravida. Cras bibendum malesuada est in tempus. Suspendisse tincidunt, nisi non finibus consequat, ex nisl condimentum orci, et dignissim neque est vitae nulla." …