Web开发新手求助：如何在text-angular展示的HTML文档中高亮文本？

嘿，作为Web开发新手，要在text-angular里实现文本高亮其实挺简单的，结合你给出的示例CSS，我给你几个实用的方案：

方案1：直接给静态HTML内容添加高亮类 #

如果你的HTML文档是静态展示（不需要编辑），直接在需要高亮的文本外层包裹带有样式类的<span>标签就行，比如：

<div id="testDocument">
  <p style="padding:0;color:#000000;">
    这是一段普通文本，<span class="highlight">这段内容会显示深绿高亮</span>，
    还有<span class="light">这段是浅黄高亮</span>。
  </p>
</div>

你的示例里已经定义了.highlight和.light的背景色样式，只要这段HTML被text-angular正确渲染，高亮效果就会自动生效。

方案2：给text-angular添加自定义高亮按钮（编辑模式用） #

如果是要在text-angular的编辑界面里让用户手动给文本加高亮，可以自定义工具栏按钮，点击后给选中的文本自动添加高亮类。以下是Angular配置的示例代码：

angular.module('yourAppName').config(function($provide, textAngularConfigProvider) {
  // 把自定义高亮按钮添加到工具栏
  textAngularConfigProvider.toolbar.push('customHighlight');

  // 注册高亮按钮的逻辑
  $provide.decorator('taOptions', ['$delegate', function(taOptions) {
    // 在工具栏的第二组（可根据需求调整位置）添加两个高亮按钮
    taOptions.toolbar[1].push(
      {
        text: '深绿高亮',
        action: function() {
          var selectedText = this.$editor().wrapSelection('getSelectedText');
          if (selectedText) {
            this.$editor().wrapSelection('insertHTML', `<span class="highlight">${selectedText}</span>`);
          }
        },
        class: 'btn-highlight-dark'
      },
      {
        text: '浅黄高亮',
        action: function() {
          var selectedText = this.$editor().wrapSelection('getSelectedText');
          if (selectedText) {
            this.$editor().wrapSelection('insertHTML', `<span class="light">${selectedText}</span>`);
          }
        },
        class: 'btn-highlight-light'
      }
    );
    return taOptions;
  }]);
});

方案3：确保样式能正确作用到text-angular内容 #

有时候text-angular的编辑器容器会有自己的样式隔离，导致你的全局样式不生效，这时候可以提高样式选择器的优先级：

/* 针对text-angular编辑器的高亮样式 */
.ta-editor .highlight {
  background: #D3E18A !important;
}
.ta-editor .light {
  background-color: yellow !important;
}

这样就能确保高亮样式在编辑器内部正常显示了。

内容的提问来源于stack exchange，提问作者ganesh kaspate