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

Question

我使用Text Angular创建和排序列表，并能够创建orderlist，默认情况下从1,2,3开始。文本角有两种模式：1.富文本模式1. HTML模式

HTML模式显示

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

富文本模式将显示为：

1. 测试
2. 测试

如果我需要开始编号为5的有序列表，我需要切换到 first并进行以下更改

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

现在，富文本模式以5开始编号

1. 测试
2. 测试

真正的问题是如何在富文本编辑器模式下点击< ol>标记生成的伪元素来改变编号，在搜索和研究之后，似乎伪元素是不能改变的。

堆栈溢出编辑器提供了在富文本模式下更改此模式的选项！

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

 4. number 4
 3. number 3

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

1. 数字4
2. 数字3

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

这里有一些JS方法来替换DOM中的标记，并给出简单的标签外观、感觉、使用html标记等的组合，这一点我不想看到。

是否有一种创造性的CSS方法来改变富文本模式(而不是html模式)中的文本角数。

Answer 1

下面的解决方案是由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;
    });

Answer 2

正如我所理解的，您需要的是在使用顺序列表时更改起始号的功能，而这个列表目前还没有由文本角编辑器实现。在这种情况下，文本角为您提供的是通过添加新的或覆盖现有的功能轻松地扩展工具栏。

下面是一个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按钮上)。你可以用最方便的东西来代替它。

有关文本角度编辑器的更多信息和示例，您可以检查它的documentation和page来自定义工具栏。

Answer 3

编辑:问题编辑后的，我的答案已经不太适合了。由于它在之后仍然收到了好评，我将假设它仍然是有帮助的，就把它留在这里吧。

正如注释和其他答案中提到的那样，单击部分是不可能的。可以突出编号。

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