如何修改tinyMCE 4中的当前选择，以便可以将其扩展到当前单词的边界？
说插入号在下面表示的位置。如何强制tinyMCE选择“测试”字词？
这是一个t | est
我怀疑这可能会使用浏览器的Range对象，但是我不确定该怎么做
我的最终目标是，当我通过按钮触发自定义操作时，它既适用于所选内容（如果有），也适用于包含插入符号位置的单词。基本上，单击加粗按钮时的行为相同
答案 0 :(得分：1)
我想您已经具备了如何在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>
如果可编辑内容是设置了属性contenteditable的div，请使用以下命令：
它甚至适用于子元素，混合文本节点和子元素：
不适用于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>