1

選択したテキストをスパン クラスに囲むボタンを追加して、Aloha でカスタム アクションを設定しようとしています。

例 : 「例文」を選択しました

そしてそれはそれを

<span>example word</span>

私の問題は、選択したテキストを Aloha から取得できず、再挿入できないことです。

ドキュメントから、これらの行は何も返さない:

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: 私はこの質問でアロハ フォーラムに行きました。mod から、出力内に html を再挿入すると DOM の問題が発生する可能性があることがわかったのですが、範囲関数が Google Chrome と互換性がないことを最初にドキュメントから見逃していました。 m は on/for で開発中です。

それでも解決策に興味があります:)

前もって感謝します、

4

1 に答える 1

2

追加パッケージで wai-lang プラグインのようなプラグインを見ることができます。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>
于 2012-09-30T14:07:13.590 に答える