Editor in Angular 7

[Paul]

I've looked at all the examples and all the code I could find on integrating the code into this page.  It's eluding me.

So, here’s the deal.  I’ve got a project that I’m pulling from the DB for data into a custom API.  Trying to load it.

I’ve set up, via the instructions found online, the jQuery HTML Editor in a textarea. 

I can’t get the text to update for anything. 

I do it as a text area without the Kendo controls, it updates all day long.  As soon as I update it with being a textarea that’s controlled by Kendo, it will not update.  I look at the object, and the html and the value are set properly on the object, but the screen shows nothing.  No update.

 

I'm trying to get it so that if we have an article for display having text data, I pre-load the data into the Editor.  

 

It is storing the data as raw HTML in the DB.  (Or at least that's my plan, but if it doesn't work, then let me know and I will adjust accordingly.)

 

In the admin-article.component.html file, I've got the following (the rest is irrelevant code above)

 

     </div>
    </div>
    <textarea kendo-editor id="editor" #editor aria-label="editor" rows="30" cols="168" style="height:640px;">121345</textarea>
  </div>
</div>

In the admin-article.component.ts file, I've got the following (again shortened for brevity)

 

  @ViewChild('editor') editorElement: ElementRef;

  ngAfterViewInit() {
    console.log("Editor", this.editorElement)
    kendo.jQuery(this.editorElement.nativeElement)
      .kendoEditor(
        {
          resizable: {
            content: true,
            toolbar: true
          },
          
      });
    console.log("Value", this.editorElement.nativeElement.value)
  }

  ngOnDestroy(): void {
    kendo.destroy(this.editorElement.nativeElement);
  }
  getSelectedSection(section: any): void {
    this.selectedSection = section;
    console.log("Section Selected", section);
    //turn on the selection for the articles as well as the editor and the text boxes and radio buttons for other fields.  Select "Create New Article" and clear all fields.
    this.loadArticles(); 
    
  }
  getSelectedArticle(article: any): void {
    console.log("Article Selected", article)
    this.service['article-id'].get({
      params: {
        article_id: article
      }
    }).subscribe(
      data => {
        (this.selectedArticle = data)

      },
      error => console.error(error),
      () => {
        console.log("Selected Article", this.selectedArticle)
        console.log("Editor", this.editorElement)
        
        this.articleTitle = this.selectedArticle["articleTitle"]
        this.articleSubheader = this.selectedArticle["subHeader"]
        this.articleUrl = this.selectedArticle["destinationURL"]
        this.articleImage = this.selectedArticle["imageInfo"]
        this.editorText = this.selectedArticle["articleText"]
        this.editorElement.nativeElement.innerHTML = this.editorText
        this.editorElement.nativeElement.value = this.editorText
        console.log("Article Text", this.editorText)
      })
    
  }

 

 

Any assistance would be absolutely appreciated.  I've tried to get this working.  Our UI guy quit 4 weeks ago, and I'm doing double-duty.

 

 

 

[Dimiter Topalov]

Hello Paul,

You can set the value of the Editor widget programmatically via its value() method by passing it the desired value. When the value is coming asynchronously from a data service, you can perform this operation in the subscribe callback when Observables are used or in the then(...) callback if Promises are used.

Please find attached a sample application demonstrating setting the raw HTML string as Editor's value.

Further information about the built-in Kendo UI for jQuery functionalities and API is available in the Kendo UI for jQuery documentation:

https://docs.telerik.com/kendo-ui/controls/editors/editor/overview

https://docs.telerik.com/kendo-ui/api/javascript/ui/editor

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik