如何在富文本编辑器中编辑 ol 标签

Question

我正在使用Text Angular 创建和排序列表，并且能够创建默认以 1、2、3 开头的排序列表。文字角度有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 开始编号

5. 测试
6. 测试

真正的问题是如何在富文本编辑器模式下点击

标签生成的伪元素来更改编号。经过谷歌搜索和研究，伪元素似乎不能改变。

堆栈溢出编辑器提供了在富文本模式本身中进行更改的选项！

因此，在 富文本模式 中添加以下数据时，例如以 4 开头

 4. number 4
 3. number 3

预览模式最终显示buggy结果。

4. 4 号
5. 3 号

如果您注意到5. number 3。这是从富文本编辑器生成的。

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

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

Answer 1

据我了解，您需要的是在使用 text-angular 编辑器目前未实现的有序列表时更改起始编号的功能。 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 编辑器的更多信息和示例，您可以查看其 documentation 和 page 以自定义工具栏。

Answer 2

编辑：编辑问题后，我的答案不再适合。由于之后它仍然收到了赞成票，我将假设它仍然很有帮助，并将其留在这里。

正如在 cmets 和其他答案中提到的，点击部分是不可能的。可以突出显示编号。

在 <li> 标签的 :before 部分添加自定义计数器，并让它们对悬停做出反应：

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 的一部分。

Answer 3

这里的“选择”可能意味着许多不同的东西。您需要澄清您的问题以获得您所追求的答案，但如果您希望在 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;
}

Answer 4

以下解决方案的灵感来自 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;
    });