ckeditor5-angular如何获取焦点?

发布于 2022-09-12 02:55:52 字数 2287 浏览 19 评论 0

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
  selector: 'app-course-part',
  templateUrl: './course-part.component.html',
  styleUrls: ['./course-part.component.scss']
})
export class CoursePartComponent implements OnInit, AfterViewChecked, AfterViewInit {
  @ViewChild('createTitleRef', { static: false }) createTitleRef: HTMLInputElement;
  @ViewChild('contentRef', { static: false }) contentRefC: HTMLElement;
  @ViewChild('codeInputRef', { static: false }) codeInputRef: ElementRef;
  @ViewChild('ckeditorRef', { static: false }) ckeditorRef: any;
  @ViewChildren('h') h: QueryList<HTMLElement>;
  editorRef = null;
  Editor = ClassicEditor;
  config = { toolbar: ['heading', '|', 'bold', 'italic'], placeholder: '输入文本', startupFocus: true };
  showTitle = false; // 是否显示标题框
  title = '';
  code = '';
  text = '';
  image = '';
  showType;
  indexs = { parentIndex: 0, childIndex: 0 };
  nodeContent = [];
  mdIndex = 0; // 描点标识
  contentUpdate = true; // 内容更新标识
  activeType = 'a1';  // 当前选中部分
  isEditTitle = false;
  loading = false;
  constructor() {

  }


  ngOnInit() {
    if (localStorage.getItem('nodeContent')) {
      this.nodeContent = JSON.parse(localStorage.getItem('nodeContent'));
      this.mdIndex = this.nodeContent.length;
    }

  }

  ngAfterViewInit(): void {
    // this.contentRefC['nativeElement'].addEventListener('scroll', (e) => {
    //   this.setPartActive(e)
    // });
  }

  ngAfterViewChecked(): void {
    if (this.createTitleRef) {
      this.createTitleRef['nativeElement'].focus();
    }
    if (this.contentUpdate) {
      this.contentUpdate = false;
      this.setH1ScrollTop();
    }
    if (this.codeInputRef) {
      this.codeInputRef['nativeElement'].focus();
    }
    // console.log(new ClassicEditor().editing);
    // this.Editor.editing.view.focus()
    console.log(this.ckeditorRef);

  }

下面是html

<ckeditor #ckeditorRef (focus)="contentFocus($event)" (blur)="contentBlur($event)" style="width: 800px; margin:10px 0 10px 24px; display:block" [(ngModel)]="text" [editor]="Editor" [config]="config"></ckeditor>

需要如何获取焦点?下面两种方式都不行
**this.ckeditorRef.editing.view.focus()
this.Editor.editing.view.focus()**

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文