如何获取TextAngular编辑器文本的应用样式对象？能否不存HTML保存带样式文本到数据库？

Great questions! Let's break them down one by one:

TextAngular没有直接暴露API来获取现成的样式对象，但可以结合它的实例引用和标准DOM API来实现：

• 获取编辑器内容区域的计算样式
  首先在Angular组件中通过@ViewChild获取TextAngular实例，然后定位到.editor-text容器，用window.getComputedStyle()获取元素的所有计算后样式：

  import { ViewChild } from '@angular/core';
  import { TextAngularComponent } from 'text-angular';
  
  // 组件类内
  @ViewChild('editor') editor: TextAngularComponent;
  
  getEditorContentStyles() {
    const contentArea = this.editor.editorElement.nativeElement.querySelector('.editor-text');
    if (contentArea) {
      const computedStyles = window.getComputedStyle(contentArea);
      // 提取你需要的特定样式属性
      const targetStyles = {
        fontSize: computedStyles.fontSize,
        color: computedStyles.color,
        fontWeight: computedStyles.fontWeight,
        fontStyle: computedStyles.fontStyle
      };
      return targetStyles;
    }
    return null;
  }
  

• 获取选中文本的样式
  如果需要用户选中区域的样式，可以利用TextAngular的选择器API定位到激活元素：

  getSelectedTextStyles() {
    const selection = this.editor.selection;
    if (selection.rangeCount > 0) {
      const selectedElement = selection.getRangeAt(0).commonAncestorContainer.parentElement;
      const elementStyles = window.getComputedStyle(selectedElement);
      return {
        textDecoration: elementStyles.textDecoration,
        fontFamily: elementStyles.fontFamily
        // 根据需求添加更多样式属性
      };
    }
    return null;
  }
  

保存HTML虽然简单，但如果想要替代方案，有两种实用思路，取决于你的场景：

方案1：以JSON片段形式存储样式文本 #

将内容拆分为多个文本片段，每个片段对应一组样式。这种方式能完全控制样式，同时避免原始HTML的风险。

示例JSON结构： #

[
  {
    "text": "重点提示：",
    "styles": {
      "fontWeight": "bold",
      "color": "#d9534f",
      "fontSize": "18px"
    }
  },
  {
    "text": " 这是一段带有斜体格式的样式文本。",
    "styles": {
      "fontStyle": "italic",
      "fontSize": "14px"
    }
  }
]

HTML转JSON的实现： #

用DOMParser解析编辑器的HTML内容，遍历DOM提取文本和对应样式：

htmlToStyledJson(htmlContent: string) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, 'text/html');
  const styledSegments = [];

  const traverseNode = (node: Node) => {
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      const parentEl = node.parentElement;
      const styles = {};
      if (parentEl) {
        const computedStyle = window.getComputedStyle(parentEl);
        // 筛选需要持久化的样式属性
        styles['fontWeight'] = computedStyle.fontWeight;
        styles['color'] = computedStyle.color;
        styles['fontStyle'] = computedStyle.fontStyle;
        styles['textDecoration'] = computedStyle.textDecoration;
        styles['fontSize'] = computedStyle.fontSize;
      }
      styledSegments.push({ text: node.textContent, styles });
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      node.childNodes.forEach(child => traverseNode(child));
    }
  };

  doc.body.childNodes.forEach(node => traverseNode(node));
  return styledSegments;
}

渲染JSON为样式文本（Angular中）： #

用*ngFor和Angular的样式绑定动态应用样式：

<div class="rendered-content">
  <span *ngFor="let segment of savedStyledText" [style]="segment.styles">
    {{ segment.text }}
  </span>
</div>

方案2：使用Markdown（适用于简单样式） #

如果用户只需要基础格式（加粗、斜体、标题、列表等），可以将编辑器的HTML转换为Markdown存储。TextAngular有支持Markdown的插件，也可以用轻量转换工具实现。

示例转换逻辑： #

• <strong>加粗文本</strong> → **加粗文本**
• <em>斜体文本</em> → *斜体文本*
• <h2>二级标题</h2> → ## 二级标题

这种方式的优势是可移植性强、避免HTML注入风险，但无法支持自定义颜色、字体大小等复杂样式。

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