TinyMCE：以編程方式選擇插入符號位置的單詞

Question

如何修改tinyMCE 4的當前選擇，以便將其擴展到當前單詞的邊界？

假設插入符號位於下面表示的位置。 如何強制tinyMCE選擇'test'詞？

這至少|

我懷疑可能會使用瀏覽器的 Range 對象，但我不確定如何執行此操作

我的最終目標是，當我從按鈕觸發自定義操作時，它適用於選擇（如果有的話）或包含插入符號位置的單詞。 基本上，單擊粗體按鈕時的行為相同

Answer 1

我想您已經掌握了如何向 TinyMCE 添加按鈕以及如何調用函數等的基礎知識。 所以我只會回答“如何在插入符號位置標記作品？” 部分。

如果可編輯內容是 textarea，請使用：

 ;(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>