我使用一个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 …Run Code Online (Sandbox Code Playgroud)我正在研究一个contenteditablediv来制作一个简单的RichText-Editor.我的要求之一是能够在按钮事件上的光标位置插入html块.
我可以用得到的那部分工作正常range,selection,range.insertNode(nodeHTML)或range.pasteHTML(nodeHTML)基于浏览器.但我无法得到两件事,理想情况下我想拥有
我知道我可以使用许多可用的编辑器,这样做非常好,但如果我得到这个,我就不必这样做了.欢迎任何帮助甚至建议.
谢谢.
我知道如何<a />使用如下href属性设置标记contenteditable:
execCommand("CreateLink", false, "#jumpmark");
Run Code Online (Sandbox Code Playgroud)
这将导致
<a href="#jumpmark">selection</a>
Run Code Online (Sandbox Code Playgroud)
但是我无法弄清楚如何设置锚name而不是href.
这是我想要的结果:
<a name="jumpmark">selection</a>
Run Code Online (Sandbox Code Playgroud)
谁能帮我?
附注:我使用jQuery和Rangy作为库,但我更喜欢直接使用execCommand的解决方案.
更新:这是一个jsfiddle:http://jsfiddle.net/fjYHr/选择一些文本,然后单击按钮.我想要的只是按下按钮,插入一个名称属性设置而不是href的链接.
有没有办法在一个contenteditable div中的所选文本之前和之后插入类似于bbcode的文本?我已经看到了textarea的许多答案,但代码不适用于contenteditable div.不需要IE支持.