4

I am using the Nebular chat component and it is working fine.

But I am unable to send HTML message in that. Such as

Hello world Hello World

Can you please help to achieve this in the nebular chat?

Edit 1

This is sample code for send message :

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',
      },
    });

Output: Hello world

For sending HTML message I have tried below code

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>

It is printing HTML character in the message

Manish
  • 4,692
  • 3
  • 29
  • 41
Hkachhia
  • 4,463
  • 6
  • 41
  • 76
  • 1
    It will be great of you can share your code that is giving you the problem. People here will be able to help you better, because with the current information no one can figure out what and where the problem is – Manish Oct 07 '20 at 06:07
  • 1
    Firstly are you sure you dont need quotes around the string when you sending it as HTML. Secondly do not save the message as is it may lead to security risk you must use escape chars for tags. And lastly the library you are using does it supports HTML messages? – Manish Oct 07 '20 at 06:55
  • The information not provided about library support HTML message or not. Whatever you have given suggestion it is a secondary thing when I will able to send a message in HTML format. – Hkachhia Oct 07 '20 at 07:11
  • 1
    Thats what you will have to make sure whether the component supports HTML messages. I saw the documentation and could not find any such reference, so its fair to assume that the component is not supporting HTML message and that is why you see the complete message as is, it only supports text messages and other predefined types – Manish Oct 07 '20 at 07:32
  • @Manish I know about that but on that site, they have clearly mentioned that Need some help or found an issue you can ask stack overflow and Github. That's why I have posted this question here for help [https://akveo.github.io/nebular/docs/components/chat-ui/examples#nbchatformcomponent] – Hkachhia Oct 07 '20 at 08:40
  • 1
    Thats fine, but stackoverflow wont be able to help you with a feature that is not supported by the component. I would recommend raising an issue on their Github. Because if its not supported it wont work :). May be you can try some other component. – Manish Oct 07 '20 at 09:39

1 Answers1

-2

Edit 2:

Ok, I got the problem. Nebular wants just string for message. So there is no way to send HTML styled text. But you can find the element and replace it with styled one on ngAfterViewInit.

Old Answer

Have you tried something like this?

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

Edit 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 {
}
Akif
  • 7,098
  • 7
  • 27
  • 53
  • @Akif: I don't understand how I can try your answer in my chat code? Actually, for sending message chat, it is following predefined structure which I have mentioned in the question and your answer doesn't match with that. – Hkachhia Oct 07 '20 at 07:07
  • I edited the answer again. I think you should replace the HTML element on ngAfterViewInit. – Akif Oct 07 '20 at 07:15