html

在组件类中调用自定义命令：

typescript
@ViewChild('editorInstance') editorInstance;

ngAfterViewInit() {
const editor = this.editorInstance.editor;

// 注册三种不同用途的Span命令
editor.commands.add('insertTitleSpan', new InsertSpanCommand(editor, 'seo-title'));
editor.commands.add('insertKeywordSpan', new InsertSpanCommand(editor, 'highlight-keyword'));
editor.commands.add('insertDescSpan', new InsertSpanCommand(editor, 'section-desc'));
}

applyTitle() {
this.executeCommand('insertTitleSpan', { content: '（此处为标题）' });
}

highlightKeyword() {
this.executeCommand('insertKeywordSpan');
}

addDescription() {
this.executeCommand('insertDescSpan', { content: '（本段为描述）' });
}

private executeCommand(commandName, options = {}) {
const editor = this.editorInstance.editor;
const command = editor.commands.get(commandName);

if (command.isEnabled) {
editor.execute(commandName, options);
editor.editing.view.focus();
}
}

这样，用户只需选中文本片段，点击相应按钮，即可自动为其包裹上预设类名的<span>标签。

样式设计与语义分离

为了使这些Span元素在前端展示时具备差异化表现，我们需要在全局样式中定义对应的CSS规则：

css
.ck-content .seo-title {
font-size: 1.2em;
font-weight: bold;
color: #1a1a1a;
border-bottom: 2px solid #007acc;
padding-bottom: 2px;
}

.ck-content .highlight-keyword {
background-color: #fffacd;
padding: 0 4px;
border-radius: 3px;
font-weight: 600;
}

.ck-content .section-desc {
color: #666;
font-style: italic;
background: #f8f9fa;
padding: 4px 8px;
border-left: 3px solid #28a745;
}

值得注意的是，所有样式都限定在.ck-content作用域内，避免污染其他页面区域。同时，这种结构也便于后期统一调整主题风格。

数据提取与内容分析

当用户完成编辑后，除了保存完整HTML外，我们还可以利用DOM解析技术提取被标记的Span内容，用于生成元信息或进行内容结构化处理。

typescript
extractMarkedContent(html: string): any {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const titles = Array.from(doc.querySelectorAll('.seo-title')).map(el => el.textContent);
const keywords = Array.from(doc.querySelectorAll('.highlight-keyword')).map(el => el.textContent);
const descriptions = Array.from(doc.querySelectorAll('.section-desc')).map(el => el.textContent);

return { titles, keywords, descriptions };
}

这一机制特别适用于自动生成网页标题、关键词列表或摘要信息，极大提升了内容运营效率。

结语

通过在Angular中深度集成CKEditor并扩展其原生能力，我们不仅实现了对Span元素的动态管理，更构建了一套语义化的内容编辑体系。这种方式既保持了编辑器的易用性，又赋予开发者足够的灵活性去满足复杂的业务逻辑。无论是SEO优化、内容标注还是结构化输出，这样的方案都能提供坚实的技术支撑。