0

Text Angularを使用して順序付きリストを作成し、デフォルトで 1,2,3 で始まる順序リストを作成できます。Text angularには2つのモードがあります 1.リッチテキストモード1.HTMLモード

HTMLモードショー

 <ol>
       <li>test</li>
       <li>test</li>
 </ol>

リッチ テキスト モードは次のように表示されます。

  1. テスト
  2. テスト

番号 5 で番号付きリストを開始する必要がある場合は、最初にHTML モード に切り替えて、以下の変更を行う必要があります

<ol start="5">
    <li>test</li>
    <li>test</li>
</ol>

リッチ テキスト モードの番号は 5 から始まります。

  1. テスト
  2. テスト

実際の問題は、リッチ テキスト エディター モードで< ol> タグによって生成された疑似要素をクリックして番号付けを変更する方法です。グーグルと調査の結果、疑似要素を変更できないようです。

スタック オーバーフロー エディターには、リッチ テキスト モード自体でこれを変更するオプションがあります。

したがって、たとえば 4 で始まるリッチ テキスト モードで以下のデータを追加するとき

 4. number 4
 3. number 3

プレビューモードでは、バグのある結果が表示されます。

  1. 4番
  2. 3番

気づいたら5. number 3。これは、リッチ テキスト エディターから生成されたものです。

DOM のタグを置き換える JS の方法があり、この時点では探していない html タグなどの組み合わせを使用して、似たようなタグのルック アンド フィールを提供します。

Text Angular で( html モードを実行するのではなく)リッチ テキスト モードでオンザフライで数値を変更するための創造的な CSS の方法はありますか。

4

4 に答える 4

6

私が理解したように、必要なのは、現時点でテキスト角度エディターによって実装されていない順序付きリストを使用するときに開始番号を変更する機能です。このような場合にtext-angularが提供するのは、新しい機能を追加するか、既存の機能をオーバーライドすることによって、ツールバーを簡単に拡張することです。

これは、必要な機能の実装例を含むPlunkerです。次のようにolボタンの構成をオーバーライドして実装しました。

app.decorator('taTools', function ($delegate, $document, taSelection) {

  // NOTE: override the ol action
  var olAction = $delegate.ol.action;
  $delegate.ol.action = function () {

    if (!this.active) {
      // NOTE: replace with better way for integrating the feature
      var startingNumber = $document.find('#startingNumber').val();

      // do the ordering
      var result = olAction.apply(this, arguments);

      // change the starting number
      var element = angular.element(taSelection.getSelection().start.element);
      var parentOls = element.parents('ol');
      if (parentOls.length > 0) {
        angular.element(parentOls[0]).attr('start', startingNumber); 
      }

      // clean up
      element = null;
      parentOl = null;
      return result;
    } else {
      return olAction.apply(this, arguments);
    }
  };

  return $delegate;
});

開始番号 IMO を設定する方法はあまり良くありません。より良い方法に置き換えるにはより多くの労力がかかるため (例: olボタンのドロップダウン)、単なるショーケースです。あなたにとって最も便利なものに置き換えることができます。

Text-Angular エディターの詳細と例については、そのドキュメントとツールバーをカスタマイズするためのページを確認してください。

于 2015-10-18T19:29:05.360 に答える
4

編集：質問が編集された後、私の答えはうまく適合しなくなりました。その後も賛成票を受け取ったので、それでも役に立ったと思い、ここに残します.

コメントや他の回答で述べたように、クリック部分は不可能です。番号付けを強調表示することが可能です。

:beforeタグの一部にカスタム カウンターを追加し、<li>ホバリングに反応させます。

ol {
    counter-reset: my-counter;
}

ol > li {
    list-style-type:none;
}

ol > li:before {
    counter-increment: my-counter;
    content: counter(my-counter) '. ';
}

ol > li:hover:before {
    color: red;
}

例: http://jsfiddle.net/u1uhr7s8/

繰り返しになりますが、数字の代わりにクリック可能なものを追加することはできません。これは、before:ビットが真に DOM の一部になるわけではないためです。

于 2015-09-17T12:46:40.213 に答える
2

ここでの「選択された」には、さまざまな意味があります。求めている答えを得るには質問を明確にする必要がありますが、Javascript でこれをどこかで参照したい場合は、次のいずれかを使用できます。

document.getElementsByTagName('ol') //Will return a list of all OLs on the page
document.querySelectorAll('ol') //Will return a list of all OLs on the page
$('ol') //Will return a list of all OLs on the page, but requires JQuery

「1」または「2」の li 要素を取得するには、クエリ内に LI を含めるか、返されたものの子として選択します。

var myOL = document.getElementsByTagName('ol')[0];
var myItems = myOL.children;

またはJQueryを使用

var myItems = $('ol li');

CSS ルールで OL をターゲットにすることについて話している場合は、タグ名を使用するだけです。

ol {
    background-color: #FF0000;
}

繰り返しになりますが、LI を探している場合は、それらすべてをターゲットにすることができます。

ol li {
    background-color: #FFFF00;
}

または、nth-child を使用して特定の子をターゲットにします。

ol li:nth-child(2) { /* second child - '2' in your case */
    background-color: #FFFF00;
}
于 2015-09-14T11:42:41.050 に答える
0

以下のソリューションは、S.Klechkovski の回答に触発されています。エディターで数字を入力し、たとえば5 、数字を選択し、TextAngular の ol タグをクリックします。古いものは5で始まります

違いはvar startingNumber = parseInt($(taSelection.getSelectionElement()).text());

$provide.decorator('taTools', function ($delegate, $document, taSelection) {

      // NOTE: override the ol action
      var olAction = $delegate.ol.action;
      $delegate.ol.action = function () {

        if (!this.active) {
          // NOTE: replace with better way for integrating the feature
        var startingNumber = parseInt($(taSelection.getSelectionElement()).text());

          // do the ordering
          var result = olAction.apply(this, arguments);

          // change the starting number
          var element = angular.element(taSelection.getSelection().start.element);
          var parentOls = element.parents('ol');
          if (parentOls.length > 0) {
            angular.element(parentOls[0]).attr('start', startingNumber); 
          }

          // clean up
          element = null;
          parentOl = null;
          return result;
        } else {
          return olAction.apply(this, arguments);
        }
      };

      return $delegate;
    });
于 2015-10-22T05:27:01.993 に答える