如何在富文本编辑器中编辑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. 测试

真正的问题是如何在富文本编辑器模式下通过单击<ol>标记生成的伪元素来更改编号.在谷歌搜索和研究之后,似乎伪元素无法改变.

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

因此,在以富文本模式添加以下数据时,例如从4开始

 4. number 4
 3. number 3

在预览模式结束显示马车结果.

4. 4号
5. 3号

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

有一种JS方法可以替换DOM中的标签,并使用html标签等组合给出一个simlar标签,我目前还没有找到它.

是否有一种创造性的CSS方式可以在文本角度中以富文本模式(而不是html模式)动态更改数字.

Answer 1

据我所知,你需要的是一个在使用有序列表时更改起始编号的功能,目前没有由文本角度编辑器实现.什么文本的角度为您提供在这种情况下,很容易通过添加新的或现有的覆盖功能的工具栏延伸.

这是一个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编辑器的更多信息和示例,您可以查看其文档和自定义工具栏的页面.