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

Question

我正在使用Text Angular创建有序列表，并能够创建默认以1,2,3开头的orderlist。文本角有两种模式 1。富文本模式1.

显示

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

富文本模式将显示为:

测试
测试

如果我需要以数字5开始有序列表，我需要切换到HTML模式首先并执行以下更改

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

现在富文本模式以5

开始编号测试

测试

真正的问题是如何通过点击

标签，而在富文本编辑器模式下。经过谷歌搜索和研究，似乎pseudo元素无法更改。

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

所以当在富文本模式中添加以下数据时从4开始，例如

 4. number 4
 3. number 3

预览模式最终显示错误的结果。
1. 4号
3号

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

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

是否有一种创造性的CSS方法来改变数字在富文本模式(而不是做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按钮上的下拉)。你可以用你最方便的东西来代替它。

关于文本- angular编辑器的更多信息和示例，你可以查看它的文档和定制工具栏的页面。

Answer 2

编辑:问题被编辑后，我的答案不再很合适。因为之后它仍然得到了好评，所以我假设它仍然是有帮助的，就把它留在这里。

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

在<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

这里的'selected'可能意味着许多不同的事情。你需要澄清你的问题来得到你想要的答案，但是如果你想在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;
}

或使用n -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;
    });