Как выделить текст в contenteditable div в угловых? - PullRequest
Новая
       16

Как выделить текст в contenteditable div в угловых?

0 голосов
/ 29 декабря 2018

у меня есть форма contenteditable div, и я хочу, чтобы, когда я набирал в ней более определенного числа символов (более 200 символов), весь текст после этого выделялся.

это мой HTML-код: 

 <div contenteditable="true"
       class="text-box"
       #textarea
       (input)="change($event);touch($event)"
       (keyup)="postLengthCheck('text')"
       maxlength="2300">
  </div>

и это мой машинописный код: 

export const EPANDED_TEXTAREA_VALUE_ACCESSOR: any = {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InstagramContentProductionComponent),
      multi: true,
    };
@Component({
      selector: 'app-instagram-content-production',
      templateUrl: './instagram-content-production.component.html',
      styleUrls: ['./instagram-content-production.component.scss'],
      providers: [EPANDED_TEXTAREA_VALUE_ACCESSOR],
    })

export class InstagramContentProductionComponent implements OnInit, ControlValueAccessor {

      public postLength: any;
      public validTextLength: any;
      createPostForm: FormGroup;
      @ViewChild('boxPosition') public boxPosition: ElementRef;
      innerWidth: any;
      x: any;
      match: any;
      markText: any;
      replaced: any;
      @ViewChild('textarea') textarea;
      onChange;
      onTouched;

      constructor(public appGlobal: AppGlobals, private router: Router, private renderer: Renderer2) {
        this.mySwitch = false;
      }

      writeValue(value: any): void {
        const div = this.textarea.nativeElement;
        this.renderer.setProperty(div, 'textContent', value);
      }

      registerOnChange(fn: any): void {
        this.onChange = fn;
      }

      registerOnTouched(fn: any): void {
        this.onTouched = fn;
      }

      change($event) {
        // Angular does not know that the value has changed.
        // from our component, so we need to update her with the new value.
        console.log($event);
        this.registerOnChange($event.target.textContent);
      }

      touch($event) {
        this.registerOnTouched($event.target.textContent);
      }

postLengthCheck(input) {
    if (input === 'text') {
      this.postLength = this.onChange.length;
      this.validTextLength = 200 - this.postLength;
      if (this.postLength > 200) {
        this.x = this.onChange.substring(200, this.postLength);
        // console.log(this.x);
        this.match = new RegExp(this.x, 'ig');
        this.markText = '<span class="highlighted-text">' + this.x + '<\/span>';
        this.onChange = this.onChange.replace(this.match, this.markText);
        console.log(this.onChange);
      }
    }
  }

 ngOnInit() {
    }
}

и в моем css я определяю highlighted-text класс, как показано ниже: 

.highlighted-text {
  border-radius: 3px;
  color: transparent;
  background-color: #b1d5e5;
}

но это не сработало.как я могу решить эту проблему?

...