相关疑难解决方法(0)

我有一个令人满意的div,我需要在插入位置插入文本,

这可以在IE中轻松完成 document.selection.createRange().text = "banana"

有没有类似的方法在Firefox/Chrome中实现这一点？

(我知道这里存在一个解决方案,但它不能在contenteditable div中使用,看起来很笨拙)

谢谢!

当用户编辑a contenteditable div,并按某些键时,我想覆盖默认行为.例如,我想在用户按ENTER时插入一个正常的换行符.我这样做document.execCommand("insertText",...)

到目前为止,这是我发现的唯一方法,使用户可以撤消和重做此操作.

<div id="editor" contenteditable="true" style="white-space:pre-wrap">
Some text....
</div>

<script>
$("#editor").keydown(function(evt){
    console.log(evt.keyCode);
    if(evt.keyCode==13){
        document.execCommand("insertText",false,"\n");
        evt.preventDefault();
        evt.stopPropagation();
    }
}
</script>

这段代码适用于chrome和firefox.但是,即不支持"inserttext".是否有办法插入文本,即用户可以撤消它？

我使用的是Microsoft ajax-toolkit提供的文本编辑器.
它iframe在浏览器上呈现.我在该编辑器中添加了一个下拉列表,我希望当用户更改下拉索引时,应在编辑器当前光标位置添加该值.

我在SO上得到了一个代码,它给出了编辑器当前所选文本如下

function getIframeSelectionText(iframe) {
        var win = iframe.contentWindow;
        var doc = iframe.contentDocument || win.document;

        if (win.getSelection) {
            return win.getSelection().toString();

        } else if (doc.selection && doc.selection.createRange) {
            return doc.selection.createRange().text;
        }
 }

但我想在当前位置添加一些文字.html呈现如下

<td class="ajax__htmleditor_editor_editpanel"><div id="Editor1_ctl02" style="height:100%;width:100%;">
            <iframe id="Editor1_ctl02_ctl00" name="Editor1_ctl02_ctl00" marginheight="0" marginwidth="0" frameborder="0" style="height:100%;width:100%;display:none;border-width:0px;">

            </iframe><textarea id="Editor1_ctl02_ctl01" class="ajax__htmleditor_htmlpanel_default" style="height:100%;width:100%;display:none;"></textarea><iframe id="Editor1_ctl02_ctl02" name="Editor1_ctl02_ctl02" marginheight="0" marginwidth="0" frameborder="0" style="height:100%;width:100%;display:none;border-width:0px;">

            </iframe>
        </div></td>

我正在尝试如下

$("#imgDropdown").change(function () {
            //var iframeBody =    $(window.Editor1_ctl02_ctl00.document.getElementsByTagName("body")[0]);
            var iframe = document.getElementById("Editor1_ctl02_ctl00");
            $("#Editor1_ctl02_ctl00").find("body").insertAtCaret("value");
            //alert(getIframeSelectionText(iframe));
        });

插入文本的功能不起作用iframe如下

$.fn.extend({
        insertAtCaret: function …

在InternetExplorer上,<p></p>每次按Enter键时,contentEditable DIV都会创建一个新段落(),而Firefox会创建一个<br/>标记.是否可以强制IE插入<br/>而不是新段落？

我正在尝试创建一些可拖动的元素(标记),可以在一个可疑的div内拖动.似乎一切都在工作,除了......在我拖动一个元素然后放下它之后,我再也无法拖动它了.似乎我再也无法绑定它的dragstart事件了.

知道为什么会这样,我该如何解决？

这是我小提琴的链接:http://jsfiddle.net/gXScu/1/

HTML:

<div id="editor" contenteditable="true">
    Testime siinkohal seda, et kuidas<br />
    on võimalik asja testida.
    <span class="draggable" draggable="true" contenteditable="false">Token</span>
</div>
<span class="draggable" draggable="true" contenteditable="false">Token 2</span>

Javascript(jQuery)

var bindDraggables = function() {
    console.log('binding draggables', $('.draggable').length);
    $('.draggable').off('dragstart').on('dragstart', function(e) {
        if (!e.target.id)
            e.target.id = (new Date()).getTime();
        e.originalEvent.dataTransfer.setData('text/html', e.target.outerHTML);
        console.log('started dragging');
        $(e.target).addClass('dragged');
    }).on('click', function() {
        console.log('there was a click');
    });
}

$('#editor').on('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#editor').on('drop', function(e) {
    e.preventDefault();
    var e = e.originalEvent;
    var content …

我有一个问题,我需要在div中插入一个文本(字符串,可能有也可能没有html标签).它必须是一个div而不是textarea.

反正有吗？首先,我需要获取光标位置,然后将文本插入该位置.

它类似于函数insertAdjacentText,但它只能在标记之前或之后插入,并且只能在IE中使用.

请参阅此URL:http://yart.com.au/test/iframe.aspx.注意如何将光标定位在div中,我们需要在光标位置添加文本.

我有一个textarea,我在插入符号的位置插入内容(感谢Tim Down的回答).它在用户按下按钮时插入内容.但似乎按下按钮时,文本区域的焦点就会丢失.如何保持焦点在那里,提供插入符的位置也是一样的？我正沿着使用的线路思考evt.preventDefault()用.focusout().如果这有帮助.

我正在使用可编辑的iframe构建一个所见即所得的编辑器document.execCommand().现在我需要使用"insertHTML"在Chrome和Firefox中完美运行的命令,但当然它在Internet Explorer中不起作用:

function run() {
  document.getElementById("target").focus();
  document.execCommand("insertHTML", false, "<b>ins</b>");
}

<div contenteditable id="target">contenteditable</div>
<button onclick="run()">contenteditable.focus() + document.execCommand("insertHTML", false, "&lt;b>ins&lt;/b>")</button>

这个问题的标准解决方案是什么？没关系,如果它只适用于IE8,但IE7支持也会很好.

我有两个div,如下所示:

<div id="div1">
<p>something</p>
<div><table><tr><td>Div1</td></tr></table></div>
</div>
<div id="div2">
<p>something else</p>
<div><table><tr><td>Div2</td></tr></table></div>
</div>
<button type="button">Check</button>

现在,我想知道何时选择某些文本,然后按下按钮,如果所选文本在"div1"下面.我怎样才能做到这一点？

编辑:解决方案必须在IE-7及更高版本中工作.

我使用一个contenteditable div作为输入字段来键入一些文本,并通过该文本中的按钮(小html图片)插入图标.

只要文本比可满足的字段更窄,就可以了.

一旦文本比字段长(因此它部分隐藏):

当我输入一个文字字符时,一切都很好,按下键后会自动显示最后一个字符,这样你就可以随时看到你输入的内容了.但是当我通过按钮输入一个图标时,图标就可以了,但它是隐藏的,因为字段内容不会移动以使新输入的图标可见,直到我输入另一个文本字符.

对此的任何解决方案,以便输入的最后一个元素(文本或html)始终对用户可见？

function pasteIcon(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(),
        node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteIcon(html);
  }
}

$(document).ready(function() {
  $('.buttOn').click(function() {
    $('.contEd').focus();
    pasteIcon('<img …