|
|
1
yunzen
6 年前
我想您已经掌握了如何向Tinymce添加按钮以及如何调用函数等基本知识。所以我只回答“如何在插入符号位置标记工作?”部分。
如果可编辑内容是文本区域,请使用:
;(function() {
var position
var elem = document.getElementById('ex')
elem.addEventListener('click', renderClick)
function renderClick(evt) {
let textUntilCaret = this.textContent.substr(0, this.selectionStart)
textUntilCaret = textUntilCaret.replace(/\w+$/, '')
let textFromCaret = this.textContent.substr(this.selectionStart)
textFromCaret = textFromCaret.replace(/^\w+/, '')
this.selectionStart = textUntilCaret.length
this.selectionEnd = this.textContent.length - textFromCaret.length
}
function startWordAtPosition() {
}
})();
Click in the textarea and the whole word will be selected!<br>
<textarea name="" id="ex" cols="50" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, officiis et reiciendis maxime ipsam doloribus quo inventore animi voluptatibus maiores eligendi, corrupti cum placeat nobis possimus exercitationem ratione aut. Explicabo deserunt eum natus id laudantium repellendus aliquam magni molestias et, nihil asperiores obcaecati dolores sapiente. Nisi fugiat, beatae possimus impedit dolore quos nihil illo mollitia at exercitationem quo dignissimos eum, dolorum, delectus vel error sunt placeat eos ut. Suscipit, architecto perferendis. Minus debitis optio ratione aperiam sapiente est blanditiis vero cum alias accusantium veniam, molestiae odit soluta esse sint dolore dignissimos culpa autem ullam molestias repudiandae ab vitae eligendi inventore! Inventore, quas perspiciatis cumque repellat distinctio odio facilis explicabo ab molestiae laboriosam illo est at excepturi, deleniti dolore eum impedit quam voluptates. Totam quasi veniam dolor omnis magni atque, ex minus officia at adipisci similique a soluta possimus vitae blanditiis minima. Odit sequi blanditiis nesciunt, nemo reprehenderit dignissimos voluptatum aut, ex saepe ipsa itaque nobis similique, expedita eum sapiente quibusdam inventore aliquam et. Enim consequuntur, ipsam possimus quia perferendis obcaecati similique laborum! Tempora minus, repellat repellendus itaque obcaecati optio autem ad velit blanditiis id quasi quia quaerat fuga at praesentium hic accusamus assumenda. Doloribus sit distinctio vitae nostrum quo maiores, aperiam eius exercitationem suscipit quod et explicabo. Alias, explicabo quidem? Ipsum, fugiat aliquam obcaecati ab tempore ducimus pariatur, itaque, consequuntur ea beatae consectetur. Modi ducimus perspiciatis asperiores atque neque iste, eligendi odio voluptatibus labore, dolorem, iusto ipsa hic rem facere. Tempora officia doloribus repellendus excepturi, eaque temporibus architecto non sequi cupiditate harum pariatur, alias quia beatae voluptatem quas, vel illo inventore eligendi deserunt cumque laudantium id nulla. Eos cum soluta magnam quam, aliquam facere accusantium quasi, minus doloremque adipisci incidunt debitis non tempore! Perspiciatis eius illum maiores nam laborum dicta repellendus similique incidunt, cum ut, aliquid eveniet? Voluptatum, doloremque et?</textarea>
如果可编辑内容是带属性的DIV
contenteditable
设置,使用此:
它甚至可以与子元素、混合文本节点和子元素一起使用:
这在msie11及以下版本中不起作用,
console.clear();
;(function() {
var position
var elem = document.getElementById('ex')
elem.addEventListener('click', renderClick)
function renderClick(evt) {
let caretPosition = getCaretPosition(evt.target);
let caretNode = getCaretTextNode(evt);
let textUntilCaret = caretNode.textContent.substr(0, caretPosition)
textUntilCaret = textUntilCaret.replace(/\w+$/, '')
let textFromCaret = caretNode.textContent.substr(caretPosition)
textFromCaret = textFromCaret.replace(/^\w+/, '')
selectRange(caretNode, textUntilCaret.length, caretNode.textContent.length - textFromCaret.length)
}
function selectRange(node, start, end) {
// console.log(node, start, end)
let range = document.createRange()
range.selectNodeContents(node)
range.setStart(node, start)
range.setEnd(node, end)
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
function getCaretTextNode(evt) {
var range, textNode
// standard
if (document.caretPositionFromPoint) {
range = document.caretPositionFromPoint(evt.pageX, evt.pageY);
textNode = range.offsetNode;
// WebKit
} else if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(evt.pageX, evt.pageY);
textNode = range.startContainer;
} else if (document.body.createTextRange) {
// range = document.body.createTextRange();
// range.moveToPoint(evt.pageX, evt.pageY);
// range.select();
var sel = document.getSelection()
textNode = sel.focusNode
}
return textNode;
}
function getCaretPosition(editableDiv) {
var caretPos = 0,
sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos;
}
})();
<div contenteditable id="ex">Lorem ipsum dolor <b>sit amet</b> consectetur <em>adipisicing</em> elit. Itaque, officiis et reiciendis maxime ipsam doloribus quo inventore animi voluptatibus maiores eligendi, corrupti cum placeat nobis possimus exercitationem ratione aut. Explicabo deserunt eum natus id laudantium repellendus <span>aliquam magni molestias et, nihil asperiores obcaecati dolores </span>sapiente. Nisi fugiat, beatae possimus impedit dolore quos nihil illo mollitia at exercitationem quo dignissimos eum, dolorum, delectus vel error sunt placeat eos ut. Suscipit, <span>architecto perferendis</span>. Minus debitis optio ratione aperiam sapiente est blanditiis vero cum alias accusantium veniam, molestiae odit soluta esse sint dolore dignissimos culpa autem ullam molestias repudiandae ab vitae eligendi inventore! Inventore, quas perspiciatis cumque repellat distinctio odio facilis explicabo ab molestiae laboriosam illo est at excepturi, deleniti dolore eum impedit quam voluptates. Totam quasi veniam dolor omnis magni atque, ex minus officia at adipisci similique a soluta possimus vitae blanditiis minima. Odit sequi blanditiis nesciunt, nemo reprehenderit dignissimos voluptatum aut, ex saepe ipsa itaque nobis similique, expedita eum sapiente quibusdam inventore aliquam et. Enim consequuntur, ipsam possimus quia perferendis obcaecati similique laborum! Tempora minus, repellat repellendus itaque obcaecati optio autem ad velit blanditiis id quasi quia quaerat fuga at praesentium hic accusamus assumenda. Doloribus sit distinctio vitae nostrum quo maiores, aperiam eius exercitationem suscipit quod et explicabo. Alias, explicabo quidem? Ipsum, fugiat aliquam obcaecati ab tempore ducimus pariatur, itaque, consequuntur ea beatae consectetur. Modi ducimus perspiciatis asperiores atque neque iste, eligendi odio voluptatibus labore, dolorem, iusto ipsa hic rem facere. Tempora officia doloribus repellendus excepturi, eaque temporibus architecto non sequi cupiditate harum pariatur, alias quia beatae voluptatem quas, vel illo inventore eligendi deserunt cumque laudantium id nulla. Eos cum soluta magnam quam, aliquam facere accusantium quasi, minus doloremque adipisci incidunt debitis non tempore! Perspiciatis eius illum maiores nam laborum dicta repellendus similique incidunt, cum ut, aliquid eveniet? Voluptatum, doloremque et?</div>
|