Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

343
Vistas
How can I append HTML format value to normal format in angular using CKEditor

I am using angular CKEditor for HTML textarea. So I just get the value from CKEditor and show it to some other div. I have integrated this function using ngModel but I can't show the HTML form value. It's show the raw HTML value. Please check the below code and output.

HTML

<div class="row">
        <div class="col-md-6 col-lg-6 col-sm-12 text-center">
            <div class="bg-gray p-5 m-3" *ngIf="!editorStatus">
                <p class="mb-0">{{ htmlEditorValue }}</p>
            </div>

            <div class="htmleditor" *ngIf="editorStatus">
                <ckeditor name="htmlEditor" [config]="config" [editor]="Editor" [(ngModel)]="htmlEditorValue" skin="moono-lisa" language="en">
                </ckeditor>
                <button class="btn trans-btn list-head-btn ng-star-inserted btn-gradient mt-3 w-25" (click)="getEditorValue()">Save</button>
            </div>
        </div>
    </div>

TS

editorStatus: boolean = false;
htmlEditorValue = 'Test';

    changeEditor() {
        this.editorStatus = true;
      }
      
      getEditorValue() {
        this.editorStatus = false;
        console.log("ashok"+this.htmlEditorValue);
      }

And my output is: enter image description here

I recive a Raw HTML but i want HTML format. Anyone help me to fix this issue

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Try setting your htmlEditorValue in .html file like this:

<p class="mb-0" [innerHtml]="htmlEditorValue"></p>

Take a look here, if I understand your problem the right way, it should solve the problem: https://stackblitz.com/edit/angular-ivy-k7deuo?file=src%2Fapp%2Fapp.component.ts

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda