代码之家  ›  专栏  ›  技术社区  ›  David

tinymce:以编程方式在插入符号位置选择单词

  •  1
  • David  · 技术社区  · 6 年前

    如何修改Tinymce 4中的当前选择,以便将其扩展到当前单词的边界?

    假设插入符号位于下面所示的位置。如何强制Tinymce选择“测试”字?

    这是一个T。

    我怀疑可能会使用浏览器的范围对象,但我不确定如何执行此操作

    我的最终目标是,当我从按钮触发一个自定义操作时,它将应用于所选内容(如果有),或者应用于包含插入符号位置的单词。基本上,单击粗体按钮时的行为相同

    1 回复  |  直到 6 年前
        1
  •  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>