0

我正在使用Text Angular创建和排序列表，并且能够创建默认以 1、2、3 开头的 orderlist。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。这是从富文本编辑器生成的。

有 JS 方法可以替换 DOM 中的标签，并使用 html 标签等组合来提供类似的标签外观和感觉，我目前并不在寻找这些标签。

是否有一种创造性的 CSS 方式可以在 Text Angular中以富文本模式（而不是html 模式）动态更改数字。

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 回答