如何在星云聊天中发送格式化/HTML消息？

Question

我正在使用 Nebular 聊天组件，它工作正常。

但是我无法在其中发送 HTML 消息。比如

世界你好 世界你好

您能在星云聊天中帮忙实现这个吗？

编辑1

这是发送消息的示例代码：

this.messages.push({
      text: "Hello world",
      date: new Date(),
      reply: true,
      type: files.length ? 'file' : 'text',
      files: files,
      user: {
        name: 'Jonh Doe',
        avatar: 'https://i.gifer.com/no.gif',
      },
    });

输出：Hello world

为了发送 HTML 消息，我尝试了下面的代码

this.messages.push({
      text: <b>Hello World</b>,
      date: new Date(),
      reply: true,
      type: files.length ? 'file' : 'text',
      files: files,
      user: {
        name: 'Jonh Doe',
        avatar: 'https://i.gifer.com/no.gif',
      },
    });

Output :<b>Hello world</b>

正在打印消息中的 HTML 字符

Answer 1

你可以试试这个。基于 https://akveo.github.io/nebular/docs/components/chat-ui/overview#nbchatcomponent

的示例

<div *nbCustomMessage="'custom'" class="custom">
    <p>Insert your formatted html element here...</p>
</div>

<nb-chat-message 
type="custom" //based on the name declared above
[reply]="false"
[sender]="John"
[avatar]="'https://i.gifer.com/no.gif'"
></nb-chat-message>

Answer 2

编辑2：

好的，我遇到问题了。 Nebular 只需要字符串作为消息。因此无法发送 HTML 样式的文本。但是您可以在 ngAfterViewInit 上找到该元素并将其替换为样式元素。

---

旧答案

你尝试过这样的事情吗？

https://github.com/akveo/ngx-admin/blob/master/src/app/pages/editors/ckeditor/ckeditor.component.ts

编辑1：

import { Component } from '@angular/core';

import './ckeditor.loader';
import 'ckeditor';

@Component({
  selector: 'ngx-ckeditor',
  template: `
    <nb-card>
      <nb-card-header>
        CKEditor
      </nb-card-header>
      <nb-card-body>
        <ckeditor [config]="{ extraPlugins: 'divarea', height: '320' }"></ckeditor>
      </nb-card-body>
    </nb-card>
  `,
})
export class CKEditorComponent {
}