如何在沒有class屬性的情況下使用Rangy.js創建標籤？

我一直在玩Rangy.js的選擇範圍，到目前爲止真的很喜歡它。我正在尋找將選擇範圍的文本節點包裝在某個標籤中，並在點擊按鈕時進行切換。我使用cssClassApplierModule工作得很好，除了（並且由於名稱有意義），我還需要爲dom元素提供一個它應用於自身的類。如何在沒有class屬性的情況下使用Rangy.js創建標籤？

所以現在當我選擇一個範圍和應用，例如強大的標籤，我的最終結果是：

Text text text <strong class="test"> selected text </strong> text text text

而且我想它是：

Text text text <strong> selected text </strong> text text text

代碼我迄今如下：

function gEBI(id) { 
       return document.getElementById(id); 
      } 

      var action; 

      function toggleAction() { 
       action.toggleSelection(); 
      } 

      rangy.init(); 

      // Enable buttons 
      var cssClassApplierModule = rangy.modules.CssClassApplier; 

      // Next line is pure paranoia: it will only return false if the browser has no support for ranges, 
      // selections or TextRanges. Even IE 5 would pass this test. 
      if (rangy.supported && cssClassApplierModule && cssClassApplierModule.supported) { 
       action = rangy.createCssClassApplier("test", { 
        elementTagName: "strong", 
        elementProperties: { } 
       }); 
       var toggleActionButton = gEBI(nsID); 
       toggleActionButton.disabled = false; 
       toggleActionButton.ontouchstart = toggleActionButton.onmousedown = function() { 
        toggleAction(); 
        return false; 
       }; 
      }

我想「」和爲空，而不是「文本」作爲CSS類被傳遞，它會切換，但不再切換，顯然不是正確的解決方案。

任何幫助表示感謝..謝謝！

來源

2012-07-25 Andrew Eddy

不幸的是，Rangy的CSS類應用程序不會讓你這樣做。根本問題是它依賴於CSS類來決定哪些元素和文本節點要包圍或添加/刪除類。檢測類的存在要比檢測樣式的更一般情況要簡單得多，比如大膽。

去年，我做了一些工作，開發了一個更加雄心勃勃的通用execCommand模塊，它可以做你想做的事情。它有一個working demo，但我陷入了棘手的邊緣案件，並停止對它的工作。我打算回到它上面，但可能需要幾個月時間才能做好準備。

來源

2012-07-25 08:33:20

公平和不錯的POC（感謝您的快速回復）。你有什麼可能總結你的感受還沒有準備好/完整嗎？看起來它對我來說工作得很好，但我更多地瞭解DOM選擇的複雜程度。 – 2012-07-25 18:25:55

@AndrewEddy：我處理了
元素和空白文本節點，因此可能會出現問題或不一致之處。除此之外，歡迎您使用代碼，但它沒有像我通常會給它的測試那樣的東西，我不確定架構或API，並且我沒有認爲它在點I停止。此外，如果有錯誤，我不太可能修復它們，因爲當我恢復工作時，我可能會重新開始並根據需要複製舊代碼的各個位。 – 2012-07-25 18:38:07

恩，這是一個很好的開始，我感謝你的時間和幫助的意願。 – 2012-07-25 19:31:34

如何在沒有class屬性的情況下使用Rangy.js創建標籤？

回答

相關問題