Aloha編輯器 - 獲取突出顯示的文本並用html代碼替換

Question

我試圖在Aloha中設置一個自定義操作，添加一個將所選文本放入span類的按鈕。

舉例： 你選擇了「如字」

，它會改變它的

<span>example word</span> 

我的問題是，我不能讓所選文本從阿羅哈甚至更少重新插入的那一刻它。

從文檔，這些線繼續返回什麼：

var range; 
if (Aloha.getSelection().rangeCount > 0) { 
range = Aloha.getSelection().getRangeAt(0); 
} 

全碼：

var redHighlight = ""; 
    Aloha.require(['ui/ui', 'ui/button'], function(Ui, Button) { 
     var redButton = Ui.adopt("redButton", Button, { 
      tooltip: 'Label',//gives inner text 
      click: function(){ 
       var range; 
       if (Aloha.getSelection().rangeCount > 0) { 
        range = Aloha.getSelection().getRangeAt(0); 
       } 
       console.log(range); //returns nothing 
      } 
     }); 
    }); 

    Aloha.settings.toolbar = { 
     tabs: [ 
     { 
      label: 'Urgent', 
      components: [ 'redButton' ], 
     } 
     ], 
     exclude: [ 'strong', 'emphasis', 'strikethrough' ] 
    }; 

編輯1： 我去阿羅哈論壇這個問題，從國防部我得到在輸出重新插入html可能會導致一些DOM問題，我第一次錯過了文檔，範圍功能與我正在開發/谷歌Chrome不兼容。

仍有意雖然解決:)

由於提前，

Answer 1

你可以看看像額外的包威琅插件的插件。 Aloha Editor中有一個實用程序對象，可幫助您將選定的文本包裝到DOM對象中。

var range = Aloha.Selection.getRangeObject(); 
if (range.isCollapsed()) { 
      GENTICS.Utils.Dom.extendToWord(range); 
} 
if (!range.isCollapsed()) { 
    GENTICS.Utils.Dom.addMarkup(range, 
     jQuery('<span class="myspecialspan"></span>'), false); 
} 
range.select(); 

除了相應改變選擇，它也將處理DOM分裂比如當你不剛纔選定文本做的，但你的選擇也包含着一個不能被包裹成一個跨度，跨度塊元素將被分割：

<h1>{Heading 1</h1> 
<h1>Heading 2</h1> 
<h1>Heading 3}</h1> 

哪裏結束{選擇和開始標誌}，將導致

<h1>{<span class="myspecialspan">Heading 1</span></h1> 
<h1><span class="myspecialspan">Heading 2</span></h1> 
<h1><span class="myspecialspan">Heading 3</span>}</h1>