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

Question

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

HTML模式显示

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

富文本模式将显示为：

测试
测试

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

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

现在 富文本模式 从 5

开始编号

测试
测试

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

。

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

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

 4. number 4
 3. number 3

preview 模式最终显示 buggy 结果。

4号
3号

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

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

是否有创造性的 CSS 方法可以在 富文本模式 中即时更改数字（而不是 html 模式 ) 在文本 Angular.

Answer 1

'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，或者 select 将其作为返回内容的 child：

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:

定位特定的 child

ol li:nth-child(2) { /* second child - '2' in your case */
    background-color: #FFFF00;
}

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

据我了解，您需要的是在使用 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 and the page 自定义工具栏。

Answer 4

以下解决方案的灵感来自 S.Klechkovski 的回答。在编辑器上输入一个数字，比如 5 ， select 数字，点击 TextAngular 中的 ol 标签，旧的现在以 5[=18 开头=]

区别在于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; });

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

How to edit ol tags in rich text editor

html

css

angularjs

textangular