Можем ли мы настроить редактор содержимого HTML в угловых? - PullRequest
Новая
       19

Можем ли мы настроить редактор содержимого HTML в угловых?

0 голосов
/ 11 июня 2018

Я новичок в Angular, в настоящее время я работаю над Angular 5, у меня есть требование, что мне нужно настроить редактор контента HTML, например, когда я щелкаю правой кнопкой мыши по выбранному контенту в редакторе, нужно, чтобы пользовательское менющелкните правой кнопкой мыши и нужно скрыть некоторый контент или отключить конкретный контент в редакторе, я использую Froala и CKEditor в угловых 5.

Я попробовал, учитывая, что редактор только для чтения, ноон применяется ко всему редактору, и попробовал пользовательское контекстное меню, с помощью которого мы можем создать меню со статическим содержимым. 

app.component.html

<ckeditor 
 [(ngModel)]="ckeditorContent"
 [config]="ckeConfig" 
 [readonly]="false"
 debounce="500" 
 (change)="onChange($event)"
 ng-right-click="someFunction()" 
 menu-items="menuItems"
></ckeditor>

**app.components.ts**

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


  @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']  
  })
  export class AppComponent {
        ckeditorContent: string = '<p>Some html</p>';

        public menuItems: Object = [
           { text: "Menu Item 1", //menu option text
             disabled: true //No click event. Grayed out option.
           },
           {
             text:"Menu Item 2", 
             disabled: false
           }
        ];

        someFunction(){

            console.log('test');
        }  

        onChange(test){

        }
   }


app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { CKEditorModule } from 'ng2-ckeditor';


  import { AppComponent } from './app.component';
  import { FormsModule } from '@angular/forms';
  @NgModule({
     declarations: [
      AppComponent
     ],
     imports: [
      BrowserModule,
      CKEditorModule,
      FormsModule
     ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

Нужны предложения, пожалуйста, дайте мне знать, можем мы это сделать или нет, еслида, как я могу достичь.

...